@atlaskit/pragmatic-drag-and-drop-live-region - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

afm-cc/tsconfig.json

@@ -7,4 +7,3 @@ {
         "outDir": "../dist",
-        "rootDir": "../",
-        "baseUrl": "../"
+        "rootDir": "../"
     },
@@ -11,0 +10,0 @@ "include": [

afm-jira/tsconfig.json

 {
-  "extends": "../../../../tsconfig.entry-points.jira.json",
-  "compilerOptions": {
-    "target": "es5",
-    "outDir": "../../../../../tsDist/@atlaskit__pragmatic-drag-and-drop-live-region/app",
-    "composite": true,
-    "rootDir": "../"
-  },
-  "include": [
-    "../src/**/*.ts",
-    "../src/**/*.tsx"
-  ],
-  "exclude": [
-    "../src/**/__tests__/*",
-    "../src/**/*.test.*",
-    "../src/**/test.*",
-    "../src/**/examples.*"
-  ],
-  "references": []
-}
+	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__pragmatic-drag-and-drop-live-region/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": []
+}

afm-post-office/tsconfig.json

 {
-  "extends": "../../../../tsconfig.entry-points.post-office.json",
-  "compilerOptions": {
-    "target": "es5",
-    "outDir": "../../../../../tsDist/@atlaskit__pragmatic-drag-and-drop-live-region/app",
-    "composite": true,
-    "rootDir": "../"
-  },
-  "include": [
-    "../src/**/*.ts",
-    "../src/**/*.tsx"
-  ],
-  "exclude": [
-    "../src/**/__tests__/*",
-    "../src/**/*.test.*",
-    "../src/**/test.*",
-    "../src/**/examples.*"
-  ],
-  "references": []
-}
+	"extends": "../../../../tsconfig.entry-points.post-office.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../post-office/tsDist/@atlaskit__pragmatic-drag-and-drop-live-region/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": []
+}

CHANGELOG.md

 # @atlaskit/pragmatic-drag-and-drop-live-region
 
+## 1.2.0
+
+### Minor Changes
+
+- [#168054](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168054)
+  [`f9b89a52cbad6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f9b89a52cbad6) -
+  Changes announcement behavior to be delayed and polite instead of immediate and assertive. This
+  helps issues with announcements sometimes being skipped or interrupted.
+
 ## 1.1.0
@@ -4,0 +13,0 @@

dist/cjs/index.js

@@ -8,2 +8,3 @@ "use strict";
 exports.cleanup = cleanup;
+var _constants = require("./constants");
 var node = null;
@@ -35,3 +36,10 @@ var size = '1px';
   var node = document.createElement('div');
-  node.setAttribute('role', 'alert');
+  /**
+   * Using `role="status"` instead of `role="alert"` so that the message
+   * can be queued and read when able.
+   *
+   * We found with `role="alert"` the message was not reliably read when
+   * focus changed.
+   */
+  node.setAttribute('role', 'status');
   Object.assign(node.style, visuallyHiddenStyles);
@@ -51,2 +59,9 @@ document.body.append(node);
 }
+var timerId = null;
+function tryClearTimer() {
+  if (timerId !== null) {
+    clearTimeout(timerId);
+  }
+  timerId = null;
+}
 
@@ -57,4 +72,22 @@ /**
 function announce(message) {
-  var node = getNode();
-  node.textContent = message;
+  /**
+   * Calling this immediately to ensure a node exists and has time to be parsed
+   * and exposed in the accessibility tree.
+   */
+  getNode();
+
+  /**
+   * Updating the message in a timeout so that it's less likely to be interrupted.
+   *
+   * This function is often called right before focus changes,
+   * because the user has just taken an action.
+   * This focus change would often cause the message to be skipped / interrupted.
+   */
+  tryClearTimer();
+  timerId = setTimeout(function () {
+    timerId = null;
+    var node = getNode();
+    node.textContent = message;
+  }, _constants.announceDelay);
+  return;
 }
@@ -67,4 +100,5 @@
   var _node;
+  tryClearTimer();
   (_node = node) === null || _node === void 0 || _node.remove();
   node = null;
 }

dist/es2019/index.js

@@ -0,1 +1,2 @@
+import { announceDelay } from './constants';
 let node = null;
@@ -27,3 +28,10 @@ const size = '1px';
   const node = document.createElement('div');
-  node.setAttribute('role', 'alert');
+  /**
+   * Using `role="status"` instead of `role="alert"` so that the message
+   * can be queued and read when able.
+   *
+   * We found with `role="alert"` the message was not reliably read when
+   * focus changed.
+   */
+  node.setAttribute('role', 'status');
   Object.assign(node.style, visuallyHiddenStyles);
@@ -43,2 +51,9 @@ document.body.append(node);
 }
+let timerId = null;
+function tryClearTimer() {
+  if (timerId !== null) {
+    clearTimeout(timerId);
+  }
+  timerId = null;
+}
 
@@ -49,4 +64,22 @@ /**
 export function announce(message) {
-  const node = getNode();
-  node.textContent = message;
+  /**
+   * Calling this immediately to ensure a node exists and has time to be parsed
+   * and exposed in the accessibility tree.
+   */
+  getNode();
+
+  /**
+   * Updating the message in a timeout so that it's less likely to be interrupted.
+   *
+   * This function is often called right before focus changes,
+   * because the user has just taken an action.
+   * This focus change would often cause the message to be skipped / interrupted.
+   */
+  tryClearTimer();
+  timerId = setTimeout(() => {
+    timerId = null;
+    const node = getNode();
+    node.textContent = message;
+  }, announceDelay);
+  return;
 }
@@ -59,4 +92,5 @@
   var _node;
+  tryClearTimer();
   (_node = node) === null || _node === void 0 ? void 0 : _node.remove();
   node = null;
 }

dist/esm/index.js

@@ -0,1 +1,2 @@
+import { announceDelay } from './constants';
 var node = null;
@@ -27,3 +28,10 @@ var size = '1px';
   var node = document.createElement('div');
-  node.setAttribute('role', 'alert');
+  /**
+   * Using `role="status"` instead of `role="alert"` so that the message
+   * can be queued and read when able.
+   *
+   * We found with `role="alert"` the message was not reliably read when
+   * focus changed.
+   */
+  node.setAttribute('role', 'status');
   Object.assign(node.style, visuallyHiddenStyles);
@@ -43,2 +51,9 @@ document.body.append(node);
 }
+var timerId = null;
+function tryClearTimer() {
+  if (timerId !== null) {
+    clearTimeout(timerId);
+  }
+  timerId = null;
+}
 
@@ -49,4 +64,22 @@ /**
 export function announce(message) {
-  var node = getNode();
-  node.textContent = message;
+  /**
+   * Calling this immediately to ensure a node exists and has time to be parsed
+   * and exposed in the accessibility tree.
+   */
+  getNode();
+
+  /**
+   * Updating the message in a timeout so that it's less likely to be interrupted.
+   *
+   * This function is often called right before focus changes,
+   * because the user has just taken an action.
+   * This focus change would often cause the message to be skipped / interrupted.
+   */
+  tryClearTimer();
+  timerId = setTimeout(function () {
+    timerId = null;
+    var node = getNode();
+    node.textContent = message;
+  }, announceDelay);
+  return;
 }
@@ -59,4 +92,5 @@
   var _node;
+  tryClearTimer();
   (_node = node) === null || _node === void 0 || _node.remove();
   node = null;
 }

package.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-live-region",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "An optional package for Pragmatic drag and drop that enables screen reader messaging for alternative flows",
@@ -5,0 +5,0 @@ "publishConfig": {

tsconfig.dev.json

@@ -36,3 +36,3 @@ {
 		{
-			"path": "tsconfig.app.json"
+			"path": "./tsconfig.app.json"
 		},
@@ -39,0 +39,0 @@ {

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48330

increased by17.45%

Number of package files

35

increased by16.67%

Lines of code

836

increased by32.07%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes