adding aria described by changes

__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<typeof Popover>;
@@ -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 (
+        <View style={styles.example}>
+            <Popover
+                aria-label="Popover with custom aria label"
+                aria-describedby="PopoverTitle"
+                placement={placement}
+                opened={opened}
+                onClose={() => setOpened(false)}
+                content={
+                    <>
+                        <HeadingMedium id="PopoverTitle" style={styles.srOnly}>Sample text that would describe the navigation of the expression widget</HeadingMedium>
+                        <PopoverContentCore
+                            closeButtonVisible
+                        >
+                            <>
+                                Popover Content
+                            </>
+                        </PopoverContentCore>
+                    </>
+
+                }
+            >
+                <Button
+                    onClick={() => {
+                        setOpened(true);
+                    }}
+                >
+                    {`Open popover`}
+                </Button>
+            </Popover>
+        </View>
+    );
+};

packages/wonder-blocks-popover/src/components/popover.tsx

@@ -281,17 +281,17 @@ export default class Popover extends React.Component<Props, State> {
         } = this.props;
         const {anchorElement} = this.state;
 
-        const ariaDescribedBy = ariaLabel ? undefined : `${uniqueId}-content`;
+        const ariaDescribedBy = `${uniqueId}-content`;
         const ariaLabelledBy = ariaLabel ? undefined : `${uniqueId}-title`;
 
         const popperContent = (
             <TooltipPopper anchorElement={anchorElement} placement={placement}>
                 {(props: PopperElementProps) => (
                     <PopoverDialog
                         {...props}
-                        aria-label={ariaLabel}
                         aria-describedby={ariaDescribedBy}
                         aria-labelledby={ariaLabelledBy}
+                        aria-label={ariaLabel}
                         id={uniqueId}
                         onUpdate={(placement) => this.setState({placement})}
                         showTail={showTail}