fix(list): Update clickable elements selector (#3312)

(cherry picked from commit c8ded0a)

packages/mdc-list/README.md

@@ -138,7 +138,7 @@ single list item to become selected or deselected.
 
 ```html
 <ul id="my-list" class="mdc-list" aria-orientation="vertical">
-  <li class="mdc-list-item">Single-line item</li>
+  <li class="mdc-list-item" tabindex="0">Single-line item</li>
   <li class="mdc-list-item">Single-line item</li>
   <li class="mdc-list-item">Single-line item</li>
 </ul>
@@ -158,7 +158,7 @@ the `mdc-list-item--selected` class and `aria-selected="true"` attribute before
 ```html
 <ul id="my-list" class="mdc-list" aria-orientation="vertical">
   <li class="mdc-list-item">Single-line item</li>
-  <li class="mdc-list-item mdc-list-item--selected" aria-selected="true">Single-line item</li>
+  <li class="mdc-list-item mdc-list-item--selected" aria-selected="true" tabindex="0">Single-line item</li>
   <li class="mdc-list-item">Single-line item</li>
 </ul>
 ```

packages/mdc-list/constants.js

@@ -24,9 +24,9 @@ const cssClasses = {
 /** @enum {string} */
 const strings = {
   ARIA_ORIENTATION: 'aria-orientation',
-  ARIA_ORIENTATION_VERTICAL: 'vertical',
+  ARIA_ORIENTATION_HORIZONTAL: 'horizontal',
   ARIA_SELECTED: 'aria-selected',
-  FOCUSABLE_CHILD_ELEMENTS: 'button:not(:disabled), a',
+  FOCUSABLE_CHILD_ELEMENTS: `.${cssClasses.LIST_ITEM_CLASS} button:not(:disabled), .${cssClasses.LIST_ITEM_CLASS} a`,
   ENABLED_ITEMS_SELECTOR: '.mdc-list-item:not(.mdc-list-item--disabled)',
 };
 

packages/mdc-list/index.js

@@ -65,7 +65,7 @@ class MDCList extends MDCComponent {
 
   layout() {
     const direction = this.root_.getAttribute(strings.ARIA_ORIENTATION);
-    this.vertical = direction === strings.ARIA_ORIENTATION_VERTICAL;
+    this.vertical = direction !== strings.ARIA_ORIENTATION_HORIZONTAL;
 
     // List items need to have at least tabindex=-1 to be focusable.
     [].slice.call(this.root_.querySelectorAll('.mdc-list-item:not([tabindex])'))

test/unit/mdc-list/mdc-list.test.js

@@ -40,8 +40,7 @@ function getFixture() {
   `;
 }
 
-function setupTest() {
-  const root = getFixture();
+function setupTest(root = getFixture()) {
   const MockFoundationCtor = td.constructor(MDCListFoundation);
   const mockFoundation = new MockFoundationCtor();
   const component = new MDCList(root, mockFoundation);
@@ -54,6 +53,25 @@ test('attachTo initializes and returns a MDCList instance', () => {
   assert.isTrue(MDCList.attachTo(getFixture()) instanceof MDCList);
 });
 
+test('component calls setVerticalOrientation on the foundation if aria-orientation is not set', () => {
+  const {mockFoundation} = setupTest();
+  td.verify(mockFoundation.setVerticalOrientation(true), {times: 1});
+});
+
+test('component calls setVerticalOrientation(false) on the foundation if aria-orientation=horizontal', () => {
+  const root = getFixture();
+  root.setAttribute('aria-orientation', 'horizontal');
+  const {mockFoundation} = setupTest(root);
+  td.verify(mockFoundation.setVerticalOrientation(false), {times: 1});
+});
+
+test('component calls setVerticalOrientation(true) on the foundation if aria-orientation=vertical', () => {
+  const root = getFixture();
+  root.setAttribute('aria-orientation', 'vertical');
+  const {mockFoundation} = setupTest(root);
+  td.verify(mockFoundation.setVerticalOrientation(true), {times: 1});
+});
+
 test('#adapter.getListItemCount returns correct number of list items', () => {
   const {root, component} = setupTest();
   document.body.appendChild(root);
@@ -177,33 +195,33 @@ test('#adapter.focusItemAtIndex focuses the list item at the index specified', (
 });
 
 test('adapter#isListItem returns true if the element is a list item', () => {
-  const {root, component} = setupTest(true);
+  const {root, component} = setupTest();
   const item1 = root.querySelectorAll('.mdc-list-item')[0];
   assert.isTrue(component.getDefaultFoundation().adapter_.isListItem(item1));
 });
 
 test('adapter#isListItem returns false if the element is a not a list item', () => {
-  const {root, component} = setupTest(true);
+  const {root, component} = setupTest();
   const item1 = root.querySelectorAll('.mdc-list-item button')[0];
   assert.isFalse(component.getDefaultFoundation().adapter_.isListItem(item1));
 });
 
 test('adapter#isElementFocusable returns true if the element is a focusable list item sub-element', () => {
-  const {root, component} = setupTest(true);
+  const {root, component} = setupTest();
   const item1 = root.querySelectorAll('.mdc-list-item button')[0];
   assert.isTrue(component.getDefaultFoundation().adapter_.isElementFocusable(item1));
 });
 
 test('adapter#isElementFocusable returns false if the element is not a focusable list item sub-element',
   () => {
-    const {root, component} = setupTest(true);
+    const {root, component} = setupTest();
     const item1 = root.querySelectorAll('.mdc-list-item')[2];
     assert.isFalse(component.getDefaultFoundation().adapter_.isElementFocusable(item1));
   });
 
 test('adapter#isElementFocusable returns false if the element is null/undefined',
   () => {
-    const {component} = setupTest(true);
+    const {component} = setupTest();
     assert.isFalse(component.getDefaultFoundation().adapter_.isElementFocusable());
   });
 
@@ -231,8 +249,8 @@ test('layout adds tabindex=-1 to all list item button/a elements', () => {
 
 test('vertical calls setVerticalOrientation on foundation', () => {
   const {component, mockFoundation} = setupTest();
-  component.vertical = true;
-  td.verify(mockFoundation.setVerticalOrientation(true), {times: 1});
+  component.vertical = false;
+  td.verify(mockFoundation.setVerticalOrientation(false), {times: 1});
 });
 
 test('wrapFocus calls setWrapFocus on foundation', () => {