[Fix] Dropdown screen reader problems

src/core/Dropdown/Dropdown/Dropdown.tsx

@@ -75,6 +75,7 @@ const { Provider: DropdownProvider, Consumer: DropdownConsumer } =
 interface DropdownState {
   selectedValue: string | undefined | null;
   selectedValueText: string | undefined | null;
+  ariaExpanded: boolean;
   showPopover: boolean;
   focusedDescendantId: string | null | undefined;
 }
@@ -166,6 +167,7 @@ class BaseDropdown extends Component<DropdownProps> {
         : undefined,
       this.props.children,
     ),
+    ariaExpanded: false,
     showPopover: false,
     focusedDescendantId:
       'value' in this.props && !!this.props.value
@@ -241,9 +243,14 @@ class BaseDropdown extends Component<DropdownProps> {
         this.props.children,
       ),
       focusedDescendantId: itemValue,
+      ariaExpanded: false,
     });
-    this.buttonRef.current?.focus();
-    this.setState({ showPopover: false });
+    setTimeout(() => {
+      // NVDA with Firefox requires small timeout before focus to read updated value
+      this.buttonRef.current?.focus();
+      // Set showPopover separately to prevent NVDA focus from going to body
+      this.setState({ showPopover: false });
+    }, 10);
   }
 
   private handleSpaceAndEnter = (
@@ -270,7 +277,7 @@ class BaseDropdown extends Component<DropdownProps> {
   };
 
   private handleKeyDown = (event: React.KeyboardEvent) => {
-    const { focusedDescendantId, showPopover } = this.state;
+    const { focusedDescendantId, ariaExpanded, showPopover } = this.state;
     const popoverItems = Array.isArray(this.props.children)
       ? this.props.children
       : this.props.children !== undefined
@@ -322,7 +329,10 @@ class BaseDropdown extends Component<DropdownProps> {
 
       case ' ': {
         event.preventDefault();
-        this.setState({ showPopover: !showPopover });
+        this.setState({
+          showPopover: !showPopover,
+          ariaExpanded: !ariaExpanded,
+        });
         this.handleSpaceAndEnter(popoverItems, getNextItem);
         break;
       }
@@ -370,7 +380,10 @@ class BaseDropdown extends Component<DropdownProps> {
       );
       const focusInDropdown = focusInPopover || focusInToggleButton;
       if (!focusInDropdown) {
-        this.setState({ showPopover: focusInDropdown });
+        this.setState({
+          showPopover: focusInDropdown,
+          ariaExpanded: focusInDropdown,
+        });
       }
     });
   };
@@ -394,12 +407,13 @@ class BaseDropdown extends Component<DropdownProps> {
   }
 
   private focusToButtonAndClosePopover() {
+    this.setState({ ariaExpanded: false });
     this.buttonRef.current?.focus();
     this.setState({ showPopover: false });
   }
 
   private openPopover() {
-    this.setState({ showPopover: true });
+    this.setState({ showPopover: true, ariaExpanded: true });
     /**
      * Timeout is used here to ensure the popover
      * exists when setting focus
@@ -441,19 +455,15 @@ class BaseDropdown extends Component<DropdownProps> {
       return null;
     }
 
-    const {
-      selectedValue,
-      selectedValueText,
-      showPopover,
-      focusedDescendantId,
-    } = this.state;
+    const { selectedValue, ariaExpanded, showPopover, focusedDescendantId } =
+      this.state;
 
     const labelId = `${id}-label`;
     const buttonId = `${id}_button`;
     const popoverItemListId = `${id}-popover`;
     const hintTextId = hintText ? `${id}-hintText` : undefined;
     const statusTextId = statusText ? `${id}-statusText` : undefined;
-    const displayValueId = selectedValueText ? `${id}-displayValue` : undefined;
+    const displayValueId = `${id}-displayValue`;
 
     const ariaActiveDescendant = focusedDescendantId
       ? `${id}-${focusedDescendantId}`
@@ -512,7 +522,7 @@ class BaseDropdown extends Component<DropdownProps> {
               hintTextId,
             ])}
             aria-owns={popoverItemListId}
-            aria-expanded={showPopover}
+            aria-expanded={ariaExpanded}
             onClick={() => {
               if (!showPopover) {
                 this.openPopover();
@@ -534,6 +544,7 @@ class BaseDropdown extends Component<DropdownProps> {
               value={selectedValue || ''}
             />
           </HtmlButton>
+          {/* NVDA, Chrome does not read displayValue, if within HtmlButton */}
           <VisuallyHidden id={displayValueId}>
             {dropdownDisplayValue}
           </VisuallyHidden>
@@ -555,6 +566,7 @@ class BaseDropdown extends Component<DropdownProps> {
                 if (!this.isOutsideClick(event)) {
                   this.setState({
                     showPopover: false,
+                    ariaExpanded: false,
                   });
                 }
               }}

src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -608,7 +608,7 @@ exports[`Basic dropdown should match snapshot 1`] = `
         <button
           aria-expanded="true"
           aria-haspopup="listbox"
-          aria-labelledby="test-id-label"
+          aria-labelledby="test-id-displayValue test-id-label"
           aria-owns="test-id-popover"
           class="c5 fi-dropdown_button"
           id="test-id_button"
@@ -630,6 +630,7 @@ exports[`Basic dropdown should match snapshot 1`] = `
         </button>
         <span
           class="c4 c7 fi-visually-hidden"
+          id="test-id-displayValue"
         >
           Dropdown
         </span>
@@ -666,7 +667,7 @@ exports[`Basic dropdown should match snapshot 1`] = `
             class="c11 c12 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus"
             id="test-id-item-1"
             role="option"
-            tabindex="-1"
+            tabindex="0"
           >
             Item 1
           </li>
@@ -1389,7 +1390,7 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
             class="c11 c12 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus fi-dropdown_item--selected"
             id="test-id-item-2"
             role="option"
-            tabindex="-1"
+            tabindex="0"
           >
             Item 2
             <svg
@@ -2024,7 +2025,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
         <button
           aria-expanded="true"
           aria-haspopup="listbox"
-          aria-labelledby="additional-label-id test-id-label"
+          aria-labelledby="test-id-displayValue additional-label-id test-id-label"
           aria-owns="test-id-popover"
           class="c5 fi-dropdown_button"
           id="test-id_button"
@@ -2046,6 +2047,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
         </button>
         <span
           class="c4 c7 fi-visually-hidden"
+          id="test-id-displayValue"
         >
           Dropdown
         </span>
@@ -2082,7 +2084,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
             class="c11 c12 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus"
             id="test-id-item-1"
             role="option"
-            tabindex="-1"
+            tabindex="0"
           >
             Item 1
           </li>
@@ -2550,7 +2552,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-labelledby="test-id-label"
+          aria-labelledby="test-id-displayValue test-id-label"
           aria-owns="test-id-popover"
           class="c5 fi-dropdown_button"
           id="test-id_button"
@@ -2572,6 +2574,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = `
         </button>
         <span
           class="c6 c4 fi-visually-hidden"
+          id="test-id-displayValue"
         >
           Dropdown
         </span>

src/core/Dropdown/DropdownItem/DropdownItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useLayoutEffect, useRef } from 'react';
 import { default as styled } from 'styled-components';
 import { baseStyles } from './DropdownItem.basestyles';
 import {
@@ -10,6 +10,7 @@ import classnames from 'classnames';
 import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme';
 import { HtmlLi } from '../../../reset';
 import { Icon } from '../../Icon/Icon';
+import { getOwnerDocument } from '../../../utils/common';
 
 export interface DropdownItemProps {
   /** Item value */
@@ -51,6 +52,15 @@ const BaseDropdownItem = (props: BaseDropdownItemProps & SuomifiThemeProp) => {
 
   const listElementId = `${consumer.id}-${value}`;
 
+  const listElementRef = useRef<HTMLLIElement>(null);
+
+  useLayoutEffect(() => {
+    const ownerDocument = getOwnerDocument(listElementRef);
+    if (ownerDocument.activeElement?.id !== listElementId && hasKeyboardFocus) {
+      listElementRef.current?.focus({ preventScroll: true });
+    }
+  }, [consumer.focusedItemValue]);
+
   const handleClick = () => {
     if (!disabled) {
       consumer.onItemClick(value);
@@ -65,12 +75,19 @@ const BaseDropdownItem = (props: BaseDropdownItemProps & SuomifiThemeProp) => {
         [dropdownItemClassNames.disabled]: disabled,
         [dropdownItemClassNames.noSelectedStyles]: consumer.noSelectedStyles,
       })}
-      tabIndex={-1}
+      tabIndex={hasKeyboardFocus ? 0 : -1}
       role="option"
       aria-disabled={disabled}
       aria-selected={selected}
       id={listElementId}
       onClick={handleClick}
+      forwardedRef={listElementRef}
+      onKeyDown={(event: React.KeyboardEvent) => {
+        if (event.key === 'Tab') {
+          event.preventDefault();
+          consumer.onItemTabPress();
+        }
+      }}
       {...passProps}
     >
       {children}