diff --git a/examples/index.html b/examples/index.html
index 48ae4f7..bfc39ca 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -22,10 +22,14 @@
text-align: left;
padding: 0;
}
+ [aria-disabled="true"] {
+ color: gray;
+ }
- Base examples
+ Examples
+ Base examples
Best robot: Unknown
@@ -69,7 +73,19 @@ Base examples
- Autofocus example
+ `aria-disabled="true" example
+ menu items with aria-disabled="true" should be keyboard navigable
+
+ Least favorite robots
+
+
+
+
+
+
+
+
+ Autofocus example
summary may have autofocus so it's the initially focused element in the page.
Then any focusable element inside the popup can declare autofocus too, so it gets focus when the popup is opened.
diff --git a/src/index.ts b/src/index.ts
index 81a4cf1..43d32fc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -147,11 +147,7 @@ function focusFirstItem(details: Element) {
}
function sibling(details: Element, next: boolean): HTMLElement | null {
- const options = Array.from(
- details.querySelectorAll(
- '[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])'
- )
- )
+ const options = Array.from(details.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled])'))
const selected = document.activeElement
const index = selected instanceof HTMLElement ? options.indexOf(selected) : -1
const found = next ? options[index + 1] : options[index - 1]
diff --git a/test/test.js b/test/test.js
index 20ff162..3d2d339 100644
--- a/test/test.js
+++ b/test/test.js
@@ -90,7 +90,7 @@ describe('details-menu element', function () {
summary.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowUp', bubbles: true}))
assert(details.open, 'menu is open')
- const last = [...details.querySelectorAll('[role="menuitem"]:not([disabled]):not([aria-disabled])')].pop()
+ const last = [...details.querySelectorAll('[role="menuitem"]:not([disabled])')].pop()
assert.equal(last, document.activeElement, 'arrow focuses last item')
})
@@ -219,7 +219,7 @@ describe('details-menu element', function () {
summary.dispatchEvent(new MouseEvent('click', {bubbles: true}))
details.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowUp', bubbles: true}))
- const notDisabled = details.querySelectorAll('[role="menuitem"]')[2]
+ const notDisabled = details.querySelectorAll('[role="menuitem"]')[3]
assert.equal(notDisabled, document.activeElement, 'arrow focuses on the last non-disabled item')
const disabled = details.querySelector('[aria-disabled="true"]')
@@ -423,7 +423,6 @@ describe('details-menu element', function () {
Click
-