[a11y] Miscellaneous updates

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
 - Updated `EuiDataGrid`s with scrolling content to always have a border around the grid body and any scrollbars ([#5563](https://github.com/elastic/eui/pull/5563))
+- Added referenceable `id` for the generated label in `EuiFormRow` ([#5574](https://github.com/elastic/eui/pull/5574))
+- Addeed optional attribute configurations in `EuiPopover` to aid screen reader announcements ([#5574](https://github.com/elastic/eui/pull/5574))
+- Added `ref` passthroughs to `EuiIputPopover` subcomponents ([#5574](https://github.com/elastic/eui/pull/5574))
 
 **Bug fixes**
 

src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap

@@ -677,6 +677,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
                     aria-invalid={true}
                     className="euiFormRow__label"
                     htmlFor="generated-id"
+                    id="generated-id-label"
                     isFocused={false}
                     isInvalid={true}
                     type="label"
@@ -685,6 +686,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
                       aria-invalid={true}
                       className="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
                       htmlFor="generated-id"
+                      id="generated-id-label"
                     >
                       Label
                     </label>

src/components/form/form_row/__snapshots__/form_row.test.tsx.snap

@@ -24,12 +24,14 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = `
       <EuiFormLabel
         className="euiFormRow__label"
         htmlFor="generated-id"
+        id="generated-id-label"
         isFocused={false}
         type="label"
       >
         <label
           className="euiFormLabel euiFormRow__label"
           htmlFor="generated-id"
+          id="generated-id-label"
         >
           <span>
             Label
@@ -74,12 +76,14 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = `
       <EuiFormLabel
         className="euiFormRow__label"
         htmlFor="generated-id"
+        id="generated-id-label"
         isFocused={false}
         type="label"
       >
         <label
           className="euiFormLabel euiFormRow__label"
           htmlFor="generated-id"
+          id="generated-id-label"
         >
           <span>
             Label
@@ -124,12 +128,14 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = `
       <EuiFormLabel
         className="euiFormRow__label"
         htmlFor="generated-id"
+        id="generated-id-label"
         isFocused={true}
         type="label"
       >
         <label
           className="euiFormLabel euiFormRow__label euiFormLabel-isFocused"
           htmlFor="generated-id"
+          id="generated-id-label"
         >
           <span>
             Label
@@ -174,12 +180,14 @@ exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] =
       <EuiFormLabel
         className="euiFormRow__label"
         htmlFor="generated-id"
+        id="generated-id-label"
         isFocused={true}
         type="label"
       >
         <label
           className="euiFormLabel euiFormRow__label euiFormLabel-isFocused"
           htmlFor="generated-id"
+          id="generated-id-label"
         >
           <span>
             Label
@@ -521,6 +529,7 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `
       aria-invalid="true"
       class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
       for="generated-id"
+      id="generated-id-label"
     >
       label
     </label>
@@ -546,6 +555,7 @@ exports[`EuiFormRow props label append is rendered 1`] = `
     <EuiFormLabel
       className="euiFormRow__label"
       htmlFor="generated-id"
+      id="generated-id-label"
       isFocused={false}
       type="label"
     >
@@ -577,6 +587,7 @@ exports[`EuiFormRow props label is rendered 1`] = `
     <EuiFormLabel
       className="euiFormRow__label"
       htmlFor="generated-id"
+      id="generated-id-label"
       isFocused={false}
       type="label"
     >
@@ -605,6 +616,7 @@ exports[`EuiFormRow props label renders as a legend and subsquently a fieldset w
   >
     <EuiFormLabel
       className="euiFormRow__label"
+      id="generated-id-label"
       type="legend"
     >
       label

src/components/form/form_row/form_row.tsx

@@ -220,6 +220,7 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
 
     let optionalLabel;
     const isLegend = label && labelType === 'legend' ? true : false;
+    const labelId = `${id}-label`;
 
     if (label || labelAppend) {
       let labelProps = {};
@@ -241,6 +242,7 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
             isInvalid={isInvalid}
             isDisabled={isDisabled}
             aria-invalid={isInvalid}
+            id={labelId}
             {...labelProps}
           >
             {label}

src/components/popover/input_popover.tsx

@@ -20,7 +20,7 @@ import { CommonProps } from '../common';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiPopover, EuiPopoverProps } from './popover';
 import { EuiResizeObserver } from '../observer/resize_observer';
-import { cascadingMenuKeys } from '../../services';
+import { cascadingMenuKeys, useCombinedRefs } from '../../services';
 
 export interface _EuiInputPopoverProps
   extends Omit<EuiPopoverProps, 'button' | 'buttonRef'> {
@@ -42,14 +42,16 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
   input,
   fullWidth = false,
   onPanelResize,
+  inputRef: _inputRef,
+  panelRef: _panelRef,
   ...props
 }) => {
   const [inputEl, setInputEl] = useState<HTMLElement | null>(null);
   const [inputElWidth, setInputElWidth] = useState<number>();
   const [panelEl, setPanelEl] = useState<HTMLElement | null>(null);
 
-  const inputRef = (node: HTMLElement | null) => setInputEl(node);
-  const panelRef = (node: HTMLElement | null) => setPanelEl(node);
+  const inputRef = useCombinedRefs([setInputEl, _inputRef]);
+  const panelRef = useCombinedRefs([setPanelEl, _panelRef]);
 
   const setPanelWidth = useCallback(
     (width?: number) => {

src/components/popover/popover.tsx

@@ -731,7 +731,14 @@ export class EuiPopover extends Component<Props, State> {
       let ariaDescribedby;
       let ariaLive: HTMLAttributes<any>['aria-live'];
 
-      if (ownFocus) {
+      const panelAriaModal = panelProps?.hasOwnProperty('aria-modal')
+        ? panelProps['aria-modal']
+        : 'true';
+      const panelRole = panelProps?.hasOwnProperty('role')
+        ? panelProps.role
+        : 'dialog';
+
+      if (ownFocus || panelAriaModal !== 'true') {
         tabIndex = tabIndexProp ?? 0;
         ariaLive = 'off';
 
@@ -784,10 +791,10 @@ export class EuiPopover extends Component<Props, State> {
               paddingSize={panelPaddingSize}
               tabIndex={tabIndex}
               aria-live={ariaLive}
-              role="dialog"
+              role={panelRole}
               aria-label={ariaLabel}
               aria-labelledby={ariaLabelledBy}
-              aria-modal="true"
+              aria-modal={panelAriaModal}
               aria-describedby={ariaDescribedby}
               style={{
                 ...this.state.popoverStyles,

src/services/index.ts

@@ -123,15 +123,7 @@ export {
 
 export { EuiWindowEvent } from './window_event';
 
-export {
-  useCombinedRefs,
-  useForceRender,
-  useUpdateEffect,
-  useDependentState,
-  useIsWithinBreakpoints,
-  useMouseMove,
-  isMouseEvent,
-} from './hooks';
+export * from './hooks';
 
 export { throttle } from './throttle';