Test focus management

test/test.js

@@ -26,6 +26,9 @@ describe('details-dialog-element', function() {
           <summary>Click</summary>
           <details-dialog>
             <p>Hello</p>
+            <button data-button>Button</button>
+            <button hidden>hidden</button>
+            <div hidden><button>hidden</button></div>
             <button ${CLOSE_ATTR}>Goodbye</button>
           </details-dialog>
         </details>
@@ -75,6 +78,16 @@ describe('details-dialog-element', function() {
       assert(!details.open)
     })
 
+    it('manages focus', async function() {
+      summary.click()
+      await waitForToggleEvent(details)
+      assert.equal(document.activeElement, dialog)
+      pressTab(details)
+      assert.equal(document.activeElement, document.querySelector(`[data-button]`))
+      pressTab(details)
+      assert.equal(document.activeElement, document.querySelector(`[${CLOSE_ATTR}]`))
+    })
+
     it('supports a cancellable details-dialog:will-close event when a summary element is present', async function() {
       dialog.toggle(true)
       await waitForToggleEvent(details)
@@ -202,3 +215,10 @@ function pressEscape(details) {
   escapeEvent.key = 'Escape'
   details.dispatchEvent(escapeEvent)
 }
+
+function pressTab(details) {
+  const escapeEvent = document.createEvent('Event')
+  escapeEvent.initEvent('keydown', true, true)
+  escapeEvent.key = 'Tab'
+  details.dispatchEvent(escapeEvent)
+}