dom-accessibility-api - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

CHANGELOG.md

 # dom-accessibility-api changelog
 
+## 0.5.4
+
+### Patch Changes
+
+- [`3866289`](https://github.com/eps1lon/dom-accessibility-api/commit/3866289a6ad92b73a8c031a2983165e1b1f2b24c) [#442](https://github.com/eps1lon/dom-accessibility-api/pull/442) Thanks [@geoffrich](https://github.com/geoffrich)! - Correctly determine accessible name when element contains a slot.
+
+  Previously, computing the accessible name would only examine child nodes. However, content placed in a slot is is an assigned node, not a child node.
+
+  If you have a custom element `custom-button` with a slot:
+
+  ```html
+  <button><slot></slot></button>
+
+  <!-- accname of inner <button> is 'Custom name' (previously '') -->
+  <custom-button>Custom name</custom-button>
+  ```
+
+  If you have a custom element `custom-button-default` with default content in the slot:
+
+  ```html
+  <button><slot>Default name</slot></button>
+
+  <!-- accname of inner <button> is 'Custom name' (previously 'Default name') -->
+  <custom-button-default>Custom name</custom-button-default>
+
+  <!-- accname of inner <button> is 'Default name' (previously 'Default name') -->
+  <custom-button-default></custom-button-default>
+  ```
+
+  This is not currently defined in the accname spec but reflects current browser behavior.
+
 ## 0.5.3
@@ -4,0 +35,0 @@

dist/accessible-name-and-description.d.ts

@@ -17,5 +17,5 @@ /**
  * @param [options]
- * @parma [options.getComputedStyle] - mock window.getComputedStyle. Needs `content`, `display` and `visibility`
+ * @param [options.getComputedStyle] - mock window.getComputedStyle. Needs `content`, `display` and `visibility`
  */
 export declare function computeTextAlternative(root: Element, options?: ComputeTextAlternativeOptions): string;
 //# sourceMappingURL=accessible-name-and-description.d.ts.map

dist/accessible-name-and-description.js

@@ -240,6 +240,25 @@ "use strict";
 /**
+ * Gets the contents of a slot used for computing the accname
+ * @param slot
+ */
+
+
+function getSlotContents(slot) {
+  // Computing the accessible name for elements containing slots is not
+  // currently defined in the spec. This implementation reflects the
+  // behavior of NVDA 2020.2/Firefox 81 and iOS VoiceOver/Safari 13.6.
+  var assignedNodes = slot.assignedNodes();
+
+  if (assignedNodes.length === 0) {
+    // if no nodes are assigned to the slot, it displays the default content
+    return (0, _array.default)(slot.childNodes);
+  }
+
+  return assignedNodes;
+}
+/**
  * implements https://w3c.github.io/accname/#mapping_additional_nd_te
  * @param root
  * @param [options]
- * @parma [options.getComputedStyle] - mock window.getComputedStyle. Needs `content`, `display` and `visibility`
+ * @param [options.getComputedStyle] - mock window.getComputedStyle. Needs `content`, `display` and `visibility`
  */
@@ -266,7 +285,7 @@
       accumulatedText = "".concat(beforeContent, " ").concat(accumulatedText);
-    } // FIXME: This is not defined in the spec
+    } // FIXME: Including aria-owns is not defined in the spec
     // But it is required in the web-platform-test
 
 
-    var childNodes = (0, _array.default)(node.childNodes).concat((0, _util.queryIdRefs)(node, "aria-owns"));
+    var childNodes = (0, _util.isHTMLSlotElement)(node) ? getSlotContents(node) : (0, _array.default)(node.childNodes).concat((0, _util.queryIdRefs)(node, "aria-owns"));
     childNodes.forEach(function (child) {
@@ -273,0 +292,0 @@ var result = computeTextAlternative(child, {

dist/util.d.ts

@@ -15,2 +15,3 @@ /**
 export declare function isHTMLLegendElement(node: Node | null): node is HTMLLegendElement;
+export declare function isHTMLSlotElement(node: Node | null): node is HTMLSlotElement;
 export declare function isSVGElement(node: Node | null): node is SVGElement;
@@ -17,0 +18,0 @@ export declare function isSVGSVGElement(node: Node | null): node is SVGSVGElement;

dist/util.js

@@ -14,2 +14,3 @@ "use strict";
 exports.isHTMLLegendElement = isHTMLLegendElement;
+exports.isHTMLSlotElement = isHTMLSlotElement;
 exports.isSVGElement = isSVGElement;
@@ -81,2 +82,6 @@ exports.isSVGSVGElement = isSVGSVGElement;
 
+function isHTMLSlotElement(node) {
+  return isElement(node) && getLocalName(node) === "slot";
+}
+
 function isSVGElement(node) {
@@ -83,0 +88,0 @@ return isElement(node) && node.ownerSVGElement !== undefined;

package.json

 {
 	"name": "dom-accessibility-api",
-	"version": "0.5.3",
+	"version": "0.5.4",
 	"main": "dist/index.js",
@@ -56,3 +56,3 @@ "module": "dist/index.mjs",
 		"cross-env": "^7.0.2",
-		"cypress": "^5.2.0",
+		"cypress": "^5.3.0",
 		"eslint": "^7.10.0",
@@ -63,3 +63,3 @@ "eslint-plugin-jest": "^24.0.2",
 		"jest-environment-jsdom": "^26.3.0",
-		"jest-junit": "^11.1.0",
+		"jest-junit": "^12.0.0",
 		"js-yaml": "^3.14.0",
@@ -66,0 +66,0 @@ "jsdom": "^16.4.0",

No alert changes

Improved metrics

Total package byte prevSize

242933

increased by2.35%

Lines of code

1915

increased by2.02%

No dependency changes