@dnd-kit/accessibility - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0-next-2023106221355

CHANGELOG.md

 # @dnd-kit/accessibility
 
+## 3.1.0-next-2023106221355
+
+### Minor Changes
+
+- [#1229](https://github.com/clauderic/dnd-kit/pull/1229) [`aabb8bd`](https://github.com/clauderic/dnd-kit/commit/aabb8bd114cf1f0aed0f18e70b296d5905ff04d8) Thanks [@ayy-bc](https://github.com/ayy-bc)! - Introduce `ariaLiveType` prop on `<LiveRegion>` to allow consumers to configure the `aria-live` attribute to other values for announcements, such as `aria-live="polite"`.
+
 ## 3.0.1
@@ -4,0 +10,0 @@

dist/accessibility.cjs.development.js

@@ -24,19 +24,21 @@ 'use strict';
 
-const visuallyHidden = {
-  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'
-};
 function LiveRegion(_ref) {
   let {
     id,
-    announcement
+    announcement,
+    ariaLiveType = "assertive"
   } = _ref;
+  // Hide element visually but keep it readable by screen readers
+  const visuallyHidden = {
+    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 React__default.createElement("div", {
@@ -46,3 +48,3 @@ id: id,
     role: "status",
-    "aria-live": "assertive",
+    "aria-live": ariaLiveType,
     "aria-atomic": true
@@ -49,0 +51,0 @@ }, announcement);

dist/accessibility.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;const i={display:"none"},r={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"};exports.HiddenText=function(e){let{id:t,value:r}=e;return n.createElement("div",{id:t,style:i},r)},exports.LiveRegion=function(e){let{id:t,announcement:i}=e;return n.createElement("div",{id:t,style:r,role:"status","aria-live":"assertive","aria-atomic":!0},i)},exports.useAnnouncement=function(){const[e,n]=t.useState("");return{announce:t.useCallback(e=>{null!=e&&n(e)},[]),announcement:e}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;const i={display:"none"};exports.HiddenText=function(e){let{id:t,value:r}=e;return n.createElement("div",{id:t,style:i},r)},exports.LiveRegion=function(e){let{id:t,announcement:i,ariaLiveType:r="assertive"}=e;return n.createElement("div",{id:t,style:{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"},role:"status","aria-live":r,"aria-atomic":!0},i)},exports.useAnnouncement=function(){const[e,n]=t.useState("");return{announce:t.useCallback(e=>{null!=e&&n(e)},[]),announcement:e}};
 //# sourceMappingURL=accessibility.cjs.production.min.js.map

dist/accessibility.esm.js

@@ -17,19 +17,21 @@ import React, { useState, useCallback } from 'react';
 
-const visuallyHidden = {
-  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'
-};
 function LiveRegion(_ref) {
   let {
     id,
-    announcement
+    announcement,
+    ariaLiveType = "assertive"
   } = _ref;
+  // Hide element visually but keep it readable by screen readers
+  const visuallyHidden = {
+    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 React.createElement("div", {
@@ -39,3 +41,3 @@ id: id,
     role: "status",
-    "aria-live": "assertive",
+    "aria-live": ariaLiveType,
     "aria-atomic": true
@@ -42,0 +44,0 @@ }, announcement);

dist/components/LiveRegion/LiveRegion.d.ts

@@ -5,3 +5,4 @@ /// <reference types="react" />
     announcement: string;
+    ariaLiveType?: "polite" | "assertive" | "off";
 }
-export declare function LiveRegion({ id, announcement }: Props): JSX.Element;
+export declare function LiveRegion({ id, announcement, ariaLiveType }: Props): JSX.Element;

package.json

 {
   "name": "@dnd-kit/accessibility",
-  "version": "3.0.1",
+  "version": "3.1.0-next-2023106221355",
   "description": "A generic toolkit to help with accessibility",
@@ -5,0 +5,0 @@ "author": "Claudéric Demers",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20067

increased by6.2%

Lines of code

151

increased by3.42%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes