fix(Dropdown): improve accessibility for the dropdown component

src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot

@@ -257,6 +257,7 @@ Array [
           >
             <label
               className="wxc wxc-label wxc wxc-dropdown"
+              id="wxc-0"
             >
               <div
                 className="wxc-label__control"
@@ -267,11 +268,13 @@ Array [
                   onKeyDown={[Function]}
                 >
                   <div
-                    aria-label="undefined"
+                    aria-controls="wxc-0"
+                    aria-haspopup="listbox"
+                    aria-labelledby="wxc-0"
                     className="wxc-dropdown__selected-option "
                     onClick={[Function]}
                     onKeyDown={[Function]}
-                    role="button"
+                    role="combobox"
                     tabIndex={0}
                   >
                     <span

src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot

@@ -188,6 +188,7 @@ Array [
   >
     <label
       className="wxc wxc-label wxc wxc-dropdown wxc-meeting-control__control-select wxc-dropdown--disabled"
+      id="wxc-0"
     >
       <div
         className="wxc-label__control"
@@ -198,11 +199,14 @@ Array [
           onKeyDown={[Function]}
         >
           <div
-            aria-label="No available cameras. Use arrow keys to navigate between camera options and hit \\"Enter\\" to select."
+            aria-controls="wxc-0"
+            aria-haspopup="listbox"
+            aria-label="Use arrow keys to navigate between camera options and hit \\"Enter\\" to select."
+            aria-labelledby="wxc-0"
             className="wxc-dropdown__selected-option "
             onClick={[Function]}
             onKeyDown={[Function]}
-            role="button"
+            role="combobox"
             tabIndex={-1}
             title="Video Devices"
           >

src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot

@@ -65,6 +65,7 @@ Array [
           >
             <label
               className="wxc wxc-label wxc wxc-dropdown wxc-meeting-control__control-select"
+              id="wxc-0"
             >
               <div
                 className="wxc-label__control"
@@ -75,11 +76,14 @@ Array [
                   onKeyDown={[Function]}
                 >
                   <div
-                    aria-label="Browser Default. Use arrow keys to navigate between speaker options and hit \\"Enter\\" to select."
+                    aria-controls="wxc-0"
+                    aria-haspopup="listbox"
+                    aria-label="Use arrow keys to navigate between speaker options and hit \\"Enter\\" to select."
+                    aria-labelledby="wxc-0"
                     className="wxc-dropdown__selected-option "
                     onClick={[Function]}
                     onKeyDown={[Function]}
-                    role="button"
+                    role="combobox"
                     tabIndex={102}
                     title="The current browser does not support changing speakers"
                   >
@@ -116,6 +120,7 @@ Array [
           >
             <label
               className="wxc wxc-label wxc wxc-dropdown wxc-meeting-control__control-select wxc-dropdown--disabled"
+              id="wxc-0"
             >
               <div
                 className="wxc-label__control"
@@ -126,11 +131,14 @@ Array [
                   onKeyDown={[Function]}
                 >
                   <div
-                    aria-label="No available microphones. Use arrow keys to navigate between microphone options and hit \\"Enter\\" to select."
+                    aria-controls="wxc-0"
+                    aria-haspopup="listbox"
+                    aria-label="Use arrow keys to navigate between microphone options and hit \\"Enter\\" to select."
+                    aria-labelledby="wxc-0"
                     className="wxc-dropdown__selected-option "
                     onClick={[Function]}
                     onKeyDown={[Function]}
-                    role="button"
+                    role="combobox"
                     tabIndex={-1}
                     title="Microphone Devices"
                   >

src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot

@@ -28,6 +28,7 @@ Array [
       >
         <label
           className="wxc wxc-label wxc wxc-dropdown"
+          id="wxc-0"
         >
           <div
             className="wxc-label__control"
@@ -38,11 +39,13 @@ Array [
               onKeyDown={[Function]}
             >
               <div
-                aria-label="undefined"
+                aria-controls="wxc-0"
+                aria-haspopup="listbox"
+                aria-labelledby="wxc-0"
                 className="wxc-dropdown__selected-option "
                 onClick={[Function]}
                 onKeyDown={[Function]}
-                role="button"
+                role="combobox"
                 tabIndex={0}
               >
                 <span
@@ -95,6 +98,7 @@ Array [
       >
         <label
           className="wxc wxc-label wxc wxc-dropdown"
+          id="wxc-0"
         >
           <div
             className="wxc-label__control"
@@ -105,11 +109,13 @@ Array [
               onKeyDown={[Function]}
             >
               <div
-                aria-label="Option 1. undefined"
+                aria-controls="wxc-0"
+                aria-haspopup="listbox"
+                aria-labelledby="wxc-0"
                 className="wxc-dropdown__selected-option "
                 onClick={[Function]}
                 onKeyDown={[Function]}
-                role="button"
+                role="combobox"
                 tabIndex={0}
               >
                 <span

src/components/generic/OptionsList/Option.jsx

@@ -51,7 +51,6 @@ export default function Option({
 
   return (
     <li
-      aria-label={typeof option.label !== 'object' ? option.label : option.value}
       aria-selected={selected === option.value}
       className={cssClasses}
       key={option.value}

src/components/generic/OptionsList/OptionsList.jsx

@@ -9,6 +9,8 @@ import Option from './Option';
  *
  * @param {object} props  Data passed to the component
  * @param {string} props.className  Custom CSS class to apply
+ * @param {string} [props.id]  Options list id
+ * @param {string} [props.labelId]  Label id
  * @param {Function} props.onBlur  Called when this component loses focus
  * @param {Function} props.onSelect  A function which will be triggered on option selection
  * @param {object[]} props.options  Array of options
@@ -20,6 +22,8 @@ import Option from './Option';
  */
 export default function OptionsList({
   className,
+  id,
+  labelId,
   onBlur,
   onSelect,
   options,
@@ -38,7 +42,14 @@ export default function OptionsList({
 
   return (
     <div style={style} className={cssClasses}>
-      <ul role="menu" className={sc('list')} tabIndex={tabIndex} onKeyDown={onKeyDown}>
+      <ul
+        aria-labelledby={labelId}
+        className={sc('list')}
+        id={id}
+        onKeyDown={onKeyDown}
+        role="listbox"
+        tabIndex={tabIndex}
+      >
         {options.map((option, index) => (
           <Option
             key={option.value}
@@ -56,6 +67,8 @@ export default function OptionsList({
 
 OptionsList.propTypes = {
   className: PropTypes.string,
+  id: PropTypes.string,
+  labelId: PropTypes.string,
   onBlur: PropTypes.func,
   onSelect: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(PropTypes.shape({
@@ -71,6 +84,8 @@ OptionsList.propTypes = {
 
 OptionsList.defaultProps = {
   className: '',
+  id: undefined,
+  labelId: undefined,
   onBlur: undefined,
   options: [],
   selected: '',

src/components/inputs/Dropdown/Dropdown.jsx

@@ -6,6 +6,7 @@ import {useElementPosition, useRef} from '../../hooks';
 import Icon from '../../generic/Icon/Icon';
 import OptionsList from '../../generic/OptionsList/OptionsList';
 import Label from '../Label/Label';
+import {uniqueId} from '../../../util';
 
 /**
  * Dropdown Component
@@ -48,6 +49,8 @@ export default function Dropdown({
   const controlRef = useRef();
   const selectedOptionRef = useRef();
   const position = useElementPosition(controlRef);
+  const labelId = uniqueId();
+  const optionsId = uniqueId();
 
   const collapse = () => setExpanded(undefined);
   const expand = (withKey) => setExpanded({withKey});
@@ -126,20 +129,25 @@ export default function Dropdown({
       className={cssClasses}
       style={style}
       error={error}
+      labelId={labelId}
       label={controlLabel}
       required={required}
     >
       {/* This element handles delegated keyboard events from its descendants (Esc key) */}
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div className={sc('control')} ref={controlRef} disabled={disabled} onKeyDown={handleKeyDown}>
         <div
+          aria-controls={optionsId}
+          aria-expanded={expanded}
+          aria-haspopup="listbox"
+          aria-label={ariaLabel}
+          aria-labelledby={labelId}
           className={`${sc('selected-option')} ${expanded ? sc('expanded') : ''}`}
           onClick={() => toggleExpanded(false)}
-          role="button"
+          role="combobox"
           tabIndex={disabled ? -1 : tabIndex}
           title={tooltip}
           onKeyDown={handleSelectedOptionKeyDown}
-          aria-label={`${label ? `${label}. ` : ''}${ariaLabel}`}
           ref={selectedOptionRef}
         >
           <span className={sc('label')}>{options === null ? 'Loading...' : (label || value || placeholder)}</span>
@@ -155,6 +163,8 @@ export default function Dropdown({
             style={layout}
             tabIndex={tabIndex}
             onBlur={collapse}
+            id={optionsId}
+            labelId={labelId}
           />
         )}
       </div>

src/components/inputs/Label/Label.jsx

@@ -11,6 +11,7 @@ import Icon from '../../generic/Icon/Icon';
  * @param {object} [props.style]  Custom style to apply
  * @param {React.ReactNode[]}  props.children  List of children
  * @param {string} [props.label]  Label text
+ * @param {string} [props.labelId]  Label id
  * @param {string} [props.error]  Error text
  * @param {boolean} [props.required=false]  Flag indicating whether the control is required
  * @returns {object} JSX of the component
@@ -20,6 +21,7 @@ export default function Label({
   style,
   children,
   label,
+  labelId,
   error,
   required,
 }) {
@@ -28,7 +30,7 @@ export default function Label({
   return (
     // disabling label-has-associated-control as eslint does not see role attribute as a nested control
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label className={cssClasses} style={style}>
+    <label className={cssClasses} style={style} id={labelId}>
       {
         label && (
           <div className={sc('label-text')}>
@@ -56,6 +58,7 @@ Label.propTypes = {
   style: PropTypes.shape(),
   children: PropTypes.node.isRequired,
   label: PropTypes.string,
+  labelId: PropTypes.string,
   error: PropTypes.string,
   required: PropTypes.bool,
 };
@@ -64,6 +67,7 @@ Label.defaultProps = {
   className: undefined,
   style: undefined,
   label: undefined,
+  labelId: undefined,
   error: undefined,
   required: false,
 };

src/storyshots.test.js

@@ -17,6 +17,11 @@ jest.mock('react-dom', () => {
   };
 });
 
+jest.mock('./util', () => ({
+  ...jest.requireActual('./util'),
+  uniqueId: () => 'wxc-0',
+}));
+
 /**
  * Returns a mock DOM ref object for use of snapshot tests.
  *

src/util.js

@@ -130,6 +130,19 @@ export function mapValues(object, mapper) {
   )));
 }
 
+let lastId = 0;
+
+/**
+ * Generates a unique id to be used in DOM by the components
+ *
+ * @returns {string} Returns an unique id
+ */
+export function uniqueId() {
+  lastId += 1;
+
+  return `wxc-${lastId}`;
+}
+
 export default {
   deepMerge,
   chainWith,
@@ -138,4 +151,5 @@ export default {
   range,
   pad2Zeros,
   mapValues,
+  uniqueId,
 };