fix(dropdown): fix redundant programmatic focusable element

This change eliminates redundant programmatic focusable element from vanilla dropdown. Fixes #4640.
carbon-design-system · Apr 7, 2020 · 3e82d59 · 3e82d59
1 parent 277a60e
commit 3e82d59
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/packages/components/src/components/dropdown/dropdown.hbs b/packages/components/src/components/dropdown/dropdown.hbs
@@ -18,7 +18,7 @@
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
-      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="0" id="{{default.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{default.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="-1" id="{{default.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{default.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
@@ -43,7 +43,7 @@
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
-      <ul class="{{@root.prefix}}--dropdown-list"  role="menu" tabindex="0" id="{{helper.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{helper.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list"  role="menu" tabindex="-1" id="{{helper.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{helper.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../helper.idSuffix}}-item{{@index}}">{{label}}</a>
@@ -72,7 +72,7 @@
         </span>
       </button>
       <!-- Note: remove `tabindex` from disabled dropdown lists -->
-      <ul class="{{@root.prefix}}--dropdown-list" id="{{disabled.idSuffix}}-menu" role="menu" id="{{disabled.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{disabled.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{disabled.idSuffix}}-menu" role="menu" id="{{disabled.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{disabled.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../disabled.idSuffix}}-item{{@index}}">{{label}}</a>
@@ -101,7 +101,7 @@
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
-      <ul class="{{@root.prefix}}--dropdown-list" id="{{invalid.idSuffix}}-menu" role="menu" tabindex="0" id="{{invalid.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{invalid.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{invalid.idSuffix}}-menu" role="menu" tabindex="-1" id="{{invalid.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{invalid.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../invalid.idSuffix}}-item{{@index}}">{{label}}</a>
@@ -136,7 +136,7 @@
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
-      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="0" id="{{default.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{default.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="-1" id="{{default.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{default.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>

diff --git a/packages/components/src/components/dropdown/dropdown.js b/packages/components/src/components/dropdown/dropdown.js
@@ -268,6 +268,17 @@ class Dropdown extends mixin(
           }
         });
       }
+
+      const listNodeIncludingClassic = this.element.querySelector(
+        this.options.selectorMenu
+      );
+      if (listNodeIncludingClassic) {
+        listNodeIncludingClassic.tabIndex = this.element.classList.contains(
+          this.options.classOpen
+        )
+          ? '0'
+          : '-1';
+      }
     }
   }