fix(ComboBox): resolves DAP violations (carbon-design-system#4028)

metonym · Sep 18, 2019 · b0af775 · b0af775
1 parent 0efa21b
commit b0af775
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 23 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -13,6 +13,7 @@ import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
 
@@ -51,6 +52,8 @@ const findHighlightedIndex = ({ items, itemToString }, inputValue) => {
   return -1;
 };
 
+const getInstanceId = setupGetInstanceId();
+
 export default class ComboBox extends React.Component {
   static propTypes = {
     /**
@@ -175,6 +178,8 @@ export default class ComboBox extends React.Component {
 
     this.textInput = React.createRef();
 
+    this.comboBoxInstanceId = getInstanceId();
+
     this.state = {
       inputValue: getInputValue(props, {}),
     };
@@ -269,7 +274,7 @@ export default class ComboBox extends React.Component {
       <div className={helperClasses}>{helperText}</div>
     ) : null;
     const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
-
+    const comboBoxA11yId = `combobox-a11y-${this.comboBoxInstanceId}`;
     // needs to be Capitalized for react to render it correctly
     const ItemToElement = itemToElement;
     const input = (
@@ -296,6 +301,8 @@ export default class ComboBox extends React.Component {
             className={className}
             disabled={disabled}
             invalid={invalid}
+            id={comboBoxA11yId}
+            aria-label={ariaLabel}
             invalidText={invalidText}
             isOpen={isOpen}
             light={light}
@@ -310,9 +317,11 @@ export default class ComboBox extends React.Component {
               })}>
               <input
                 className={`${prefix}--text-input`}
-                aria-label={ariaLabel}
+                aria-labelledby={comboBoxA11yId}
+                tabIndex="0"
                 aria-disabled={disabled}
                 aria-controls={`${id}__menu`}
+                aria-owns={`${id}__menu`}
                 aria-autocomplete="list"
                 ref={this.textInput}
                 {...rest}

diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -47,9 +47,10 @@ const ListBoxSelection = ({
       tabIndex="0"
       onClick={handleOnClick}
       onKeyDown={handleOnKeyDown}
+      aria-label="Clear Selection"
       title={description}>
       {selectionCount}
-      <Close16 role="img" />
+      <Close16 />
     </div>
   );
 };

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
@@ -18,20 +18,18 @@ exports[`ListBoxField should render 1`] = `
       translateWithId={[Function]}
     >
       <div
+        aria-label="Clear Selection"
         className="bx--list-box__selection"
         onClick={[Function]}
         onKeyDown={[Function]}
         role="button"
         tabIndex="0"
         title="Clear selected item"
       >
-        <ForwardRef(Close16)
-          role="img"
-        >
+        <ForwardRef(Close16)>
           <Icon
             height={16}
             preserveAspectRatio="xMidYMid meet"
-            role="img"
             viewBox="0 0 16 16"
             width={16}
             xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +39,6 @@ exports[`ListBoxField should render 1`] = `
               focusable="false"
               height={16}
               preserveAspectRatio="xMidYMid meet"
-              role="img"
               style={
                 Object {
                   "willChange": "transform",
@@ -83,20 +80,18 @@ exports[`ListBoxField should set \`aria-owns\` based when expanded 1`] = `
       translateWithId={[Function]}
     >
       <div
+        aria-label="Clear Selection"
         className="bx--list-box__selection"
         onClick={[Function]}
         onKeyDown={[Function]}
         role="button"
         tabIndex="0"
         title="Clear selected item"
       >
-        <ForwardRef(Close16)
-          role="img"
-        >
+        <ForwardRef(Close16)>
           <Icon
             height={16}
             preserveAspectRatio="xMidYMid meet"
-            role="img"
             viewBox="0 0 16 16"
             width={16}
             xmlns="http://www.w3.org/2000/svg"
@@ -106,7 +101,6 @@ exports[`ListBoxField should set \`aria-owns\` based when expanded 1`] = `
               focusable="false"
               height={16}
               preserveAspectRatio="xMidYMid meet"
-              role="img"
               style={
                 Object {
                   "willChange": "transform",

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap
@@ -27,20 +27,18 @@ exports[`ListBoxSelection should render 1`] = `
   }
 >
   <div
+    aria-label="Clear Selection"
     className="bx--list-box__selection"
     onClick={[Function]}
     onKeyDown={[Function]}
     role="button"
     tabIndex="0"
     title="translation"
   >
-    <ForwardRef(Close16)
-      role="img"
-    >
+    <ForwardRef(Close16)>
       <Icon
         height={16}
         preserveAspectRatio="xMidYMid meet"
-        role="img"
         viewBox="0 0 16 16"
         width={16}
         xmlns="http://www.w3.org/2000/svg"
@@ -50,7 +48,6 @@ exports[`ListBoxSelection should render 1`] = `
           focusable="false"
           height={16}
           preserveAspectRatio="xMidYMid meet"
-          role="img"
           style={
             Object {
               "willChange": "transform",
@@ -98,6 +95,7 @@ exports[`ListBoxSelection should render 2`] = `
   }
 >
   <div
+    aria-label="Clear Selection"
     className="bx--list-box__selection bx--tag--filter bx--list-box__selection--multi"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -106,13 +104,10 @@ exports[`ListBoxSelection should render 2`] = `
     title="translation"
   >
     3
-    <ForwardRef(Close16)
-      role="img"
-    >
+    <ForwardRef(Close16)>
       <Icon
         height={16}
         preserveAspectRatio="xMidYMid meet"
-        role="img"
         viewBox="0 0 16 16"
         width={16}
         xmlns="http://www.w3.org/2000/svg"
@@ -122,7 +117,6 @@ exports[`ListBoxSelection should render 2`] = `
           focusable="false"
           height={16}
           preserveAspectRatio="xMidYMid meet"
-          role="img"
           style={
             Object {
               "willChange": "transform",