@github/details-menu-element - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/index.esm.js

@@ -74,3 +74,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 function sibling(details, next) {
-  var options = Array.from(details.querySelectorAll('[role="menuitem"]:not([hidden])'));
+  var options = Array.from(details.querySelectorAll('[role^="menuitem"]:not([hidden])'));
   var selected = document.activeElement;
@@ -95,8 +95,46 @@ var index = options.indexOf(selected);
 
-  var item = target.closest('[role="menuitem"]');
+  var item = target.closest('[role^="menuitem"]');
   if (item) commit(item, details);
 }
 
+function isCheckable(el) {
+  var role = el.getAttribute('role');
+  return role === 'menuitemradio' || role === 'menuitemcheckbox';
+}
+
+function updateChecked(selected, details) {
+  if (!isCheckable(selected)) return;
+
+  if (selected.getAttribute('role') === 'menuitemradio') {
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+      for (var _iterator = details.querySelectorAll('[role="menuitemradio"]')[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var el = _step.value;
+
+        el.setAttribute('aria-checked', 'false');
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+  }
+  selected.setAttribute('aria-checked', 'true');
+}
+
 function commit(selected, details) {
   updateLabel(selected, details);
+  updateChecked(selected, details);
   close(details);
@@ -141,3 +179,3 @@ selected.dispatchEvent(new CustomEvent('details-menu-selected', { bubbles: true }));
         var selected = document.activeElement;
-        if (selected && selected.getAttribute('role') === 'menuitem' && selected.closest('details') === details) {
+        if (selected && isMenuItem(selected) && selected.closest('details') === details) {
           event.preventDefault();
@@ -153,2 +191,7 @@ event.stopPropagation();
 
+function isMenuItem(el) {
+  var role = el.getAttribute('role');
+  return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio';
+}
+
 function close(details) {
@@ -155,0 +198,0 @@ ;details.open = false;

dist/index.umd.js

@@ -133,3 +133,3 @@ (function (global, factory) {
   function sibling(details, next) {
-    var options = Array.from(details.querySelectorAll('[role="menuitem"]:not([hidden])'));
+    var options = Array.from(details.querySelectorAll('[role^="menuitem"]:not([hidden])'));
     var selected = document.activeElement;
@@ -154,8 +154,46 @@ var index = options.indexOf(selected);
 
-    var item = target.closest('[role="menuitem"]');
+    var item = target.closest('[role^="menuitem"]');
     if (item) commit(item, details);
   }
 
+  function isCheckable(el) {
+    var role = el.getAttribute('role');
+    return role === 'menuitemradio' || role === 'menuitemcheckbox';
+  }
+
+  function updateChecked(selected, details) {
+    if (!isCheckable(selected)) return;
+
+    if (selected.getAttribute('role') === 'menuitemradio') {
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (var _iterator = details.querySelectorAll('[role="menuitemradio"]')[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var el = _step.value;
+
+          el.setAttribute('aria-checked', 'false');
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+    }
+    selected.setAttribute('aria-checked', 'true');
+  }
+
   function commit(selected, details) {
     updateLabel(selected, details);
+    updateChecked(selected, details);
     close(details);
@@ -200,3 +238,3 @@ selected.dispatchEvent(new CustomEvent('details-menu-selected', { bubbles: true }));
           var selected = document.activeElement;
-          if (selected && selected.getAttribute('role') === 'menuitem' && selected.closest('details') === details) {
+          if (selected && isMenuItem(selected) && selected.closest('details') === details) {
             event.preventDefault();
@@ -212,2 +250,7 @@ event.stopPropagation();
 
+  function isMenuItem(el) {
+    var role = el.getAttribute('role');
+    return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio';
+  }
+
   function close(details) {
@@ -214,0 +257,0 @@ ;details.open = false;

package.json

 {
   "name": "@github/details-menu-element",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A menu opened with a <details> button.",
@@ -5,0 +5,0 @@ "main": "dist/index.umd.js",

README.md

@@ -30,2 +30,17 @@ # <details-menu> element
 
+Use `data-menu-button` and `data-menu-button-text` to have button text updated on menu item activation.
+
+```html
+<details>
+  <summary>Preferred robot: <span data-menu-button>None</span></summary>
+  <details-menu>
+    <ul>
+      <li><button type="button" role="menuitem" data-menu-button-text>Hubot</button></li>
+      <li><button type="button" role="menuitem" data-menu-button-text>Bender</button></li>
+      <li><button type="button" role="menuitem" data-menu-button-text>BB-8</button></li>
+    </ul>
+  </details-menu>
+</details>
+```
+
 ### Deferred loading
@@ -32,0 +47,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20426

increased by17.78%

Lines of code

419

increased by21.45%

Number of lines in readme file

87

increased by20.83%

No dependency changes