diff --git a/.changeset/configure-aria-live.md b/.changeset/configure-aria-live.md new file mode 100644 index 00000000..1781f37d --- /dev/null +++ b/.changeset/configure-aria-live.md @@ -0,0 +1,5 @@ +--- +"@dnd-kit/accessibility": minor +--- + +Introduce `ariaLiveType` prop on `` to allow consumers to configure the `aria-live` attribute to other values for announcements, such as `aria-live="polite"`. diff --git a/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx b/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx index a5e0d012..7caf2bb1 100644 --- a/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx +++ b/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx @@ -3,29 +3,30 @@ import React from 'react'; export interface Props { id: string; announcement: string; + ariaLiveType?: "polite" | "assertive" | "off"; } -// Hide element visually but keep it readable by screen readers -const visuallyHidden: React.CSSProperties = { - position: 'fixed', - width: 1, - height: 1, - margin: -1, - border: 0, - padding: 0, - overflow: 'hidden', - clip: 'rect(0 0 0 0)', - clipPath: 'inset(100%)', - whiteSpace: 'nowrap', -}; - -export function LiveRegion({id, announcement}: Props) { +export function LiveRegion({id, announcement, ariaLiveType = "assertive"}: Props) { + // Hide element visually but keep it readable by screen readers + const visuallyHidden: React.CSSProperties = { + position: 'fixed', + width: 1, + height: 1, + margin: -1, + border: 0, + padding: 0, + overflow: 'hidden', + clip: 'rect(0 0 0 0)', + clipPath: 'inset(100%)', + whiteSpace: 'nowrap', + }; + return (
{announcement}