@vector-im/compound-web 8.2.3 → 8.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.cjs +10 -11
- package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.cjs.map +1 -1
- package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.js +10 -11
- package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx +17 -10
|
@@ -34,17 +34,16 @@ function ReleaseAnnouncementAnchor({
|
|
|
34
34
|
"ReleaseAnnouncement anchor must be a single valid React element"
|
|
35
35
|
);
|
|
36
36
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
);
|
|
37
|
+
const referenceProps = context.getReferenceProps({
|
|
38
|
+
ref,
|
|
39
|
+
// If the ReleaseAnnouncement is open, we need manually aria-describedby.
|
|
40
|
+
// The RA has the dialog role and it's not adding automatically the aria-describedby.
|
|
41
|
+
...context.open && {
|
|
42
|
+
"aria-describedby": context.getFloatingProps().id
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
delete referenceProps["aria-expanded"];
|
|
46
|
+
return React.cloneElement(children, referenceProps);
|
|
48
47
|
}
|
|
49
48
|
function ReleaseAnnouncementContainer({
|
|
50
49
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReleaseAnnouncement.cjs","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n cloneElement,\n isValidElement,\n type JSX,\n type PropsWithChildren,\n type Ref,\n} from \"react\";\nimport {\n FloatingPortal,\n FloatingFocusManager,\n type Placement,\n useMergeRefs,\n FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n useReleaseAnnouncementContext,\n ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps\n extends Omit<UseReleaseAnnouncementParam, \"placement\" | \"displayArrow\"> {\n /**\n * The placement of the component\n * @default \"right\"\n */\n placement?: Placement;\n /**\n * Whether to display an arrow.\n * @default true\n */\n displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n /**\n * The children anchor should be a single valid React element.\n */\n children,\n placement = \"right\",\n displayArrow = true,\n ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n return (\n <ReleaseAnnouncementContext.Provider value={context}>\n <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n <ReleaseAnnouncementContainer>\n <ReleaseAnnouncementContent />\n </ReleaseAnnouncementContainer>\n </ReleaseAnnouncementContext.Provider>\n );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n const context = useReleaseAnnouncementContext();\n\n // The children can have a ref and we don't want to discard it\n // Doing a dirty cast to get the optional ref\n const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n if (!isValidElement(children)) {\n throw new Error(\n \"ReleaseAnnouncement anchor must be a single valid React element\",\n );\n }\n\n
|
|
1
|
+
{"version":3,"file":"ReleaseAnnouncement.cjs","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n cloneElement,\n isValidElement,\n type JSX,\n type PropsWithChildren,\n type Ref,\n} from \"react\";\nimport {\n FloatingPortal,\n FloatingFocusManager,\n type Placement,\n useMergeRefs,\n FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n useReleaseAnnouncementContext,\n ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps\n extends Omit<UseReleaseAnnouncementParam, \"placement\" | \"displayArrow\"> {\n /**\n * The placement of the component\n * @default \"right\"\n */\n placement?: Placement;\n /**\n * Whether to display an arrow.\n * @default true\n */\n displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n /**\n * The children anchor should be a single valid React element.\n */\n children,\n placement = \"right\",\n displayArrow = true,\n ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n return (\n <ReleaseAnnouncementContext.Provider value={context}>\n <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n <ReleaseAnnouncementContainer>\n <ReleaseAnnouncementContent />\n </ReleaseAnnouncementContainer>\n </ReleaseAnnouncementContext.Provider>\n );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n const context = useReleaseAnnouncementContext();\n\n // The children can have a ref and we don't want to discard it\n // Doing a dirty cast to get the optional ref\n const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n if (!isValidElement(children)) {\n throw new Error(\n \"ReleaseAnnouncement anchor must be a single valid React element\",\n );\n }\n\n const referenceProps = context.getReferenceProps({\n ref,\n // If the ReleaseAnnouncement is open, we need manually aria-describedby.\n // The RA has the dialog role and it's not adding automatically the aria-describedby.\n ...(context.open && {\n \"aria-describedby\": context.getFloatingProps().id as string,\n }),\n });\n\n // getReferenceProps includes aria-expanded (being true when the popup is shown)\n // but axe only allows this on certain elements and we use release anncounements on\n // all sorts of elements. Semantically, I don't think it makes sense because the point\n // of aria-expanded is a hint to the user that there is something that can be expanded.\n // The user can't cause a release announcement to be shown, it just appears when it thinks\n // it's time, so I think adding it here is misleading.\n delete referenceProps[\"aria-expanded\"];\n\n return cloneElement(children, referenceProps);\n}\n\n/**\n * The container for the ReleaseAnnouncement components.\n * Manage focus and positioning of the children.\n * @param children\n */\nfunction ReleaseAnnouncementContainer({\n children,\n}: PropsWithChildren): JSX.Element | null {\n const {\n context: floatingContext,\n arrowRef,\n displayArrow,\n ...rest\n } = useReleaseAnnouncementContext();\n\n if (!floatingContext.open) return null;\n\n return (\n <FloatingPortal>\n <FloatingFocusManager context={floatingContext} modal={false}>\n <div\n ref={rest.refs.setFloating}\n style={rest.floatingStyles}\n aria-labelledby={rest.labelId}\n aria-describedby={rest.descriptionId}\n {...rest.getFloatingProps()}\n className={styles.content}\n >\n {displayArrow && (\n <FloatingArrow\n ref={arrowRef}\n context={floatingContext}\n // design absolute value\n width={20}\n height={12}\n className={styles.arrow}\n />\n )}\n {children}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n}\n\n/**\n * The content of the ReleaseAnnouncement component.\n * ---------------------------------------------------------------\n * - The header in a bold text ------------- -\n * - A description in a regular text | Close button | -\n * - Description can be on multiple lines ------------- -\n * ---------------------------------------------------------------\n */\nfunction ReleaseAnnouncementContent(): JSX.Element {\n const { labelId, descriptionId, header, description, closeLabel, onClick } =\n useReleaseAnnouncementContext();\n\n return (\n <>\n <Text\n as=\"h3\"\n id={labelId}\n className={styles.header}\n size=\"lg\"\n weight=\"semibold\"\n >\n {header}\n </Text>\n <Text\n as=\"span\"\n id={descriptionId}\n className={styles.description}\n size=\"sm\"\n weight=\"regular\"\n >\n {description}\n </Text>\n <Button\n size=\"sm\"\n kind=\"secondary\"\n className={styles.button}\n onClick={onClick}\n >\n {closeLabel}\n </Button>\n </>\n );\n}\n"],"names":["useReleaseAnnouncement","jsxs","ReleaseAnnouncementContext","jsx","useReleaseAnnouncementContext","useMergeRefs","isValidElement","cloneElement","FloatingPortal","FloatingFocusManager","styles","FloatingArrow","Fragment","Text","Button"],"mappings":"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"}
|
|
@@ -32,17 +32,16 @@ function ReleaseAnnouncementAnchor({
|
|
|
32
32
|
"ReleaseAnnouncement anchor must be a single valid React element"
|
|
33
33
|
);
|
|
34
34
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
);
|
|
35
|
+
const referenceProps = context.getReferenceProps({
|
|
36
|
+
ref,
|
|
37
|
+
// If the ReleaseAnnouncement is open, we need manually aria-describedby.
|
|
38
|
+
// The RA has the dialog role and it's not adding automatically the aria-describedby.
|
|
39
|
+
...context.open && {
|
|
40
|
+
"aria-describedby": context.getFloatingProps().id
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
delete referenceProps["aria-expanded"];
|
|
44
|
+
return cloneElement(children, referenceProps);
|
|
46
45
|
}
|
|
47
46
|
function ReleaseAnnouncementContainer({
|
|
48
47
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReleaseAnnouncement.js","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n cloneElement,\n isValidElement,\n type JSX,\n type PropsWithChildren,\n type Ref,\n} from \"react\";\nimport {\n FloatingPortal,\n FloatingFocusManager,\n type Placement,\n useMergeRefs,\n FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n useReleaseAnnouncementContext,\n ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps\n extends Omit<UseReleaseAnnouncementParam, \"placement\" | \"displayArrow\"> {\n /**\n * The placement of the component\n * @default \"right\"\n */\n placement?: Placement;\n /**\n * Whether to display an arrow.\n * @default true\n */\n displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n /**\n * The children anchor should be a single valid React element.\n */\n children,\n placement = \"right\",\n displayArrow = true,\n ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n return (\n <ReleaseAnnouncementContext.Provider value={context}>\n <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n <ReleaseAnnouncementContainer>\n <ReleaseAnnouncementContent />\n </ReleaseAnnouncementContainer>\n </ReleaseAnnouncementContext.Provider>\n );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n const context = useReleaseAnnouncementContext();\n\n // The children can have a ref and we don't want to discard it\n // Doing a dirty cast to get the optional ref\n const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n if (!isValidElement(children)) {\n throw new Error(\n \"ReleaseAnnouncement anchor must be a single valid React element\",\n );\n }\n\n
|
|
1
|
+
{"version":3,"file":"ReleaseAnnouncement.js","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n cloneElement,\n isValidElement,\n type JSX,\n type PropsWithChildren,\n type Ref,\n} from \"react\";\nimport {\n FloatingPortal,\n FloatingFocusManager,\n type Placement,\n useMergeRefs,\n FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n useReleaseAnnouncementContext,\n ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps\n extends Omit<UseReleaseAnnouncementParam, \"placement\" | \"displayArrow\"> {\n /**\n * The placement of the component\n * @default \"right\"\n */\n placement?: Placement;\n /**\n * Whether to display an arrow.\n * @default true\n */\n displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n /**\n * The children anchor should be a single valid React element.\n */\n children,\n placement = \"right\",\n displayArrow = true,\n ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n return (\n <ReleaseAnnouncementContext.Provider value={context}>\n <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n <ReleaseAnnouncementContainer>\n <ReleaseAnnouncementContent />\n </ReleaseAnnouncementContainer>\n </ReleaseAnnouncementContext.Provider>\n );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n const context = useReleaseAnnouncementContext();\n\n // The children can have a ref and we don't want to discard it\n // Doing a dirty cast to get the optional ref\n const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n if (!isValidElement(children)) {\n throw new Error(\n \"ReleaseAnnouncement anchor must be a single valid React element\",\n );\n }\n\n const referenceProps = context.getReferenceProps({\n ref,\n // If the ReleaseAnnouncement is open, we need manually aria-describedby.\n // The RA has the dialog role and it's not adding automatically the aria-describedby.\n ...(context.open && {\n \"aria-describedby\": context.getFloatingProps().id as string,\n }),\n });\n\n // getReferenceProps includes aria-expanded (being true when the popup is shown)\n // but axe only allows this on certain elements and we use release anncounements on\n // all sorts of elements. Semantically, I don't think it makes sense because the point\n // of aria-expanded is a hint to the user that there is something that can be expanded.\n // The user can't cause a release announcement to be shown, it just appears when it thinks\n // it's time, so I think adding it here is misleading.\n delete referenceProps[\"aria-expanded\"];\n\n return cloneElement(children, referenceProps);\n}\n\n/**\n * The container for the ReleaseAnnouncement components.\n * Manage focus and positioning of the children.\n * @param children\n */\nfunction ReleaseAnnouncementContainer({\n children,\n}: PropsWithChildren): JSX.Element | null {\n const {\n context: floatingContext,\n arrowRef,\n displayArrow,\n ...rest\n } = useReleaseAnnouncementContext();\n\n if (!floatingContext.open) return null;\n\n return (\n <FloatingPortal>\n <FloatingFocusManager context={floatingContext} modal={false}>\n <div\n ref={rest.refs.setFloating}\n style={rest.floatingStyles}\n aria-labelledby={rest.labelId}\n aria-describedby={rest.descriptionId}\n {...rest.getFloatingProps()}\n className={styles.content}\n >\n {displayArrow && (\n <FloatingArrow\n ref={arrowRef}\n context={floatingContext}\n // design absolute value\n width={20}\n height={12}\n className={styles.arrow}\n />\n )}\n {children}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n}\n\n/**\n * The content of the ReleaseAnnouncement component.\n * ---------------------------------------------------------------\n * - The header in a bold text ------------- -\n * - A description in a regular text | Close button | -\n * - Description can be on multiple lines ------------- -\n * ---------------------------------------------------------------\n */\nfunction ReleaseAnnouncementContent(): JSX.Element {\n const { labelId, descriptionId, header, description, closeLabel, onClick } =\n useReleaseAnnouncementContext();\n\n return (\n <>\n <Text\n as=\"h3\"\n id={labelId}\n className={styles.header}\n size=\"lg\"\n weight=\"semibold\"\n >\n {header}\n </Text>\n <Text\n as=\"span\"\n id={descriptionId}\n className={styles.description}\n size=\"sm\"\n weight=\"regular\"\n >\n {description}\n </Text>\n <Button\n size=\"sm\"\n kind=\"secondary\"\n className={styles.button}\n onClick={onClick}\n >\n {closeLabel}\n </Button>\n </>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAoDO,SAAS,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,GAAG;AACL,GAA6D;AAC3D,QAAM,UAAU,uBAAuB,EAAE,WAAW,cAAc,GAAG,OAAO;AAE5E,SACE,qBAAC,2BAA2B,UAA3B,EAAoC,OAAO,SAC1C,UAAA;AAAA,IAAA,oBAAC,6BAA2B,UAAS;AAAA,IACrC,oBAAC,8BAAA,EACC,UAAA,oBAAC,4BAAA,CAAA,CAA2B,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;AAQA,SAAS,0BAA0B;AAAA,EACjC;AACF,GAA6C;AAC3C,QAAM,UAAU,8BAAA;AAIhB,QAAM,cAAe,UAAoD;AACzE,QAAM,MAAM,aAAa,CAAC,QAAQ,KAAK,cAAc,WAAW,CAAC;AAEjE,MAAI,CAAC,eAAe,QAAQ,GAAG;AAC7B,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,iBAAiB,QAAQ,kBAAkB;AAAA,IAC/C;AAAA;AAAA;AAAA,IAGA,GAAI,QAAQ,QAAQ;AAAA,MAClB,oBAAoB,QAAQ,mBAAmB;AAAA,IAAA;AAAA,EACjD,CACD;AAQD,SAAO,eAAe,eAAe;AAErC,SAAO,aAAa,UAAU,cAAc;AAC9C;AAOA,SAAS,6BAA6B;AAAA,EACpC;AACF,GAA0C;AACxC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,8BAAA;AAEJ,MAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,6BACG,gBAAA,EACC,UAAA,oBAAC,wBAAqB,SAAS,iBAAiB,OAAO,OACrD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,mBAAiB,KAAK;AAAA,MACtB,oBAAkB,KAAK;AAAA,MACtB,GAAG,KAAK,iBAAA;AAAA,MACT,WAAW,OAAO;AAAA,MAEjB,UAAA;AAAA,QAAA,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAS;AAAA,YAET,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAUA,SAAS,6BAA0C;AACjD,QAAM,EAAE,SAAS,eAAe,QAAQ,aAAa,YAAY,QAAA,IAC/D,8BAAA;AAEF,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -93,17 +93,24 @@ function ReleaseAnnouncementAnchor({
|
|
|
93
93
|
);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
...(context.open && {
|
|
103
|
-
"aria-describedby": context.getFloatingProps().id as string,
|
|
104
|
-
}),
|
|
96
|
+
const referenceProps = context.getReferenceProps({
|
|
97
|
+
ref,
|
|
98
|
+
// If the ReleaseAnnouncement is open, we need manually aria-describedby.
|
|
99
|
+
// The RA has the dialog role and it's not adding automatically the aria-describedby.
|
|
100
|
+
...(context.open && {
|
|
101
|
+
"aria-describedby": context.getFloatingProps().id as string,
|
|
105
102
|
}),
|
|
106
|
-
);
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
// getReferenceProps includes aria-expanded (being true when the popup is shown)
|
|
106
|
+
// but axe only allows this on certain elements and we use release anncounements on
|
|
107
|
+
// all sorts of elements. Semantically, I don't think it makes sense because the point
|
|
108
|
+
// of aria-expanded is a hint to the user that there is something that can be expanded.
|
|
109
|
+
// The user can't cause a release announcement to be shown, it just appears when it thinks
|
|
110
|
+
// it's time, so I think adding it here is misleading.
|
|
111
|
+
delete referenceProps["aria-expanded"];
|
|
112
|
+
|
|
113
|
+
return cloneElement(children, referenceProps);
|
|
107
114
|
}
|
|
108
115
|
|
|
109
116
|
/**
|