[967093][Screen Readers- CosmosDB – Notification] Screen reader does not pass the combo-box list information (#329)

* ‘Bug fix: Screen reader does not pass the combo-box list information under notification field.’

* ‘update for comments’

* ‘load path refator’

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -99,7 +99,22 @@
         .notificationConsoleControls {
             padding: @MediumSpace;
             margin-left:@DefaultSpace;
+            display: flex;
+            align-items: center;
 
+            .ms-Dropdown-container {
+                display: flex;
+                .ms-Dropdown-title {
+                    height: 25px;
+                    line-height: 25px;
+                }
+                .ms-Dropdown {
+                    min-width: 110px;
+                    margin-left: 10px;
+                    height: 25px;
+                    line-height: 25px;
+                }
+            }
             #consoleFilterLabel {
                 padding: 4px;
             }
@@ -107,6 +122,7 @@
             .consoleSplitter {
                 border-left: 1px solid @BaseMedium;
                 margin: @MediumSpace;
+                height: 20px;
             }
 
             .clearNotificationsButton {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -5,7 +5,7 @@
 import * as React from "react";
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
 import AnimateHeight from "react-animate-height";
-
+import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
 import LoadingIcon from "../../../../images/loading.svg";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
@@ -53,7 +53,12 @@ export class NotificationConsoleComponent extends React.Component<
   NotificationConsoleComponentState
 > {
   private static readonly transitionDurationMs = 200;
-  private static readonly FilterOptions = ["All", "In Progress", "Info", "Error"];
+  private static readonly FilterOptions = [
+    { key: "All", text: "All" },
+    { key: "In Progress", text: "In progress" },
+    { key: "Info", text: "Info" },
+    { key: "Error", text: "Error" }
+  ];
   private headerTimeoutId: number;
   private prevHeaderStatus: string;
   private consoleHeaderElement: HTMLElement;
@@ -62,7 +67,7 @@ export class NotificationConsoleComponent extends React.Component<
     super(props);
     this.state = {
       headerStatus: "",
-      selectedFilter: NotificationConsoleComponent.FilterOptions[0],
+      selectedFilter: NotificationConsoleComponent.FilterOptions[0].key || "",
       isExpanded: props.isConsoleExpanded
     };
     this.prevHeaderStatus = null;
@@ -150,20 +155,15 @@ export class NotificationConsoleComponent extends React.Component<
         >
           <div className="notificationConsoleContents">
             <div className="notificationConsoleControls">
-              <label id="consoleFilterLabel">Filter</label>
+              <Dropdown
-              <select
+                label="Filter:"
-                aria-labelledby="consoleFilterLabel"
                 role="combobox"
-                aria-label={this.state.selectedFilter}
+                selectedKey={this.state.selectedFilter}
-                value={this.state.selectedFilter}
+                options={NotificationConsoleComponent.FilterOptions}
                 onChange={this.onFilterSelected.bind(this)}
-              >
+                aria-labelledby="consoleFilterLabel"
-                {NotificationConsoleComponent.FilterOptions.map((value: string) => (
+                aria-label={this.state.selectedFilter}
-                  <option value={value} key={value}>
+              />
-                    {value}
-                  </option>
-                ))}
-              </select>
               <span className="consoleSplitter" />
               <span
                 className="clearNotificationsButton"
@@ -220,8 +220,8 @@ export class NotificationConsoleComponent extends React.Component<
     ));
   }
 
-  private onFilterSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
+  private onFilterSelected(event: React.ChangeEvent<HTMLSelectElement>, option: IDropdownOption): void {
-    this.setState({ selectedFilter: event.target.value });
+    this.setState({ selectedFilter: String(option.key) });
   }
 
   private getFilteredConsoleData(): ConsoleData[] {

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -110,43 +110,34 @@ exports[`NotificationConsoleComponent renders the console (expanded) 1`] = `
       <div
         className="notificationConsoleControls"
       >
-        <label
+        <StyledWithResponsiveMode
-          id="consoleFilterLabel"
-        >
-          Filter
-        </label>
-        <select
           aria-label="All"
           aria-labelledby="consoleFilterLabel"
+          label="Filter:"
           onChange={[Function]}
+          options={
+            Array [
+              Object {
+                "key": "All",
+                "text": "All",
+              },
+              Object {
+                "key": "In Progress",
+                "text": "In progress",
+              },
+              Object {
+                "key": "Info",
+                "text": "Info",
+              },
+              Object {
+                "key": "Error",
+                "text": "Error",
+              },
+            ]
+          }
           role="combobox"
-          value="All"
+          selectedKey="All"
-        >
+        />
-          <option
-            key="All"
-            value="All"
-          >
-            All
-          </option>
-          <option
-            key="In Progress"
-            value="In Progress"
-          >
-            In Progress
-          </option>
-          <option
-            key="Info"
-            value="Info"
-          >
-            Info
-          </option>
-          <option
-            key="Error"
-            value="Error"
-          >
-            Error
-          </option>
-        </select>
         <span
           className="consoleSplitter"
         />