@carbon/charts 0.41.89 → 0.41.93

package/styles/vendor/carbon-components/src/components/dropdown/dropdown.hbs

@@ -7,25 +7,31 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
     <span id="{{default.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
-    {{/unless}}
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
-      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{default.idSuffix}}-menu" aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{default.idSuffix}}-menu"
+        aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown
+          option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ 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">
-          <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>
+        <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>
         </li>
         {{/each}}
       </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+    {{/unless}}
   </div>
 </div>
 
@@ -33,78 +39,94 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
     <span id="{{helper.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
-      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{helper.idSuffix}}-menu" aria-labelledby="{{helper.idSuffix}}-label {{helper.idSuffix}}-value" type="button">
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{helper.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{helper.idSuffix}}-menu" aria-labelledby="{{helper.idSuffix}}-label {{helper.idSuffix}}-value"
+        type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{helper.idSuffix}}-value">{{#unless inline}} Dropdown
+          option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ 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">
-          <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>
+        <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>
         </li>
         {{/each}}
       </ul>
     </div>
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here; if message is more than one line text
+      should wrap (~100 character count maximum)</div>
   </div>
 </div>
 {{/unless}}
 
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
-    <span id="{{disabled.idSuffix}}-label" class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled" aria-disabled="true">Dropdown label</span>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled" aria-disabled="true">Optional helper text
-      here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
-    {{/unless}}
+    <span id="{{disabled.idSuffix}}-label" class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled"
+      aria-disabled="true">Dropdown label</span>
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown{{#if up}} {{@root.prefix}}--dropdown--up{{/if}}{{#if light}} {{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}} {{@root.prefix}}--dropdown--disabled">
-      <button disabled class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{disabled.idSuffix}}-menu" aria-labelledby="{{disabled.idSuffix}}-label {{disabled.idSuffix}}-value" type="button">
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{disabled.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+      <button disabled class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{disabled.idSuffix}}-menu"
+        aria-labelledby="{{disabled.idSuffix}}-label {{disabled.idSuffix}}-value" type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{disabled.idSuffix}}-value">{{#unless inline}}
+          Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </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">
-          <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>
+        <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>
         </li>
         {{/each}}
       </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled" aria-disabled="true">
+      Optional helper text
+      here; if message is more than one line text
+      should wrap (~100 character count maximum)</div>
+    {{/unless}}
   </div>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
-  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline {{@root.prefix}}--dropdown__wrapper--inline--invalid{{/if}}">
+  <div
+    class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline {{@root.prefix}}--dropdown__wrapper--inline--invalid{{/if}}">
     <span id="{{invalid.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
-      here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
-    {{/unless}}
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown {{@root.prefix}}--dropdown--invalid {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}}"
       data-invalid>
-      <button  class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{invalid.idSuffix}}-menu" aria-labelledby="{{invalid.idSuffix}}-label {{invalid.idSuffix}}-value" type="button">
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{invalid.idSuffix}}-menu"
+        aria-labelledby="{{invalid.idSuffix}}-label {{invalid.idSuffix}}-value" type="button">
         {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--dropdown__invalid-icon')}}
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{invalid.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{invalid.idSuffix}}-value">{{#unless inline}} Dropdown
+          option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ 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">
-          <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>
+        <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>
         </li>
         {{/each}}
       </ul>
@@ -116,8 +138,40 @@
     </div>
     {{#unless inline}}
     <div class="{{@root.prefix}}--form-requirement">
-      This is not a validation message
+      This is a validation message
+    </div>
+    {{/unless}}
+  </div>
+</div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
+    <span id="{{default.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
+    <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
+      class="{{@root.prefix}}--dropdown  {{@root.prefix}}--dropdown--show-selected {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{default.idSuffix}}-menu"
+        aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown
+          option {{else}}Inline Dropdown label{{/unless}}</span>
+        <span class="{{@root.prefix}}--dropdown__arrow-container">
+          {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
+        </span>
+      </button>
+      <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>
+          {{ carbon-icon 'Checkmark16' class=(add @root.prefix '--list-box__menu-item__selected-icon') aria-hidden="true" }}
+        </li>
+        {{/each}}
+      </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
     {{/unless}}
   </div>
 </div>

package/styles/vendor/carbon-components/src/components/dropdown/dropdown.js

@@ -13,7 +13,7 @@ import trackBlur from '../../globals/js/mixins/track-blur';
 import eventMatches from '../../globals/js/misc/event-matches';
 import on from '../../globals/js/misc/on';
 
-const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
+const toArray = (arrayLike) => Array.prototype.slice.call(arrayLike);
 
 class Dropdown extends mixin(
   createComponent,
@@ -41,23 +41,44 @@ class Dropdown extends mixin(
     super(element, options);
 
     this.manage(
-      on(this.element.ownerDocument, 'click', event => {
+      on(this.element.ownerDocument, 'click', (event) => {
         this._toggle(event);
       })
     );
     this.manage(
-      on(this.element, 'keydown', event => {
+      on(this.element, 'keydown', (event) => {
         this._handleKeyDown(event);
       })
     );
     this.manage(
-      on(this.element, 'click', event => {
+      on(this.element, 'click', (event) => {
         const item = eventMatches(event, this.options.selectorItem);
         if (item) {
           this.select(item);
         }
       })
     );
+
+    // When using the active descendant approach we use a class to give focus styles during keyboard (up/down arrows)
+    // navigation instead of relying on the :focus selector. This leaves the potential to have multiple items when
+    // switching interactions between keyboard and mouse users. To more closely align with Carbon React implementation,
+    // we want the focus class to move as the user hovers over items. This also updates the location of focus based on
+    // the last hovered item if the user switches back to using the keyboard.
+    if (
+      // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+      this.element.querySelector(this.options.selectorTrigger) &&
+      this.element.querySelector(this.options.selectorMenu)
+    ) {
+      // Using the latest HTML structure that supports the aria-activedescendant attribute
+      this.manage(
+        on(this.element, 'mouseover', (event) => {
+          const item = eventMatches(event, this.options.selectorItem);
+          if (item) {
+            this._updateFocus(item);
+          }
+        })
+      );
+    }
   }
 
   /**
@@ -74,10 +95,78 @@ class Dropdown extends mixin(
       this.navigate(direction);
       event.preventDefault(); // Prevents up/down keys from scrolling container
     } else {
+      // get selected item
+      // in v10.0, the anchor elements fire click events on Enter keypress when a dropdown item is selected
+      // in v10.5 (#3586), focus is no longer placed on the dropdown items and is instead kept fixed on the ul menu
+      // so we need to manually call getCurrentNavigation and select the item
+      const item = this.getCurrentNavigation();
+      if (
+        item &&
+        isOpen &&
+        (event.which === 13 || event.which === 32) &&
+        !this.element.ownerDocument.activeElement.matches(
+          this.options.selectorItem
+        )
+      ) {
+        event.preventDefault();
+        this.select(item);
+      }
       this._toggle(event);
     }
   }
 
+  /**
+   * When using aria-activedescendant we want to make sure attributes and classes
+   * are properly cleaned up when the dropdown is closed
+   * @private
+   */
+  _focusCleanup() {
+    // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+    const triggerNode = this.element.querySelector(
+      this.options.selectorTrigger
+    );
+
+    // only want to grab the listNode IF it's using the latest a11y HTML structure
+    const listNode = triggerNode
+      ? this.element.querySelector(this.options.selectorMenu)
+      : null;
+
+    if (listNode) {
+      listNode.removeAttribute('aria-activedescendant');
+      const focusedItem = this.element.querySelector(
+        this.options.selectorItemFocused
+      );
+      if (focusedItem) {
+        focusedItem.classList.remove(this.options.classFocused);
+      }
+    }
+  }
+
+  /**
+   * Update focus using aria-activedescendant HTML structure
+   * @param {HTMLElement} itemToFocus The element to be focused.
+   */
+  _updateFocus(itemToFocus) {
+    // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+    const triggerNode = this.element.querySelector(
+      this.options.selectorTrigger
+    );
+
+    // only want to grab the listNode IF it's using the latest a11y HTML structure
+    const listNode = triggerNode
+      ? this.element.querySelector(this.options.selectorMenu)
+      : null;
+
+    const previouslyFocused = listNode.querySelector(
+      this.options.selectorItemFocused
+    );
+    itemToFocus.classList.add(this.options.classFocused);
+    listNode.setAttribute('aria-activedescendant', itemToFocus.id);
+    if (previouslyFocused) {
+      previouslyFocused.classList.remove(this.options.classFocused);
+    }
+  }
+
   /**
    * Opens and closes the dropdown menu.
    * @param {Event} [event] The event triggering this method.
@@ -93,6 +182,7 @@ class Dropdown extends mixin(
       return;
     }
 
+    // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
     const triggerNode = this.element.querySelector(
       this.options.selectorTrigger
     );
@@ -101,8 +191,8 @@ class Dropdown extends mixin(
       // User presses down arrow
       (event.which === 40 &&
         !event.target.matches(this.options.selectorItem)) ||
-      // User presses space or enter and the trigger is not a button
-      (!triggerNode &&
+      // User presses space or enter and the trigger is not a button OR event is not fired by trigger
+      ((!triggerNode || !triggerNode.contains(event.target)) &&
         [13, 32].indexOf(event.which) >= 0 &&
         !event.target.matches(this.options.selectorItem)) ||
       // User presses esc
@@ -119,7 +209,7 @@ class Dropdown extends mixin(
         toggle: isOfSelf && event.which !== 27 && event.which !== 40,
       };
       let changedState = false;
-      Object.keys(actions).forEach(action => {
+      Object.keys(actions).forEach((action) => {
         if (actions[action]) {
           changedState = true;
           this.element.classList[action](this.options.classOpen);
@@ -146,8 +236,9 @@ class Dropdown extends mixin(
         (listNode || this.element).focus();
         if (listNode) {
           const selectedNode = listNode.querySelector(
-            this.options.selectorItemSelected
+            this.options.selectorLinkSelected
           );
+
           listNode.setAttribute(
             'aria-activedescendant',
             (selectedNode || listItems[0]).id
@@ -158,21 +249,18 @@ class Dropdown extends mixin(
         }
       } else if (changedState && (isOfSelf || actions.remove)) {
         // toggled close
-        (triggerNode || this.element).focus();
+        // timer is used to call focus AFTER the click event on
+        // trigger button (which is caused by keypress e.g. during keyboard navigation)
+        setTimeout(() => (triggerNode || this.element).focus(), 0);
         if (triggerNode) {
           triggerNode.setAttribute('aria-expanded', 'false');
         }
-        if (listNode) {
-          listNode.removeAttribute('aria-activedescendant');
-          this.element
-            .querySelector(this.options.selectorItemFocused)
-            .classList.remove(this.options.classFocused);
-        }
+        this._focusCleanup();
       }
 
       // @todo remove once legacy structure is depreciated
       if (!triggerNode) {
-        listItems.forEach(item => {
+        listItems.forEach((item) => {
           if (this.element.classList.contains(this.options.classOpen)) {
             item.tabIndex = 0;
           } else {
@@ -180,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';
+      }
     }
   }
 
@@ -191,6 +290,7 @@ class Dropdown extends mixin(
 
     // Using the latest semantic markup structure where trigger is a button
     // @todo remove conditional once legacy structure is depreciated
+    // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
     if (this.element.querySelector(this.options.selectorTrigger)) {
       const listNode = this.element.querySelector(this.options.selectorMenu);
       const focusedId = listNode.getAttribute('aria-activedescendant');
@@ -218,8 +318,8 @@ class Dropdown extends mixin(
     );
     const start =
       this.getCurrentNavigation() ||
-      this.element.querySelector(this.options.selectorItemSelected);
-    const getNextItem = old => {
+      this.element.querySelector(this.options.selectorLinkSelected);
+    const getNextItem = (old) => {
       const handleUnderflow = (i, l) => i + (i >= 0 ? 0 : l);
       const handleOverflow = (i, l) => i - (i < l ? 0 : l);
       // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
@@ -228,6 +328,9 @@ class Dropdown extends mixin(
         handleUnderflow(handleOverflow(index, items.length), items.length)
       ];
     };
+    const isShowSelected = this.element.classList.contains(
+      this.options.classShowSelected
+    );
     for (
       let current = getNextItem(start);
       current && current !== start;
@@ -236,20 +339,15 @@ class Dropdown extends mixin(
       if (
         !current.matches(this.options.selectorItemHidden) &&
         !current.parentNode.matches(this.options.selectorItemHidden) &&
-        !current.matches(this.options.selectorItemSelected)
+        (isShowSelected ||
+          (!isShowSelected &&
+            !current.parentElement.matches(this.options.selectorItemSelected)))
       ) {
         // Using the latest semantic markup structure where trigger is a button
         // @todo remove conditional once legacy structure is depreciated
+        // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
         if (this.element.querySelector(this.options.selectorTrigger)) {
-          const listNode = this.element.querySelector(
-            this.options.selectorMenu
-          );
-          const previouslyFocused = listNode.querySelector(
-            this.options.selectorItemFocused
-          );
-          current.classList.add(this.options.classFocused);
-          listNode.setAttribute('aria-activedescendant', current.id);
-          previouslyFocused.classList.remove(this.options.classFocused);
+          this._updateFocus(current);
         } else {
           current.focus();
         }
@@ -274,6 +372,7 @@ class Dropdown extends mixin(
 
     if (this.element.dispatchEvent(eventStart)) {
       if (this.element.dataset.dropdownType !== 'navigation') {
+        // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
         const selectorText =
           !this.element.querySelector(this.options.selectorTrigger) &&
           this.element.dataset.dropdownType !== 'inline'
@@ -283,15 +382,15 @@ class Dropdown extends mixin(
         if (text) {
           text.innerHTML = itemToSelect.innerHTML;
         }
-        itemToSelect.classList.add(this.options.classSelected);
+        itemToSelect.parentElement.classList.add(this.options.classSelected);
       }
       this.element.dataset.value = itemToSelect.parentElement.dataset.value;
 
       toArray(
-        this.element.querySelectorAll(this.options.selectorItemSelected)
-      ).forEach(item => {
+        this.element.querySelectorAll(this.options.selectorLinkSelected)
+      ).forEach((item) => {
         if (itemToSelect !== item) {
-          item.classList.remove(this.options.classSelected);
+          item.parentElement.classList.remove(this.options.classSelected);
         }
       });
 
@@ -310,6 +409,7 @@ class Dropdown extends mixin(
    */
   handleBlur() {
     this.element.classList.remove(this.options.classOpen);
+    this._focusCleanup();
   }
 
   /**
@@ -326,7 +426,9 @@ class Dropdown extends mixin(
    * @member Dropdown.options
    * @type {object}
    * @property {string} selectorInit The CSS selector to find selectors.
-   * @property {string} [selectorTrigger] The CSS selector to find trigger button when using a11y compliant markup.
+   * @property {string} [selectorTrigger]
+   *   The CSS selector to find the trigger button when using a11y compliant markup.
+   *   NOTE: Does NOT match the trigger button in older markup.
    * @property {string} [selectorMenu] The CSS selector to find menu list when using a11y compliant markup.
    * @property {string} [selectorText] The CSS selector to find the element showing the selected item.
    * @property {string} [selectorTextInner] The CSS selector to find the element showing the selected item, used for inline mode.
@@ -336,6 +438,8 @@ class Dropdown extends mixin(
    *   Used to skip dropdown items for keyboard navigation.
    * @property {string} [selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item.
    * @property {string} [selectorItemFocused] The CSS selector to find the clickable area in the focused dropdown item.
+   * @property {string} [selectorLinkSelected] The CSS selector to target the link node of the selected dropdown item.
+   * @property {string} [classShowSelected] The CSS class for the show selected modifier of the dropdown.
    * @property {string} [classSelected] The CSS class for the selected dropdown item.
    * @property {string} [classFocused] The CSS class for the focused dropdown item.
    * @property {string} [classOpen] The CSS class for the open state.
@@ -349,7 +453,7 @@ class Dropdown extends mixin(
     const { prefix } = settings;
     return {
       selectorInit: '[data-dropdown]',
-      selectorTrigger: `button.${prefix}--dropdown-text`,
+      selectorTrigger: `button.${prefix}--dropdown-text`, // NOTE: Does NOT match the trigger button in older markup.
       selectorMenu: `.${prefix}--dropdown-list`,
       selectorText: `.${prefix}--dropdown-text`,
       selectorTextInner: `.${prefix}--dropdown-text__inner`,
@@ -357,6 +461,8 @@ class Dropdown extends mixin(
       selectorItemSelected: `.${prefix}--dropdown--selected`,
       selectorItemFocused: `.${prefix}--dropdown--focused`,
       selectorItemHidden: `[hidden],[aria-hidden="true"]`,
+      selectorLinkSelected: `.${prefix}--dropdown--selected .${prefix}--dropdown-link`,
+      classShowSelected: `${prefix}--dropdown--show-selected`,
       classSelected: `${prefix}--dropdown--selected`,
       classFocused: `${prefix}--dropdown--focused`,
       classOpen: `${prefix}--dropdown--open`,
@@ -370,7 +476,7 @@ class Dropdown extends mixin(
    * Enum for navigating backward/forward.
    * @readonly
    * @member Dropdown.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */