dom-accessibility-api - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

CHANGELOG.md

 # dom-accessibility-api changelog
 
+## 0.5.2
+
+### Patch Changes
+
+- [`03273b7`](https://github.com/eps1lon/dom-accessibility-api/commit/03273b7d91a156a6dd9c727293a491cd2d1f02f1) [#406](https://github.com/eps1lon/dom-accessibility-api/pull/406) Thanks [@eps1lon](https://github.com/eps1lon)! - Fix various issues for input types `submit`, `reset` and `image`
+
+  Prefer input `value` when `type` is `reset` or `submit`:
+
+  ```diff
+  <input type="submit" value="Submit values">
+  -// accessible name: "Submit"
+  +// accessible name: "Submit values"
+  <input type="reset" value="Reset form">
+  -// accessible name: "Reset"
+  +// accessible name: "Reset form"
+  ```
+
+  For input `type` `image` consider `alt` attribute or fall back to `"Submit query"`.
+
 ## 0.5.1
@@ -4,0 +23,0 @@

dist/accessible-name-and-description.js

@@ -293,31 +293,26 @@ "use strict";
 
-  function computeAttributeTextAlternative(node) {
+  function computeElementTextAlternative(node) {
     if (!(0, _util.isElement)(node)) {
       return null;
     }
+    /**
+     *
+     * @param element
+     * @param attributeName
+     * @returns A string non-empty string or `null`
+     */
 
-    var titleAttribute = node.getAttributeNode("title");
 
-    if (titleAttribute !== null && titleAttribute.value.trim() !== "" && !consultedNodes.has(titleAttribute)) {
-      consultedNodes.add(titleAttribute);
-      return titleAttribute.value;
-    }
+    function useAttribute(element, attributeName) {
+      var attribute = element.getAttributeNode(attributeName);
 
-    var altAttribute = node.getAttributeNode("alt");
+      if (attribute !== null && !consultedNodes.has(attribute) && attribute.value.trim() !== "") {
+        consultedNodes.add(attribute);
+        return attribute.value;
+      }
 
-    if (altAttribute !== null && !consultedNodes.has(altAttribute)) {
-      consultedNodes.add(altAttribute);
-      return altAttribute.value;
-    }
+      return null;
+    } // https://w3c.github.io/html-aam/#fieldset-and-legend-elements
 
-    if ((0, _util.isHTMLInputElement)(node) && node.type === "button") {
-      consultedNodes.add(node);
-      return node.getAttribute("value") || "";
-    }
 
-    return null;
-  }
-
-  function computeElementTextAlternative(node) {
-    // https://w3c.github.io/html-aam/#fieldset-and-legend-elements
     if ((0, _util.isHTMLFieldSetElement)(node)) {
@@ -338,8 +333,4 @@ consultedNodes.add(node);
       }
-
-      return null;
-    } // https://w3c.github.io/html-aam/#table-element
-
-
-    if ((0, _util.isHTMLTableElement)(node)) {
+    } else if ((0, _util.isHTMLTableElement)(node)) {
+      // https://w3c.github.io/html-aam/#table-element
       consultedNodes.add(node);
@@ -360,8 +351,4 @@
       }
-
-      return null;
-    } // https://www.w3.org/TR/svg-aam-1.0/
-
-
-    if ((0, _util.isSVGSVGElement)(node)) {
+    } else if ((0, _util.isSVGSVGElement)(node)) {
+      // https://www.w3.org/TR/svg-aam-1.0/
       consultedNodes.add(node);
@@ -380,34 +367,70 @@
       return null;
-    }
+    } else if ((0, _util.getLocalName)(node) === "img" || (0, _util.getLocalName)(node) === "area") {
+      // https://w3c.github.io/html-aam/#area-element
+      // https://w3c.github.io/html-aam/#img-element
+      var nameFromAlt = useAttribute(node, "alt");
 
-    if (!((0, _util.isHTMLInputElement)(node) || (0, _util.isHTMLSelectElement)(node) || (0, _util.isHTMLTextAreaElement)(node))) {
-      return null;
+      if (nameFromAlt !== null) {
+        return nameFromAlt;
+      }
     }
 
-    var input = node; // https://w3c.github.io/html-aam/#input-type-text-input-type-password-input-type-search-input-type-tel-input-type-email-input-type-url-and-textarea-element-accessible-description-computation
+    if ((0, _util.isHTMLInputElement)(node) && (node.type === "button" || node.type === "submit" || node.type === "reset")) {
+      // https://w3c.github.io/html-aam/#input-type-text-input-type-password-input-type-search-input-type-tel-input-type-email-input-type-url-and-textarea-element-accessible-description-computation
+      var nameFromValue = useAttribute(node, "value");
 
-    if (input.type === "submit") {
-      return "Submit";
-    }
+      if (nameFromValue !== null) {
+        return nameFromValue;
+      } // TODO: l10n
 
-    if (input.type === "reset") {
-      return "Reset";
+
+      if (node.type === "submit") {
+        return "Submit";
+      } // TODO: l10n
+
+
+      if (node.type === "reset") {
+        return "Reset";
+      }
     }
 
-    var labels = getLabels(input);
+    if ((0, _util.isHTMLInputElement)(node) || (0, _util.isHTMLSelectElement)(node) || (0, _util.isHTMLTextAreaElement)(node)) {
+      var input = node;
+      var labels = getLabels(input);
 
-    if (labels === null || labels.length === 0) {
-      return null;
+      if (labels !== null && labels.length !== 0) {
+        consultedNodes.add(input);
+        return (0, _array.default)(labels).map(function (element) {
+          return computeTextAlternative(element, {
+            isEmbeddedInLabel: true,
+            isReferenced: false,
+            recursion: true
+          });
+        }).filter(function (label) {
+          return label.length > 0;
+        }).join(" ");
+      }
+    } // https://w3c.github.io/html-aam/#input-type-image-accessible-name-computation
+    // TODO: wpt test consider label elements but html-aam does not mention them
+    // We follow existing implementations over spec
+
+
+    if ((0, _util.isHTMLInputElement)(node) && node.type === "image") {
+      var _nameFromAlt = useAttribute(node, "alt");
+
+      if (_nameFromAlt !== null) {
+        return _nameFromAlt;
+      }
+
+      var nameFromTitle = useAttribute(node, "title");
+
+      if (nameFromTitle !== null) {
+        return nameFromTitle;
+      } // TODO: l10n
+
+
+      return "Submit Query";
     }
 
-    consultedNodes.add(input);
-    return (0, _array.default)(labels).map(function (element) {
-      return computeTextAlternative(element, {
-        isEmbeddedInLabel: true,
-        isReferenced: false,
-        recursion: true
-      });
-    }).filter(function (label) {
-      return label.length > 0;
-    }).join(" ");
+    return useAttribute(node, "title");
   }
@@ -470,9 +493,2 @@
         }
-
-        var attributeTextAlternative = computeAttributeTextAlternative(current);
-
-        if (attributeTextAlternative !== null) {
-          consultedNodes.add(current);
-          return attributeTextAlternative;
-        }
       }
@@ -479,0 +495,0 @@ } // 2E

dist/polyfills/SetLike.js

@@ -6,4 +6,2 @@ "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -15,44 +13,10 @@
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
-
-function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 // for environments without Set we fallback to arrays with unique members
-var SetLike = /*#__PURE__*/function (_Set) {
-  _inherits(SetLike, _Set);
-
-  var _super = _createSuper(SetLike);
-
+var SetLike = /*#__PURE__*/function () {
   function SetLike() {
-    var _this;
-
     _classCallCheck(this, SetLike);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "items", []);
-
-    return _this;
+    _defineProperty(this, "items", []);
   }
@@ -86,6 +50,6 @@
     value: function forEach(callbackfn) {
-      var _this2 = this;
+      var _this = this;
 
       this.items.forEach(function (item) {
-        callbackfn(item, item, _this2);
+        callbackfn(item, item, _this);
       });
@@ -106,3 +70,3 @@ }
   return SetLike;
-}( /*#__PURE__*/_wrapNativeSuper(Set));
+}();
 
@@ -109,0 +73,0 @@ var _default = typeof Set === "undefined" ? Set : SetLike;

dist/util.js

@@ -31,4 +31,6 @@ "use strict";
 
-  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();
+  return (// eslint-disable-next-line no-restricted-properties -- actual guard for environments without localName
+    (_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()
+  );
 }
@@ -35,0 +37,0 @@

package.json

 {
 	"name": "dom-accessibility-api",
-	"version": "0.5.1",
+	"version": "0.5.2",
 	"main": "dist/index.js",
@@ -44,3 +44,3 @@ "module": "dist/index.mjs",
 		"@babel/cli": "^7.10.5",
-		"@babel/core": "^7.11.1",
+		"@babel/core": "^7.11.4",
 		"@babel/plugin-proposal-class-properties": "^7.10.4",
@@ -51,13 +51,13 @@ "@babel/preset-env": "^7.11.0",
 		"@changesets/cli": "^2.10.1",
-		"@testing-library/dom": "^7.22.2",
+		"@testing-library/dom": "^7.22.5",
 		"@types/jest": "^26.0.10",
-		"@typescript-eslint/eslint-plugin": "^3.9.0",
-		"@typescript-eslint/parser": "^3.8.1",
+		"@typescript-eslint/eslint-plugin": "^3.10.1",
+		"@typescript-eslint/parser": "^3.9.1",
 		"concurrently": "^5.3.0",
 		"cross-env": "^7.0.2",
-		"cypress": "^4.12.1",
+		"cypress": "^5.0.0",
 		"eslint": "^7.7.0",
 		"eslint-plugin-jest": "^23.20.0",
-		"jest": "^26.4.0",
-		"jest-diff": "^26.4.0",
+		"jest": "^26.4.2",
+		"jest-diff": "^26.4.2",
 		"jest-environment-jsdom": "^26.3.0",
@@ -76,3 +76,3 @@ "jest-junit": "^11.1.0",
 		"serve": "^11.3.2",
-		"typescript": "^3.9.7"
+		"typescript": "^4.0.2"
 	},
@@ -79,0 +79,0 @@ "resolutions": {

No alert changes

Worsened metrics

Total package byte prevSize

223333

decreased by-1.3%

Lines of code

1798

decreased by-0.99%

No dependency changes