[EuiPopover] and [EuiSelectable] Fix some axe issues

elastic · Aug 13, 2020 · 4420dcf · 4420dcf
1 parent 82395a5
commit 4420dcf
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 41 deletions.
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -167,7 +167,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
@@ -423,7 +422,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
@@ -566,7 +564,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"

diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -106,7 +106,6 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
         data-focus-lock-disabled="disabled"
       >
         <div
-          aria-describedby="htmlId"
           aria-live="assertive"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
@@ -158,7 +157,6 @@ exports[`EuiPopover props buffer 1`] = `
         data-focus-lock-disabled="disabled"
       >
         <div
-          aria-describedby="htmlId"
           aria-live="assertive"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
@@ -234,7 +232,6 @@ exports[`EuiPopover props isOpen renders true 1`] = `
         data-focus-lock-disabled="disabled"
       >
         <div
-          aria-describedby="htmlId"
           aria-live="assertive"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
@@ -285,7 +282,6 @@ exports[`EuiPopover props offset with arrow 1`] = `
         data-focus-lock-disabled="disabled"
       >
         <div
-          aria-describedby="htmlId"
           aria-live="assertive"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
@@ -336,7 +332,6 @@ exports[`EuiPopover props offset without arrow 1`] = `
         data-focus-lock-disabled="disabled"
       >
         <div
-          aria-describedby="htmlId"
           aria-live="assertive"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow"
@@ -385,7 +380,6 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
         data-focus-lock-disabled="disabled"
       >
         <div
-          aria-describedby="htmlId"
           aria-live="assertive"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
@@ -493,7 +487,6 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
         data-focus-lock-disabled="disabled"
       >
         <div
-          aria-describedby="htmlId"
           aria-live="assertive"
           aria-modal="true"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen test"
@@ -543,7 +536,6 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
         data-focus-lock-disabled="disabled"
       >
         <div
-          aria-describedby="htmlId"
           aria-live="assertive"
           aria-modal="true"
           class="euiPanel euiPanel--paddingSmall euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -654,6 +654,7 @@ export class EuiPopover extends Component<Props, State> {
     if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {
       let tabIndex;
       let initialFocus;
+      let ariaDescribedby;
       let ariaLive: HTMLAttributes<any>['aria-live'];
 
       if (ownFocus) {
@@ -667,6 +668,7 @@ export class EuiPopover extends Component<Props, State> {
 
       let focusTrapScreenReaderText;
       if (ownFocus) {
+        ariaDescribedby = descriptionId;
         focusTrapScreenReaderText = (
           <EuiScreenReaderOnly>
             <p id={descriptionId}>
@@ -700,7 +702,7 @@ export class EuiPopover extends Component<Props, State> {
               aria-live={ariaLive}
               role="dialog"
               aria-modal="true"
-              aria-describedby={descriptionId}
+              aria-describedby={ariaDescribedby}
               style={this.state.popoverStyles}>
               <div className={arrowClassNames} style={this.state.arrowStyles}>
                 {arrowChildren}

diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
@@ -492,8 +492,6 @@ export class EuiSelectable extends Component<
      * This finds the correct name to use
      *
      * TODO: This doesn't handle being labelled (<label for="idOfInput">)
-     *
-     * @param props
      */
     const getAccessibleName = (
       props:
@@ -543,7 +541,7 @@ export class EuiSelectable extends Component<
             key="listSearch"
             options={options}
             onChange={this.onSearchChange}
-            listId={listId}
+            listId={this.optionsListRef.current ? listId : undefined} // Only pass the listId if it exists on the page
             aria-activedescendant={makeOptionId(activeOptionIndex)} // the current faux-focused option
             placeholder={placeholderName}
             {...(searchHasAccessibleName

diff --git a/src/components/selectable/selectable_search/selectable_search.tsx b/src/components/selectable/selectable_search/selectable_search.tsx
@@ -35,7 +35,10 @@ export type EuiSelectableSearchProps = Omit<EuiFieldSearchProps, 'onChange'> &
     ) => void;
     options: EuiSelectableOption[];
     defaultValue: string;
-    listId: string;
+    /**
+     * The id of the visible list to create the appropriate aria controls
+     */
+    listId?: string;
   };
 
 export interface EuiSelectableSearchState {
@@ -86,6 +89,20 @@ export class EuiSelectableSearch extends Component<
 
     const classes = classNames('euiSelectableSearch', className);
 
+    console.log('id', listId);
+
+    const ariaPropsIfListIsPresent:
+      | Partial<EuiFieldSearchProps>
+      | undefined = listId
+      ? {
+          role: 'combobox',
+          'aria-autocomplete': 'list',
+          'aria-expanded': true,
+          'aria-controls': listId,
+          'aria-owns': listId, // legacy attribute but shims support for nearly everything atm
+        }
+      : undefined;
+
     return (
       <EuiFieldSearch
         className={classes}
@@ -95,12 +112,8 @@ export class EuiSelectableSearch extends Component<
         defaultValue={defaultValue}
         fullWidth
         autoComplete="off"
-        role="combobox"
-        aria-autocomplete="list"
-        aria-expanded="true"
-        aria-controls={listId}
-        aria-owns={listId} // legacy attribute but shims support for nearly everything atm
         aria-haspopup="listbox"
+        {...ariaPropsIfListIsPresent}
         {...rest}
       />
     );

diff --git a/.../selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap b/.../selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
@@ -19,16 +19,11 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-autocomplete="list"
-            aria-controls="htmlId"
-            aria-expanded="true"
             aria-haspopup="listbox"
             aria-label="aria-label"
-            aria-owns="htmlId"
             autocomplete="off"
             class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
             placeholder="Search for anything..."
-            role="combobox"
             type="search"
             value=""
           />
@@ -70,16 +65,11 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-autocomplete="list"
-            aria-controls="htmlId"
-            aria-expanded="true"
             aria-haspopup="listbox"
             aria-label="Filter options"
-            aria-owns="htmlId"
             autocomplete="off"
             class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
             placeholder="Search for anything..."
-            role="combobox"
             type="search"
             value=""
           />
@@ -121,16 +111,11 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-autocomplete="list"
-            aria-controls="htmlId"
-            aria-expanded="true"
             aria-haspopup="listbox"
             aria-label="Filter options"
-            aria-owns="htmlId"
             autocomplete="off"
             class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
             placeholder="Search for anything..."
-            role="combobox"
             type="search"
             value=""
           />
@@ -172,16 +157,11 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-autocomplete="list"
-            aria-controls="htmlId"
-            aria-expanded="true"
             aria-haspopup="listbox"
             aria-label="Filter options"
-            aria-owns="htmlId"
             autocomplete="off"
             class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
             placeholder="Search for anything..."
-            role="combobox"
             type="search"
             value=""
           />