(null);
const { isInsideModal } = React.useContext(ModalContext);
@@ -198,6 +202,8 @@ const PopoverContentWrapper = ({
shown ? "lm:opacity-100" : "lm:opacity-0",
)}
style={cssVars}
+ aria-label={ariaLabel}
+ aria-labelledby={ariaLabelledby}
>
{
const ref = React.useRef(null);
const popoverId = useRandomId();
@@ -142,6 +144,8 @@ const Popover = ({
referenceElement={ref.current}
onClose={handleOut}
placement={placement}
+ ariaLabel={ariaLabel}
+ ariaLabelledby={ariaLabelledby}
>
{content}
@@ -159,7 +163,7 @@ const Popover = ({
popovertarget={id || popoverId}
// according to our docs button should be used for opening popover inside children (uncontrolled behavior),
// that's why this div shouldn't be focusable in order to avoid double focus
- tabIndex={-1}
+ tabIndex={0}
onClick={handleClick}
onKeyDown={handleKeyDown(handleClick)}
>
diff --git a/packages/orbit-components/src/Popover/types.d.ts b/packages/orbit-components/src/Popover/types.d.ts
index 1b5a375850..b38214745c 100644
--- a/packages/orbit-components/src/Popover/types.d.ts
+++ b/packages/orbit-components/src/Popover/types.d.ts
@@ -32,4 +32,6 @@ export interface Props extends Common.Globals {
readonly renderInPortal?: boolean;
readonly onClose?: Common.Callback;
readonly zIndex?: number;
+ readonly ariaLabel?: string;
+ readonly ariaLabelledby?: string;
}