dom-accessibility-api - npm Package Compare versions

Comparing version 0.4.7 to 0.5.0

CHANGELOG.md

 # dom-accessibility-api changelog
 
+## 0.5.0
+
+### Minor Changes
+
+- [`9e46c51`](https://github.com/eps1lon/dom-accessibility-api/commit/9e46c51b51993c65237efd4b0d046f1a35c3e76a) [#380](https://github.com/eps1lon/dom-accessibility-api/pull/380) Thanks [@eps1lon](https://github.com/eps1lon)! - **BREAKING CHANGE**
+
+  Ignore `::before` and `::after` by default.
+
+  This was necessary to prevent excessive warnings in `jsdom@^16.4.0`.
+  If you use this package in a browser that supports the second argument of `window.getComputedStyle` you can set the `computedStyleSupportsPseudoElements` option to true:
+
+  ```ts
+  computeAccessibleName(element, {
+  	computedStyleSupportsPseudoElements: true
+  });
+
+  computeAccessibleDescription(element, {
+  	computedStyleSupportsPseudoElements: true
+  });
+  ```
+
+  If you pass a custom implementation of `getComputedStyle` then this option defaults to `true`.
+  The following two calls are equivalent:
+
+  ```ts
+  computeAccessibleName(element, {
+  	computedStyleSupportsPseudoElements: true
+  });
+
+  computeAccessibleName(element, {
+  	getComputedStyle: (element, pseudoElement) => {
+  		// custom implementation
+  	}
+  });
+  ```
+
+### Patch Changes
+
+- [`5db24b1`](https://github.com/eps1lon/dom-accessibility-api/commit/5db24b1fa0c75a5914526de1c58da54db294f405) [#368](https://github.com/eps1lon/dom-accessibility-api/pull/368) Thanks [@eps1lon](https://github.com/eps1lon)! - Use `localName` to determine elements instead of `tagName`.
+
 ## 0.4.7
@@ -4,0 +44,0 @@

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

@@ -6,2 +6,7 @@ /**
     compute?: "description" | "name";
+    /**
+     * Set to true if window.computedStyle supports the second argument.
+     * This should be false in JSDOM. Otherwise JSDOM will log console errors.
+     */
+    computedStyleSupportsPseudoElements?: boolean;
     getComputedStyle?: typeof window.getComputedStyle;
@@ -8,0 +13,0 @@ }

dist/accessible-name-and-description.js

@@ -165,4 +165,4 @@ "use strict";
 function isLabelableElement(element) {
-  var tagName = element.tagName;
-  return tagName === "BUTTON" || tagName === "INPUT" && element.getAttribute("type") !== "hidden" || tagName === "METER" || tagName === "OUTPUT" || tagName === "PROGRESS" || tagName === "SELECT" || tagName === "TEXTAREA";
+  var localName = (0, _util.getLocalName)(element);
+  return localName === "button" || localName === "input" && element.getAttribute("type") !== "hidden" || localName === "meter" || localName === "output" || localName === "progress" || localName === "select" || localName === "textarea";
 }
@@ -254,2 +254,4 @@ /**
       compute = _options$compute === void 0 ? "name" : _options$compute,
+      _options$computedStyl = options.computedStyleSupportsPseudoElements,
+      computedStyleSupportsPseudoElements = _options$computedStyl === void 0 ? options.getComputedStyle !== undefined : _options$computedStyl,
       _options$getComputedS = options.getComputedStyle,
@@ -261,3 +263,3 @@ getComputedStyle = _options$getComputedS === void 0 ? window.getComputedStyle.bind(window) : _options$getComputedS; // 2F.i
 
-    if ((0, _util.isElement)(node)) {
+    if ((0, _util.isElement)(node) && computedStyleSupportsPseudoElements) {
       var pseudoBefore = getComputedStyle(node, "::before");
@@ -285,4 +287,4 @@ var beforeContent = getTextualContent(pseudoBefore);
 
-    if ((0, _util.isElement)(node)) {
-      var pseudoAfter = getComputedStyle(node, ":after");
+    if ((0, _util.isElement)(node) && computedStyleSupportsPseudoElements) {
+      var pseudoAfter = getComputedStyle(node, "::after");
       var afterContent = getTextualContent(pseudoAfter);
@@ -289,0 +291,0 @@ accumulatedText = "".concat(accumulatedText, " ").concat(afterContent);

dist/getRole.js

@@ -6,2 +6,4 @@ "use strict";
 
+var _util = require("./util");
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -19,3 +21,2 @@
 
-// https://w3c.github.io/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html
 function getRole(element) {
@@ -31,54 +32,54 @@ var explicitRole = getExplicitRole(element);
 
-var tagToRoleMappings = {
-  ARTICLE: "article",
-  ASIDE: "complementary",
-  BODY: "document",
-  BUTTON: "button",
-  DATALIST: "listbox",
-  DD: "definition",
-  DETAILS: "group",
-  DIALOG: "dialog",
-  DT: "term",
-  FIELDSET: "group",
-  FIGURE: "figure",
+var localNameToRoleMappings = {
+  article: "article",
+  aside: "complementary",
+  body: "document",
+  button: "button",
+  datalist: "listbox",
+  dd: "definition",
+  details: "group",
+  dialog: "dialog",
+  dt: "term",
+  fieldset: "group",
+  figure: "figure",
   // WARNING: Only with an accessible name
-  FORM: "form",
-  FOOTER: "contentinfo",
-  H1: "heading",
-  H2: "heading",
-  H3: "heading",
-  H4: "heading",
-  H5: "heading",
-  H6: "heading",
-  HEADER: "banner",
-  HR: "separator",
-  LEGEND: "legend",
-  LI: "listitem",
-  MATH: "math",
-  MAIN: "main",
-  MENU: "list",
-  NAV: "navigation",
-  OL: "list",
-  OPTGROUP: "group",
+  form: "form",
+  footer: "contentinfo",
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  h5: "heading",
+  h6: "heading",
+  header: "banner",
+  hr: "separator",
+  legend: "legend",
+  li: "listitem",
+  math: "math",
+  main: "main",
+  menu: "list",
+  nav: "navigation",
+  ol: "list",
+  optgroup: "group",
   // WARNING: Only in certain context
-  OPTION: "option",
-  OUTPUT: "status",
-  PROGRESS: "progressbar",
+  option: "option",
+  output: "status",
+  progress: "progressbar",
   // WARNING: Only with an accessible name
-  SECTION: "region",
-  SUMMARY: "button",
-  TABLE: "table",
-  TBODY: "rowgroup",
-  TEXTAREA: "textbox",
-  TFOOT: "rowgroup",
+  section: "region",
+  summary: "button",
+  table: "table",
+  tbody: "rowgroup",
+  textarea: "textbox",
+  tfoot: "rowgroup",
   // WARNING: Only in certain context
-  TD: "cell",
-  TH: "columnheader",
-  THEAD: "rowgroup",
-  TR: "row",
-  UL: "list"
+  td: "cell",
+  th: "columnheader",
+  thead: "rowgroup",
+  tr: "row",
+  ul: "list"
 };
 
 function getImplicitRole(element) {
-  var mappedByTag = tagToRoleMappings[element.tagName];
+  var mappedByTag = localNameToRoleMappings[(0, _util.getLocalName)(element)];
 
@@ -89,6 +90,6 @@ if (mappedByTag !== undefined) {
 
-  switch (element.tagName) {
-    case "A":
-    case "AREA":
-    case "LINK":
+  switch ((0, _util.getLocalName)(element)) {
+    case "a":
+    case "area":
+    case "link":
       if (element.hasAttribute("href")) {
@@ -100,3 +101,3 @@ return "link";
 
-    case "IMG":
+    case "img":
       if ((element.getAttribute("alt") || "").length > 0) {
@@ -108,3 +109,3 @@ return "img";
 
-    case "INPUT":
+    case "input":
       {
@@ -150,3 +151,3 @@ var _ref = element,
 
-    case "SELECT":
+    case "select":
       if (element.hasAttribute("multiple") || element.size > 1) {
@@ -153,0 +154,0 @@ return "listbox";

dist/util.d.ts

@@ -0,1 +1,6 @@
+/**
+ * Safe Element.localName for all supported environments
+ * @param element
+ */
+export declare function getLocalName(element: Element): string;
 export declare function isElement(node: Node | null): node is Element;
@@ -2,0 +7,0 @@ export declare function isHTMLTableCaptionElement(node: Node | null): node is HTMLTableCaptionElement;

dist/util.js

 "use strict";
 
 exports.__esModule = true;
+exports.getLocalName = getLocalName;
 exports.isElement = isElement;
@@ -23,2 +24,13 @@ exports.isHTMLTableCaptionElement = isHTMLTableCaptionElement;
 
+/**
+ * Safe Element.localName for all supported environments
+ * @param element
+ */
+function getLocalName(element) {
+  var _element$localName;
+
+  return (_element$localName = element.localName) !== null && _element$localName !== void 0 ? _element$localName : // eslint-disable-next-line no-restricted-properties -- required for the fallback
+  element.tagName.toLowerCase();
+}
+
 function isElement(node) {
@@ -29,19 +41,19 @@ return node !== null && node.nodeType === node.ELEMENT_NODE;
 function isHTMLTableCaptionElement(node) {
-  return isElement(node) && node.tagName === "CAPTION";
+  return isElement(node) && getLocalName(node) === "caption";
 }
 
 function isHTMLInputElement(node) {
-  return isElement(node) && node.tagName === "INPUT";
+  return isElement(node) && getLocalName(node) === "input";
 }
 
 function isHTMLSelectElement(node) {
-  return isElement(node) && node.tagName === "SELECT";
+  return isElement(node) && getLocalName(node) === "select";
 }
 
 function isHTMLTableElement(node) {
-  return isElement(node) && node.tagName === "TABLE";
+  return isElement(node) && getLocalName(node) === "table";
 }
 
 function isHTMLTextAreaElement(node) {
-  return isElement(node) && node.tagName === "TEXTAREA";
+  return isElement(node) && getLocalName(node) === "textarea";
 }
@@ -61,7 +73,7 @@
 function isHTMLFieldSetElement(node) {
-  return isElement(node) && node.tagName === "FIELDSET";
+  return isElement(node) && getLocalName(node) === "fieldset";
 }
 
 function isHTMLLegendElement(node) {
-  return isElement(node) && node.tagName === "LEGEND";
+  return isElement(node) && getLocalName(node) === "legend";
 }
@@ -74,7 +86,7 @@
 function isSVGSVGElement(node) {
-  return isElement(node) && node.tagName === "svg";
+  return isElement(node) && getLocalName(node) === "svg";
 }
 
 function isSVGTitleElement(node) {
-  return isSVGElement(node) && node.tagName === "title";
+  return isSVGElement(node) && getLocalName(node) === "title";
 }
@@ -81,0 +93,0 @@ /**

package.json

 {
 	"name": "dom-accessibility-api",
-	"version": "0.4.7",
+	"version": "0.5.0",
 	"main": "dist/index.js",
@@ -27,3 +27,3 @@ "module": "dist/index.mjs",
 		"format": "prettier \"**/*.{json,js,md,ts,yml}\" --write --ignore-path .prettierignore",
-		"lint": "eslint --report-unused-disable-directives \"sources/**/*.{js,ts}\"",
+		"lint": "eslint --report-unused-disable-directives \"{scripts,sources}/**/*.{js,ts}\"",
 		"release": "yarn build && yarn changeset publish",
@@ -45,24 +45,25 @@ "test": "jest --config scripts/jest/jest.config.js",
 		"@babel/cli": "^7.10.5",
-		"@babel/core": "^7.10.5",
+		"@babel/core": "^7.11.1",
 		"@babel/plugin-proposal-class-properties": "^7.10.4",
-		"@babel/preset-env": "^7.10.4",
+		"@babel/preset-env": "^7.11.0",
 		"@babel/preset-typescript": "^7.10.4",
 		"@changesets/changelog-github": "^0.2.6",
-		"@changesets/cli": "^2.9.2",
-		"@testing-library/dom": "^7.21.5",
-		"@types/jest": "^26.0.7",
-		"@typescript-eslint/eslint-plugin": "^3.7.0",
-		"@typescript-eslint/parser": "^3.7.0",
-		"concurrently": "^5.2.0",
+		"@changesets/cli": "^2.10.0",
+		"@testing-library/dom": "^7.22.0",
+		"@types/jest": "^26.0.9",
+		"@typescript-eslint/eslint-plugin": "^3.8.0",
+		"@typescript-eslint/parser": "^3.8.1",
+		"concurrently": "^5.3.0",
 		"cross-env": "^7.0.2",
-		"cypress": "^4.11.0",
-		"eslint": "^7.5.0",
-		"eslint-plugin-jest": "^23.18.2",
-		"jest": "^26.1.0",
+		"cypress": "^4.12.1",
+		"eslint": "^7.6.0",
+		"eslint-plugin-jest": "^23.20.0",
+		"jest": "^26.2.2",
 		"jest-diff": "^26.1.0",
+		"jest-environment-jsdom": "^26.2.0",
 		"jest-junit": "^11.1.0",
 		"js-yaml": "^3.14.0",
-		"jsdom": "^16.3.0",
+		"jsdom": "^16.4.0",
 		"minimatch": "^3.0.4",
-		"mocha": "^8.0.1",
+		"mocha": "^8.1.1",
 		"mocha-sugar-free": "^1.4.0",
@@ -69,0 +70,0 @@ "prettier": "^2.0.5",

README.md

@@ -26,3 +26,3 @@ # dom-accessibility-api
 
-WARNING: Only [active node versions](https://nodejs.org/en/about/releases/) are supported.
+**WARNING**: Only [active node versions](https://nodejs.org/en/about/releases/) are supported.
 Inactive node versions can stop working in a SemVer MINOR release.
@@ -53,3 +53,3 @@
 <details>
-<summary>report 138/159 passing of which 15 are due `::before { content }`, one might a wrong test, 5 are pathological </summary>
+<summary>report 138/159 passing of which 15 are due `::before { content }`, one might be a wrong test, 5 are pathological </summary>
 
@@ -56,0 +56,0 @@ ```bash

No alert changes

Improved metrics

Total package byte prevSize

224489

increased by2.81%

Lines of code

1816

increased by1.91%

Worsened metrics

Dev dependency count

32

increased by3.23%

No dependency changes