From d7f4f50d5efc5879042e071f97b76103b768cae7 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Thu, 5 Dec 2024 14:14:46 +0100
Subject: [PATCH] feat(Popover): add ariaLabel prop

---
 packages/orbit-components/src/Popover/README.md              | 5 +++++
 .../src/Popover/components/ContentWrapper.tsx                | 3 +++
 packages/orbit-components/src/Popover/index.tsx              | 2 ++
 packages/orbit-components/src/Popover/types.d.ts             | 1 +
 4 files changed, 11 insertions(+)

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.
   <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
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<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
index c03c844496..a22653dde6 100644
--- 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
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;
 }