feat(Popover): add ariaLabel prop

kiwicom · Dec 6, 2024 · d7f4f50 · d7f4f50
1 parent 221a67f
commit d7f4f50
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 0 deletions.
diff --git 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.
   <Button>Open Popover</Button>
 </Popover>
 ```
+
+## 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
@@ -45,6 +45,7 @@ export interface Props extends Common.Globals {
   actions?: React.ReactNode;
   offset?: Offset;
   onClose: (ev?: MouseEvent | React.SyntheticEvent<HTMLElement>) => void;
+  ariaLabel?: string;
 }
 
 const PopoverContentWrapper = ({
@@ -67,6 +68,7 @@ const PopoverContentWrapper = ({
   allowOverflow,
   lockScrolling = true,
   actions,
+  ariaLabel,
 }: Props) => {
   const [actionsHeight, setActionsHeight] = React.useState<number | null>(null);
   const { isInsideModal } = React.useContext(ModalContext);
@@ -198,6 +200,7 @@ const PopoverContentWrapper = ({
             shown ? "lm:opacity-100" : "lm:opacity-0",
           )}
           style={cssVars}
+          aria-label={ariaLabel}
         >
           <div
             ref={content}

diff --git a/packages/orbit-components/src/Popover/index.tsx b/packages/orbit-components/src/Popover/index.tsx
@@ -33,6 +33,7 @@ const Popover = ({
   actions,
   overlapped,
   dataTest,
+  ariaLabel,
 }: Props) => {
   const ref = React.useRef<HTMLDivElement | null>(null);
   const popoverId = useRandomId();
@@ -142,6 +143,7 @@ const Popover = ({
       referenceElement={ref.current}
       onClose={handleOut}
       placement={placement}
+      ariaLabel={ariaLabel}
     >
       {content}
     </PopoverContent>

diff --git 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;
 }