diff --git a/__docs__/wonder-blocks-popover/popover.stories.tsx b/__docs__/wonder-blocks-popover/popover.stories.tsx index 258b10086..fdafeff59 100644 --- a/__docs__/wonder-blocks-popover/popover.stories.tsx +++ b/__docs__/wonder-blocks-popover/popover.stories.tsx @@ -6,10 +6,10 @@ import Button from "@khanacademy/wonder-blocks-button"; import {View} from "@khanacademy/wonder-blocks-core"; import {Strut} from "@khanacademy/wonder-blocks-layout"; import {color, spacing} from "@khanacademy/wonder-blocks-tokens"; -import {LabelLarge} from "@khanacademy/wonder-blocks-typography"; +import {HeadingMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography"; import type {Placement} from "@khanacademy/wonder-blocks-tooltip"; -import {Popover, PopoverContent} from "@khanacademy/wonder-blocks-popover"; +import {Popover, PopoverContent, PopoverContentCore} from "@khanacademy/wonder-blocks-popover"; import packageConfig from "../../packages/wonder-blocks-popover/package.json"; import ComponentInfo from "../../.storybook/components/component-info"; @@ -87,6 +87,16 @@ const styles = StyleSheet.create({ flexDirection: "row", gap: spacing.medium_16, }, + srOnly: { + border: 0, + clip: "rect(0,0,0,0)", + height: 1, + margin: -1, + overflow: "hidden", + padding: 0, + position: "absolute", + width: 1, + }, }); type StoryComponentType = StoryObj; @@ -742,3 +752,42 @@ export const CustomAriaLabel: StoryComponentType = { "aria-label": "Popover with custom aria label", } as PopoverArgs, }; + + +export const CustomAriaDescribedBy = ({placement}: {placement: Placement}) => { + + const [opened, setOpened] = React.useState(true); + + return ( + + setOpened(false)} + content={ + <> + Sample text that would describe the navigation of the expression widget + + <> + Popover Content + + + + + } + > + + + + ); +}; diff --git a/packages/wonder-blocks-popover/src/components/popover.tsx b/packages/wonder-blocks-popover/src/components/popover.tsx index b354a029c..2a736027e 100644 --- a/packages/wonder-blocks-popover/src/components/popover.tsx +++ b/packages/wonder-blocks-popover/src/components/popover.tsx @@ -281,7 +281,7 @@ export default class Popover extends React.Component { } = this.props; const {anchorElement} = this.state; - const ariaDescribedBy = ariaLabel ? undefined : `${uniqueId}-content`; + const ariaDescribedBy = `${uniqueId}-content`; const ariaLabelledBy = ariaLabel ? undefined : `${uniqueId}-title`; const popperContent = ( @@ -289,9 +289,9 @@ export default class Popover extends React.Component { {(props: PopperElementProps) => ( this.setState({placement})} showTail={showTail}