Added SR-only help text to EuiPopover and dependent components. (#6589

)

* WIP. Updating EuiPopover for focusable content instructions.

* Added SR-only help text to EuiPopover and dependent components.

* Added SR help text to EuiPopover, EuiRange, EuiDualRange.
* Completed preliminary testing with Safari and Firefox, VO screen reader.
* Updated snapshot tests for SR instructions.

* Added CHANGELOG entry.

* Fixed the EuiSuggest CodeSandbox demo.

* Added i18n to EuiRange. Refactored ARIA logic for simpler reasoning.

* Simplified the screen reader message for EuiPopover.

* Removing unneeded type isTabbable.

* Update upcoming_changelogs/6589.md

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

* Reducing redundant SR-only help text.

* Simplified aria-describedby API for EuiSuggest.

* Removed extra EuiScreenReaderOnly component.
* Refactoring aria-describedby for EuiSuggest.

* Renaming EuiSelectable instructions prop.

* Update EuiSuggest instructions to optionally prepend to existing.

* Added unit test for custom aria-describedby string.

* Refactored EuiSelectable unit test to correctly find SR-only instruction text.

* Updated screen reader selector with ID.

* Update src/components/selectable/selectable.tsx

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

* Updating unit tests and snapshots for simpler instruction string concatenation.

---------

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

src-docs/src/views/suggest/suggest_example.js

@@ -73,7 +73,7 @@ export const SuggestExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: suggestSource,
         },
       ],

src/components/date_picker/auto_refresh/auto_refresh.tsx

@@ -146,6 +146,9 @@ export const EuiAutoRefreshButton: FunctionComponent<EuiAutoRefreshButtonProps>
       closePopover={() => {
         setIsPopoverOpen(false);
       }}
+      popoverScreenReaderText={
+        isPaused ? autoRefeshLabelOff : autoRefeshLabelOn
+      }
     >
       <EuiRefreshInterval
         onRefreshChange={onRefreshChange}

src/components/form/range/dual_range.tsx

@@ -35,6 +35,7 @@ import type { EuiDualRangeProps, _SingleRangeValue } from './types';
 
 import { euiRangeStyles } from './range.styles';
 import { euiDualRangeStyles } from './dual_range.styles';
+import { EuiI18n } from '../../i18n';
 
 type ValueMember = _SingleRangeValue['value'];
 
@@ -566,6 +567,13 @@ export class EuiDualRangeClass extends Component<
         }
       : rightThumbPosition;
 
+    const dualSliderScreenReaderInstructions = (
+      <EuiI18n
+        token="euiDualRange.sliderScreenReaderInstructions"
+        default="You are in a custom range slider. Use the Up and Down arrow keys to change the minimum value. Press Tab to interact with the maximum value."
+      />
+    );
+
     const theRange = (
       <EuiRangeWrapper
         css={cssStyles}
@@ -647,8 +655,14 @@ export class EuiDualRangeClass extends Component<
                       onFocus={this.onThumbFocus}
                       onBlur={this.onThumbBlur}
                       onKeyDown={this.handleDraggableKeyDown}
-                      aria-describedby={this.props['aria-describedby']}
-                      aria-label={this.props['aria-label']}
+                      aria-describedby={
+                        showInputOnly
+                          ? undefined
+                          : this.props['aria-describedby']
+                      }
+                      aria-label={
+                        showInputOnly ? undefined : this.props['aria-label']
+                      }
                     />
                   )}
 
@@ -663,8 +677,12 @@ export class EuiDualRangeClass extends Component<
                     onFocus={this.onThumbFocus}
                     onBlur={this.onThumbBlur}
                     style={logicalStyles(leftThumbStyles)}
-                    aria-describedby={this.props['aria-describedby']}
-                    aria-label={this.props['aria-label']}
+                    aria-describedby={
+                      showInputOnly ? undefined : this.props['aria-describedby']
+                    }
+                    aria-label={
+                      showInputOnly ? undefined : this.props['aria-label']
+                    }
                   />
 
                   <EuiRangeThumb
@@ -678,8 +696,12 @@ export class EuiDualRangeClass extends Component<
                     onFocus={this.onThumbFocus}
                     onBlur={this.onThumbBlur}
                     style={logicalStyles(rightThumbStyles)}
-                    aria-describedby={this.props['aria-describedby']}
-                    aria-label={this.props['aria-label']}
+                    aria-describedby={
+                      showInputOnly ? undefined : this.props['aria-describedby']
+                    }
+                    aria-label={
+                      showInputOnly ? undefined : this.props['aria-label']
+                    }
                   />
                 </React.Fragment>
               )}
@@ -740,6 +762,7 @@ export class EuiDualRangeClass extends Component<
         closePopover={this.closePopover}
         disableFocusTrap={true}
         onPanelResize={this.onResize}
+        popoverScreenReaderText={dualSliderScreenReaderInstructions}
       >
         {theRange}
       </EuiInputPopover>

src/components/form/range/range.tsx

@@ -30,6 +30,7 @@ import { EuiRangeWrapper } from './range_wrapper';
 import type { EuiRangeProps } from './types';
 
 import { euiRangeStyles } from './range.styles';
+import { EuiI18n } from '../../i18n';
 
 export class EuiRangeClass extends Component<
   EuiRangeProps & WithEuiThemeProps
@@ -179,6 +180,13 @@ export class EuiRangeClass extends Component<
     const cssStyles = [styles.euiRange, showInput && styles.hasInput];
     const thumbColor = levels && getLevelColor(levels, Number(value));
 
+    const sliderScreenReaderInstructions = (
+      <EuiI18n
+        token="euiRange.sliderScreenReaderInstructions"
+        default="You are in a custom range slider. Use the Up and Down arrow keys to change the value."
+      />
+    );
+
     const theRange = (
       <EuiRangeWrapper
         className={classes}
@@ -203,7 +211,7 @@ export class EuiRangeClass extends Component<
           levels={levels}
           onChange={this.handleOnChange}
           value={value}
-          aria-hidden={showInput === true}
+          aria-hidden={!!showInput}
           showRange={showRange}
         >
           {(trackWidth) => (
@@ -227,7 +235,7 @@ export class EuiRangeClass extends Component<
                 }
                 onFocus={showInput === true ? undefined : onFocus}
                 onBlur={showInputOnly ? this.onInputBlur : onBlur}
-                aria-hidden={showInput === true ? true : false}
+                aria-hidden={!!showInput}
                 thumbColor={thumbColor}
                 {...rest}
               />
@@ -291,6 +299,7 @@ export class EuiRangeClass extends Component<
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
         disableFocusTrap={true}
+        popoverScreenReaderText={sliderScreenReaderInstructions}
       >
         {theRange}
       </EuiInputPopover>

src/components/popover/popover.tsx

@@ -681,6 +681,7 @@ export class EuiPopover extends Component<Props, State> {
       let focusTrapScreenReaderText;
       if (ownFocus || popoverScreenReaderText) {
         ariaDescribedby = this.descriptionId;
+
         focusTrapScreenReaderText = (
           <EuiScreenReaderOnly>
             <p id={this.descriptionId}>