diff --git a/packages/orbit-components/src/Popover/README.md b/packages/orbit-components/src/Popover/README.md index d01b3ae34f..54af930ff3 100644 --- a/packages/orbit-components/src/Popover/README.md +++ b/packages/orbit-components/src/Popover/README.md @@ -42,6 +42,7 @@ The table below contains all types of props available in the Popover component. | labelClose | `React.Node` | `Close` | The label for close button. | | renderTimeout | `number` | `0` | The timeout for rendering the Popover. | | zIndex | `number` | `710` | The zIndex value of the Popover component. | +| ariaLabel | `string` | | Optional prop for `aria-label` value (accessibility). | ## enum @@ -110,3 +111,7 @@ The table below contains all types of props available in the Popover component. ``` + +## Accessibility + +- The `ariaLabel` prop allows you to specify an `aria-label` attribute for the popover content component. This attribute provides additional information to screen readers, enhancing the accessibility of the component. By using `ariaLabel`, you can ensure that users who rely on assistive technologies receive the necessary context and information about the component's purpose and functionality. diff --git a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx index 0c479f831f..610c9e41b8 100644 --- a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx +++ b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx @@ -45,6 +45,7 @@ export interface Props extends Common.Globals { actions?: React.ReactNode; offset?: Offset; onClose: (ev?: MouseEvent | React.SyntheticEvent) => void; + ariaLabel?: string; } const PopoverContentWrapper = ({ @@ -67,6 +68,7 @@ const PopoverContentWrapper = ({ allowOverflow, lockScrolling = true, actions, + ariaLabel, }: Props) => { const [actionsHeight, setActionsHeight] = React.useState(null); const { isInsideModal } = React.useContext(ModalContext); @@ -198,6 +200,7 @@ const PopoverContentWrapper = ({ shown ? "lm:opacity-100" : "lm:opacity-0", )} style={cssVars} + aria-label={ariaLabel} >
{ const ref = React.useRef(null); const popoverId = useRandomId(); @@ -142,6 +143,7 @@ const Popover = ({ referenceElement={ref.current} onClose={handleOut} placement={placement} + ariaLabel={ariaLabel} > {content} diff --git a/packages/orbit-components/src/Popover/types.d.ts b/packages/orbit-components/src/Popover/types.d.ts index 1b5a375850..e0b0f75458 100644 --- a/packages/orbit-components/src/Popover/types.d.ts +++ b/packages/orbit-components/src/Popover/types.d.ts @@ -32,4 +32,5 @@ export interface Props extends Common.Globals { readonly renderInPortal?: boolean; readonly onClose?: Common.Callback; readonly zIndex?: number; + readonly ariaLabel?: string; }