fix(dropdown): fix redundant programmatic focusable element (carbon-d…

…esign-system#5818) This change eliminates redundant programmatic focusable element from vanilla dropdown. Fixes carbon-design-system#4640.
joshblack · Apr 16, 2020 · f7bf5b5 · f7bf5b5
1 parent 46896a8
commit f7bf5b5
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 menuListNode = this.element.querySelector(
+ this.options.selectorMenu
+ );
+ if (menuListNode) {
+ menuListNode.tabIndex = this.element.classList.contains(
+ this.options.classOpen
+ )
+ ? '0'
+ : '-1';
+ }
  }
  }