fix query pill accessbility (#153)

src/app/css/_deviceListQuery.scss

@@ -76,14 +76,13 @@
             }
             .parameter-type {
                 float: left;
-                max-width: 170px;
+                width: 170px;
                 line-height: 20px;
                 font-size: 10px;
-
             }
             .operation-type {
                 float: left;
-                max-width: 60px;
+                width: 60px;
                 line-height: 20px;
                 font-size: 12px;
             }
@@ -91,10 +90,11 @@
                 float: left;
                 max-width: 150px;
                 line-height: 20px;
-                font-size: 10px;
+                font-size: 12px;
             }
             .remove-pill {
-                width: 8px;
+                margin-left: 10px;
+                width: 35px;
                 height: 26px;
                 float: right;
             }
@@ -110,23 +110,19 @@
             }
         }
         .search-pill.active {
-            @include themify($themes) {
-                border-color: themed('searchBorderActiveColor');
-            }
             padding-left: 10px;
-            padding-top: 3px;
-            padding-bottom: 1px;
-            padding-right: 6px;
-            min-width: 400px;
+            padding-top: 5px;
+            padding-bottom: 2px;
+            min-width: 380px;
             max-height: 27px;
             .ms-Button-icon {
-                font-size: 10px;
+                font-size: 15px;
             }
-            .ms-ComboBox-container {
+            .ms-Dropdown-container {
                 height: 24px;
-                .ms-ComboBox {
+                .ms-Dropdown {
                     height: 24px;
-                    .ms-ComboBox-input{
+                    .ms-Dropdown-input{
                         height: 20px;
                     }
                 }

src/app/css/_themes.scss

@@ -19,7 +19,7 @@
     searchButtonColor: #ffffff,
     searchButtonBackground: $blue,
     searchButtonDisabled: $gray,
-    searchBorderActiveColor: $blue,
+    searchBorderColor:  #161616,
     searchBorderHoverColor: $blue,
     searchBorderErrorColor: $errorBorder,
     errorText: $errorText,
@@ -69,7 +69,7 @@
     searchButtonColor: #cccccc,
     searchButtonBackground: $blue,
     searchButtonDisabledBackground: $gray,
-    searchBorderActiveColor: $blue,
+    searchBorderColor:  $light-gray,
     searchBorderHoverColor: $blue,
     searchBorderErrorColor: $errorBorder,
     errorText: #F9808A,

src/app/devices/deviceList/components/__snapshots__/deviceQueryClause.spec.tsx.snap

@@ -5,16 +5,14 @@ exports[`components/devices/DeviceQueryClause matches snapshot 1`] = `
   className="search-pill active"
   key="query-0"
 >
-  <CustomizedComboBox
-    allowFreeform={false}
+  <StyledWithResponsiveMode
     ariaLabel="deviceLists.query.searchPills.clause.parameterType.ariaLabel"
-    autoComplete="on"
-    buttonIconProps={
+    className="parameter-type"
+    componentRef={
       Object {
-        "iconName": "ChevronDown",
+        "current": null,
       }
     }
-    className="parameter-type"
     onChange={[Function]}
     options={
       Array [
@@ -32,18 +30,10 @@ exports[`components/devices/DeviceQueryClause matches snapshot 1`] = `
         },
       ]
     }
-    text="deviceLists.query.searchPills.clause.parameterType.items.status"
     title="deviceLists.query.searchPills.clause.parameterType.title"
   />
-  <CustomizedComboBox
-    allowFreeform={false}
+  <StyledWithResponsiveMode
     ariaLabel="deviceLists.query.searchPills.clause.operationType.ariaLabel"
-    autoComplete="on"
-    buttonIconProps={
-      Object {
-        "iconName": "ChevronDown",
-      }
-    }
     className="operation-type"
     defaultSelectedKey="="
     onChange={[Function]}
@@ -91,16 +81,14 @@ exports[`components/devices/DeviceQueryClause matches snapshot without operation
   className="search-pill active no-operator"
   key="query-0"
 >
-  <CustomizedComboBox
-    allowFreeform={false}
+  <StyledWithResponsiveMode
     ariaLabel="deviceLists.query.searchPills.clause.parameterType.ariaLabel"
-    autoComplete="on"
-    buttonIconProps={
+    className="parameter-type"
+    componentRef={
       Object {
-        "iconName": "ChevronDown",
+        "current": null,
       }
     }
-    className="parameter-type"
     onChange={[Function]}
     options={
       Array [
@@ -118,7 +106,6 @@ exports[`components/devices/DeviceQueryClause matches snapshot without operation
         },
       ]
     }
-    text="deviceLists.query.searchPills.clause.parameterType.items.capabilityModelId"
     title="deviceLists.query.searchPills.clause.parameterType.title"
   />
   <StyledTextFieldBase

src/app/devices/deviceList/components/deviceQueryClause.tsx

@@ -3,13 +3,13 @@
  * Licensed under the MIT License
  **********************************************************/
 import * as React from 'react';
-import { ComboBox } from 'office-ui-fabric-react/lib/ComboBox';
+import { Dropdown, IDropdown } from 'office-ui-fabric-react/lib/Dropdown';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import '../../../css/_deviceListQuery.scss';
 import { QueryClause, ParameterType, OperationType } from '../../../api/models/deviceQuery';
 import { ResourceKeys } from '../../../../localization/resourceKeys';
 import { LocalizationContextConsumer, LocalizationContextInterface } from '../../../shared/contexts/localizationContext';
+import '../../../css/_deviceListQuery.scss';
 
 export interface DeviceQueryClauseProps extends QueryClause {
     index: number;
@@ -20,15 +20,15 @@ export interface DeviceQueryClauseActions {
 }
 
 export default class DeviceQueryClause extends React.PureComponent<DeviceQueryClauseProps & DeviceQueryClauseActions> {
-    constructor(props: DeviceQueryClauseProps & DeviceQueryClauseActions) {
-        super(props);
-    }
+    private readonly parameterTypeRef = React.createRef<IDropdown>();
+
     private readonly isError = (props: QueryClause) => {
         return (
             (!props.operation && this.shouldShowOperator(props.parameterType)) ||
             !props.parameterType ||
             (!props.value || '' === props.value));
     }
+
     private readonly remove = () => {
         this.props.removeClause(this.props.index);
     }
@@ -65,7 +65,7 @@ export default class DeviceQueryClause extends React.PureComponent<DeviceQueryCl
     }
 
     private readonly shouldShowOperator = (parameterType: ParameterType) => {
-        return ParameterType.capabilityModelId !== parameterType && ParameterType.interfaceId !== parameterType;
+        return parameterType && ParameterType.capabilityModelId !== parameterType && ParameterType.interfaceId !== parameterType;
     }
 
     // tslint:disable-next-line:cyclomatic-complexity
@@ -147,6 +147,14 @@ export default class DeviceQueryClause extends React.PureComponent<DeviceQueryCl
         }
     }
 
+    public componentDidMount() {
+        // set focus to parameter type dropdown
+        const node = this.parameterTypeRef.current;
+        if (!!node) {
+            node.focus();
+        }
+    }
+
     public render(): JSX.Element {
         const isError = this.isError(this.props);
         return (
@@ -156,18 +164,20 @@ export default class DeviceQueryClause extends React.PureComponent<DeviceQueryCl
                         key={`query-${this.props.index}`}
                         className={`search-pill active${isError ? ' error' : ''}${this.shouldShowOperator(this.props.parameterType) ? '' : ' no-operator'}`}
                     >
-                        <ComboBox
+                        <Dropdown
                             className="parameter-type"
-                            autoComplete="on"
-                            // tslint:disable-next-line: no-any
-                            options={Object.keys(ParameterType).map(parameterType => ({ key: (ParameterType as any)[parameterType], text: this.getParameterTypeString((ParameterType as any)[parameterType], context.t) }))}
+                            options={Object.keys(ParameterType).map(
+                                parameterType => ({
+                                    key: (ParameterType as any)[parameterType], // tslint:disable-line: no-any
+                                    text: this.getParameterTypeString((ParameterType as any)[parameterType], context.t)// tslint:disable-line: no-any
+                                }))}
                             onChange={this.onTypeChange}
-                            text={this.getParameterTypeString(this.props.parameterType, context.t)}
                             title={context.t(ResourceKeys.deviceLists.query.searchPills.clause.parameterType.title)}
                             ariaLabel={context.t(ResourceKeys.deviceLists.query.searchPills.clause.parameterType.ariaLabel)}
+                            componentRef={this.parameterTypeRef}
                         />
                         {
-                            this.shouldShowOperator(this.props.parameterType) && <ComboBox
+                            this.shouldShowOperator(this.props.parameterType) && <Dropdown
                                 className="operation-type"
                                 // tslint:disable-next-line: no-any
                                 options={Object.keys(OperationType).map(operationType => ({ key: (OperationType as any)[operationType], text: (OperationType as any)[operationType] }))}