[Terra-Dropdown] VO does not announce Expanded state and Index of list items while navigating through arrow keys

packages/terra-dropdown-button/CHANGELOG.md

@@ -2,8 +2,8 @@
 
 ## Unreleased
 
-* Added 
-   * Added focus styles for dropdown list items.
+* Added
+   * Added focus styles and screenreader support to announce expand/collapse state and index for dropdown list items.
 
 ## 1.34.0 - (May 9, 2023)
 

packages/terra-dropdown-button/src/DropdownButton.jsx

@@ -69,20 +69,18 @@ class DropdownButton extends React.Component {
     this.setListNode = this.setListNode.bind(this);
     this.toggleDropDown = this.toggleDropDown.bind(this);
     this.state = {
-      isOpen: false, isActive: false, openedViaKeyboard: false, selectText: '',
+      isOpen: false, isActive: false, selectText: '',
     };
   }
 
   handleDropdownButtonClick(event) {
-    if (this.state.isOpen) {
-      this.setState({ openedViaKeyboard: false });
-    }
     this.toggleDropDown(event);
+    this.setState({ selectText: '' });
   }
 
   handleDropdownRequestClose(callback) {
     const onSelectCallback = typeof callback === 'function' ? callback : undefined;
-    this.setState({ isOpen: false, openedViaKeyboard: false, isActive: false }, onSelectCallback);
+    this.setState({ isOpen: false, isActive: false }, onSelectCallback);
   }
 
   handleKeyDown(event) {
@@ -91,25 +89,14 @@ class DropdownButton extends React.Component {
     }
     if (event.keyCode === KeyCode.KEY_SPACE || event.keyCode === KeyCode.KEY_RETURN) {
       // In FireFox active styles don't get applied on space
-      this.setState({ isActive: true, openedViaKeyboard: true });
+      this.setState({ isActive: true });
       /*
         Prevent the callback from being called repeatedly if the RETURN or SPACE key is held down.
         The keyDown event of native html button triggers Onclick() event on RETURN or SPACE key press.
         where holding RETURN key for longer time will call dropdownClick() event repeatedly which would cause
         the dropdown to open and close itself.
       */
       event.preventDefault();
-    } else if (event.keyCode === KeyCode.KEY_DOWN && this.state.isOpen && !this.state.openedViaKeyboard) {
-      // set focus to first list element on down arrow key press only when dropdown is opened by mouse click.
-      const listOptions = this.dropdownList.querySelectorAll('[data-terra-dropdown-list-item]');
-      listOptions[0].focus();
-      // prevent handleFocus() callback of DropdownList.
-      event.preventDefault();
-    } else if (event.keyCode === KeyCode.KEY_UP && this.state.isOpen && !this.state.openedViaKeyboard) {
-      // set focus to last list element on up arrow key press only when dropdown is opened by mouse click
-      const listOptions = this.dropdownList.querySelectorAll('[data-terra-dropdown-list-item]');
-      listOptions[listOptions.length - 1].focus();
-      event.preventDefault();
     } else if (event.keyCode === KeyCode.KEY_TAB) {
       this.handleDropdownRequestClose();
     }
@@ -166,7 +153,7 @@ class DropdownButton extends React.Component {
     const theme = this.context;
 
     const {
-      isOpen, isActive, openedViaKeyboard, selectText,
+      isOpen, isActive, selectText,
     } = this.state;
     const selectedLabel = intl.formatMessage({ id: 'Terra.dropdownButton.selected' });
     const classnames = cx(
@@ -191,9 +178,8 @@ class DropdownButton extends React.Component {
         isCompact={isCompact}
         isDisabled={isDisabled}
         requestClose={this.handleDropdownRequestClose}
-        openedViaKeyboard={openedViaKeyboard}
-        buttonRef={this.getButtonNode}
         refCallback={this.setListNode}
+        buttonRef={this.getButtonNode}
         getSelectedOptionText={this.getSelectedOptionText}
       >
         <button
@@ -205,9 +191,8 @@ class DropdownButton extends React.Component {
           disabled={isDisabled}
           tabIndex={isDisabled ? '-1' : undefined}
           aria-disabled={isDisabled}
-          aria-expanded={isOpen}
-          aria-haspopup="menu"
           ref={this.setButtonNode}
+          aria-expanded={isOpen}
           aria-label={selectText ? `${selectText}, ${selectedLabel}` : ''}
           onBlur={this.handleBlur}
         >

packages/terra-dropdown-button/src/Item.jsx

@@ -53,17 +53,13 @@ const Item = ({
       }}
       tabIndex="0"
       role="menuitem"
+      className={cx(
+        'item',
+        { active: isActive },
+        theme.className,
+      )}
     >
-      <div
-        role="none"
-        className={cx(
-          'item',
-          { active: isActive },
-          theme.className,
-        )}
-      >
-        {label}
-      </div>
+      {label}
     </li>
   );
 };

packages/terra-dropdown-button/src/SplitButton.jsx

@@ -80,21 +80,19 @@ class SplitButton extends React.Component {
     this.handlePrimaryKeyUp = this.handlePrimaryKeyUp.bind(this);
     this.handleCaretKeyDown = this.handleCaretKeyDown.bind(this);
     this.handleCaretKeyUp = this.handleCaretKeyUp.bind(this);
-    this.setButtonNode = this.setButtonNode.bind(this);
     this.getButtonNode = this.getButtonNode.bind(this);
+    this.setButtonNode = this.setButtonNode.bind(this);
     this.setListNode = this.setListNode.bind(this);
     this.toggleDropDown = this.toggleDropDown.bind(this);
 
     this.state = {
-      isOpen: false, caretIsActive: false, primaryIsActive: false, openedViaKeyboard: false, selectText: '',
+      isOpen: false, caretIsActive: false, primaryIsActive: false, selectText: '',
     };
   }
 
   handleDropdownButtonClick(event) {
-    if (this.state.isOpen) {
-      this.setState({ openedViaKeyboard: false });
-    }
     this.toggleDropDown(event);
+    this.setState({ selectText: '' });
   }
 
   handlePrimaryButtonClick(event) {
@@ -108,7 +106,7 @@ class SplitButton extends React.Component {
 
   handleDropdownRequestClose(callback) {
     const onSelectCallback = typeof callback === 'function' ? callback : undefined;
-    this.setState({ isOpen: false, openedViaKeyboard: false, caretIsActive: false }, onSelectCallback);
+    this.setState({ isOpen: false, caretIsActive: false }, onSelectCallback);
   }
 
   /*
@@ -132,25 +130,14 @@ class SplitButton extends React.Component {
     }
     if (event.keyCode === KeyCode.KEY_SPACE || event.keyCode === KeyCode.KEY_RETURN) {
       // In FireFox active styles don't get applied onKeyDown
-      this.setState({ caretIsActive: true, openedViaKeyboard: true });
+      this.setState({ caretIsActive: true });
       /*
         Prevent the callback from being called repeatedly if the RETURN or SPACE key is held down.
         The keyDown event of native html button triggers Onclick() event on RETURN or SPACE key press.
         where holding RETURN key for longer time will call dropdownClick() event repeatedly which would cause
         the dropdown to open and close itself.
       */
       event.preventDefault();
-    } else if (event.keyCode === KeyCode.KEY_DOWN && this.state.isOpen && !this.state.openedViaKeyboard) {
-      // set focus to first list element on down arrow key press only when dropdown is opened by mouse click.
-      const listOptions = this.dropdownList.querySelectorAll('[data-terra-dropdown-list-item]');
-      listOptions[0].focus();
-      // prevent handleFocus() callback of DropdownList.
-      event.preventDefault();
-    } else if (event.keyCode === KeyCode.KEY_UP && this.state.isOpen && !this.state.openedViaKeyboard) {
-      // set focus to last list element on up arrow key press only when dropdown is opened by mouse click
-      const listOptions = this.dropdownList.querySelectorAll('[data-terra-dropdown-list-item]');
-      listOptions[listOptions.length - 1].focus();
-      event.preventDefault();
     } else if (event.keyCode === KeyCode.KEY_TAB) {
       this.handleDropdownRequestClose();
     }
@@ -180,10 +167,6 @@ class SplitButton extends React.Component {
     this.setState({ selectText: selectedOptionText });
   }
 
-  handleFocus = () => {
-    this.setState({ selectText: '' });
-  };
-
   handleBlur = () => {
     this.setState({ selectText: '' });
   };
@@ -215,7 +198,6 @@ class SplitButton extends React.Component {
       isOpen,
       primaryIsActive,
       caretIsActive,
-      openedViaKeyboard,
       selectText,
     } = this.state;
 
@@ -253,7 +235,6 @@ class SplitButton extends React.Component {
         isBlock={isBlock}
         isCompact={isCompact}
         isDisabled={isDisabled}
-        openedViaKeyboard={openedViaKeyboard}
         buttonRef={this.getButtonNode}
         refCallback={this.setListNode}
         getSelectedOptionText={this.getSelectedOptionText}

packages/terra-dropdown-button/src/_Dropdown.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import FocusTrap from 'focus-trap-react';
 import Hookshot from 'terra-hookshot';
@@ -27,52 +27,63 @@ const propTypes = {
    */
   width: PropTypes.string,
   /**
-   * Whether or not dropdown is opened using keyboard.
+   * Ref callback for the dropdown list DOM element.
    */
-  openedViaKeyboard: PropTypes.bool,
+  refCallback: PropTypes.func,
   /**
    * Callback for reference of the dropdown button
    */
   buttonRef: PropTypes.func,
-  /**
-   * Ref callback for the dropdown list DOM element.
-   */
-  refCallback: PropTypes.func,
   /**
    * Callback for the dropdown list selected option.
    */
   getSelectedOptionText: PropTypes.func,
 };
 
 const Dropdown = ({
-  requestClose, isOpen, targetRef, children, width, openedViaKeyboard, buttonRef, refCallback, getSelectedOptionText,
-}) => (
-  <Hookshot
-    isOpen={isOpen}
-    isEnabled
-    targetRef={targetRef}
-    attachmentBehavior="flip"
-    contentAttachment={{ vertical: 'top', horizontal: 'start' }}
-    targetAttachment={{ vertical: 'bottom', horizontal: 'start' }}
-  >
-    <Hookshot.Content
-      onEsc={requestClose}
-      onOutsideClick={requestClose}
-    >
-      <FocusTrap focusTrapOptions={{ returnFocusOnDeactivate: true, initialFocus: openedViaKeyboard ? '' : buttonRef, clickOutsideDeactivates: true }}>
-        <DropdownList
-          requestClose={requestClose}
-          width={width}
-          refCallback={refCallback}
-          getSelectedOptionText={getSelectedOptionText}
-        >
-          {children}
-        </DropdownList>
-      </FocusTrap>
-    </Hookshot.Content>
-  </Hookshot>
-);
+  requestClose, isOpen, targetRef, children, width, refCallback, buttonRef, getSelectedOptionText,
+}) => {
+  const buttonFocused = useRef(false);
+  useEffect(() => {
+    // added this change to bring focus back to button when dropdown list is closed.
+    if (buttonFocused.current && buttonRef) {
+      buttonFocused.current = false;
+      buttonRef().focus();
+    }
+  }, [isOpen, buttonRef]);
+
+  const handleClose = () => {
+    buttonFocused.current = true;
+    requestClose();
+  };
 
+  return (
+    <Hookshot
+      isOpen={isOpen}
+      isEnabled
+      targetRef={targetRef}
+      attachmentBehavior="flip"
+      contentAttachment={{ vertical: 'top', horizontal: 'start' }}
+      targetAttachment={{ vertical: 'bottom', horizontal: 'start' }}
+    >
+      <Hookshot.Content
+        onEsc={requestClose}
+        onOutsideClick={handleClose}
+      >
+        <FocusTrap focusTrapOptions={{ returnFocusOnDeactivate: true, clickOutsideDeactivates: true }}>
+          <DropdownList
+            requestClose={requestClose}
+            width={width}
+            refCallback={refCallback}
+            getSelectedOptionText={getSelectedOptionText}
+          >
+            {children}
+          </DropdownList>
+        </FocusTrap>
+      </Hookshot.Content>
+    </Hookshot>
+  );
+};
 Dropdown.propTypes = propTypes;
 
 export default Dropdown;

packages/terra-dropdown-button/src/_DropdownButtonBase.jsx

@@ -38,17 +38,13 @@ const propTypes = {
    */
   isDisabled: PropTypes.bool,
   /**
-   * Whether or not dropdown is opened using keyboard.
+   * Ref callback for the dropdown list DOM element.
    */
-  openedViaKeyboard: PropTypes.bool,
+  refCallback: PropTypes.func,
   /**
    * Callback for reference of the dropdown button
    */
   buttonRef: PropTypes.func,
-  /**
-   * Ref callback for the dropdown list DOM element.
-   */
-  refCallback: PropTypes.func,
   /**
    * Callback for the dropdown list selected option.
    */
@@ -59,7 +55,6 @@ const defaultProps = {
   isBlock: false,
   isCompact: false,
   isDisabled: false,
-  openedViaKeyboard: false,
 };
 
 class DropdownButtonBase extends React.Component {
@@ -89,9 +84,8 @@ class DropdownButtonBase extends React.Component {
       isBlock,
       isCompact,
       isDisabled,
-      openedViaKeyboard,
-      buttonRef,
       refCallback,
+      buttonRef,
       getSelectedOptionText,
       ...customProps
     } = this.props;
@@ -126,7 +120,6 @@ class DropdownButtonBase extends React.Component {
           isOpen={isOpen}
           requestClose={requestClose}
           width={calcWidth}
-          openedViaKeyboard={openedViaKeyboard}
           buttonRef={buttonRef}
           refCallback={refCallback}
           getSelectedOptionText={getSelectedOptionText}