Use aria-live="polite" for announcements (#1229)

* Use `aria-live="polite"` for announcements

* Update `ariaLiveType` default value to `assertive`

* Add changeset

---------

Co-authored-by: Claudéric Demers <clauderic.d@gmail.com>

.changeset/configure-aria-live.md

@@ -0,0 +1,5 @@
+---
+"@dnd-kit/accessibility": minor
+---
+
+Introduce `ariaLiveType` prop on `<LiveRegion>` to allow consumers to configure the `aria-live` attribute to other values for announcements, such as `aria-live="polite"`.

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 (
     <div
       id={id}
       style={visuallyHidden}
       role="status"
-      aria-live="assertive"
+      aria-live={ariaLiveType}
       aria-atomic
     >
       {announcement}