dom-accessibility-api
Advanced tools
Comparing version 0.4.7 to 0.5.0
# 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 @@ |
@@ -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 @@ } |
@@ -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); |
@@ -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"; |
@@ -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; |
"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 @@ /** |
{ | ||
"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", |
@@ -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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
224489
1816
32