fix: adjust select Aria (#2457)

* adjust select aria, no longer auto-select an item on focus when none selected.

* fix tests and update base trigger render function

* add labelledby test on trigger

packages/fast-components-react-base/src/select/select.spec.tsx

@@ -76,21 +76,6 @@ describe("select", (): void => {
         expect(rendered.state("selectedItems").length).toBe(0);
     });
 
-    test("default select aria tags are set correctly", (): void => {
-        const rendered: any = shallow(
-            <Select labelledBy="test-labelledBy">
-                {itemA}
-                {itemB}
-                {itemC}
-            </Select>
-        );
-        expect(rendered.first().prop("role")).toEqual("listbox");
-        expect(rendered.first().prop("aria-labelledby")).toEqual("test-labelledBy");
-        expect(rendered.first().prop("aria-describedby")).toContain("selecttrigger-");
-        expect(rendered.first().prop("aria-expanded")).toEqual(false);
-        expect(rendered.first().prop("aria-disabled")).toEqual(false);
-    });
-
     test("root element has a tabindex of -1", (): void => {
         const rendered: any = shallow(
             <Select>
@@ -104,22 +89,23 @@ describe("select", (): void => {
 
     test("default trigger aria tags are set correctly", (): void => {
         const rendered: any = mount(
-            <Select selectedItems={["a"]}>
+            <Select selectedItems={["a"]} labelledBy="testLabellledBy">
                 {itemA}
                 {itemB}
                 {itemC}
             </Select>
         );
 
+        const triggerId: string = rendered.instance().triggerId;
+
         const trigger: any = rendered.find("button");
-        expect(trigger.prop("role")).toEqual("option");
         expect(trigger.prop("aria-expanded")).toEqual(false);
-        expect(trigger.prop("aria-atomic")).toEqual(true);
-        expect(trigger.prop("aria-label")).toEqual("a");
-        expect(trigger.prop("aria-expanded")).toEqual(false);
-        expect(trigger.prop("aria-selected")).toEqual(true);
-        expect(trigger.prop("aria-posinset")).toEqual(1);
-        expect(trigger.prop("aria-setsize")).toEqual(3);
+        expect(trigger.prop("aria-haspopup")).toEqual("listbox");
+        expect(trigger.prop("aria-live")).toEqual("polite");
+        expect(trigger.prop("aria-labelledby").split(" ")).toEqual([
+            "testLabellledBy",
+            rendered.instance().triggerId,
+        ]);
     });
 
     test("menu should open and close on select click in single mode and aria-expanded is set properly", (): void => {

packages/fast-components-react-base/src/select/select.tsx

@@ -164,13 +164,7 @@ class Select extends Foundation<SelectHandledProps, SelectUnhandledProps, Select
                 className={this.generateClassNames()}
                 onKeyDown={this.handleKeydown}
                 onClick={this.handleClick}
-                onFocus={this.handleFocus}
                 tabIndex={-1}
-                role="listbox"
-                aria-disabled={this.props.disabled}
-                aria-expanded={this.state.isMenuOpen}
-                aria-labelledby={this.props.labelledBy || null}
-                aria-describedby={this.triggerId}
             >
                 {this.renderTrigger()}
                 {this.renderHiddenSelectElement()}
@@ -466,18 +460,15 @@ class Select extends Foundation<SelectHandledProps, SelectUnhandledProps, Select
         if (props.multiselectable) {
             return null;
         }
-        const isItemSelected: boolean = state.selectedItemIndex !== 0;
+        const labelledBy: string = `${this.props.labelledBy} ${triggerId}`;
         return (
             <button
                 disabled={props.disabled}
                 id={triggerId}
-                role="option"
-                aria-atomic={true}
-                aria-label={state.displayString}
+                aria-haspopup="listbox"
+                aria-labelledby={labelledBy}
                 aria-expanded={state.isMenuOpen}
-                aria-selected={isItemSelected}
-                aria-posinset={isItemSelected ? state.selectedItemIndex : null}
-                aria-setsize={isItemSelected ? state.selectableItemCount : null}
+                aria-live="polite"
             >
                 {state.displayString}
             </button>
@@ -553,18 +544,6 @@ class Select extends Foundation<SelectHandledProps, SelectUnhandledProps, Select
         }
     };
 
-    /**
-     * Handles focus
-     */
-    private handleFocus = (e: React.FocusEvent): void => {
-        if (this.props.disabled || e.defaultPrevented) {
-            return;
-        }
-        if (!this.props.multiselectable && this.state.selectedItems.length === 0) {
-            this.incrementSelectedOption(1);
-        }
-    };
-
     /**
      * Increment selection
      */

packages/fast-components-react-msft/src/select/select.spec.tsx

@@ -63,14 +63,9 @@ describe("button", (): void => {
         );
 
         const trigger: any = rendered.find("button");
-        expect(trigger.prop("role")).toEqual("option");
         expect(trigger.prop("aria-expanded")).toEqual(false);
-        expect(trigger.prop("aria-atomic")).toEqual(true);
-        expect(trigger.prop("aria-label")).toEqual("a");
-        expect(trigger.prop("aria-expanded")).toEqual(false);
-        expect(trigger.prop("aria-selected")).toEqual(true);
-        expect(trigger.prop("aria-posinset")).toEqual(1);
-        expect(trigger.prop("aria-setsize")).toEqual(3);
+        expect(trigger.prop("aria-haspopup")).toEqual("listbox");
+        expect(trigger.prop("aria-live")).toEqual("polite");
     });
 
     test("Custom menu render function is called", (): void => {

packages/fast-components-react-msft/src/select/select.tsx

@@ -63,20 +63,17 @@ class Select extends Foundation<SelectHandledProps, SelectUnhandledProps, {}> {
             select_buttonDisplayText,
         }: SelectClassNameContract = this.props.managedClasses;
 
-        const isItemSelected: boolean = state.selectedItemIndex !== 0;
+        const labelledBy: string = `${this.props.labelledBy} ${triggerId}`;
 
         return (
             <button
+                id={triggerId}
                 disabled={props.disabled}
                 className={classNames(select_button)}
-                id={triggerId}
-                role="option"
-                aria-atomic={true}
-                aria-label={state.displayString}
+                aria-haspopup="listbox"
+                aria-labelledby={labelledBy}
                 aria-expanded={state.isMenuOpen}
-                aria-selected={isItemSelected}
-                aria-posinset={isItemSelected ? state.selectedItemIndex : null}
-                aria-setsize={isItemSelected ? state.selectableItemCount : null}
+                aria-live="polite"
             >
                 <span className={classNames(select_buttonContentRegion)}>
                     <div className={classNames(select_buttonDisplayText)}>