From d071704db6a2a8b6f0443c1054f4157b9b641588 Mon Sep 17 00:00:00 2001 From: Mu-An Chiou Date: Wed, 3 Jun 2020 16:53:13 -0400 Subject: [PATCH 1/7] Set return type --- src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index 1fb42d8..a0bd02f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -23,7 +23,7 @@ class DetailsMenuElement extends HTMLElement { this.setAttribute('src', value) } - connectedCallback() { + connectedCallback(): void { if (!this.hasAttribute('role')) this.setAttribute('role', 'menu') const details = this.parentElement @@ -52,7 +52,7 @@ class DetailsMenuElement extends HTMLElement { states.set(this, {subscriptions, loaded: false, isComposing: false}) } - disconnectedCallback() { + disconnectedCallback(): void { const state = states.get(this) if (!state) return states.delete(this) From e2e6387c1e51838fc841f5f4a5a194472d57724b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 16 Jul 2020 07:15:06 +0000 Subject: [PATCH 2/7] Bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.19) Signed-off-by: dependabot[bot] --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3a3e07d..ce3cdf5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2019,9 +2019,9 @@ } }, "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", + "version": "4.17.19", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", + "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==", "dev": true }, "log-symbols": { From 91ca4ded83a0cbe6f767883e535b3304fc5d906a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20N=C3=BA=C3=B1ez?= Date: Tue, 20 Jul 2021 17:24:43 +0200 Subject: [PATCH 3/7] Ignore summary when focusing to autofocus in the popup If the dropdown itself is the `autofocus` field in the page, then `` fails to set focus to any other `autofocus` element in the popup when displaying it. Reason being that the selector matches first the `

` and wrongly sets focus to it instead. --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index a0bd02f..0d28582 100644 --- a/src/index.ts +++ b/src/index.ts @@ -132,7 +132,7 @@ function closeCurrentMenu(details: Element) { function autofocus(details: Element): boolean { if (!details.hasAttribute('open')) return false - const input = details.querySelector('[autofocus]') + const input = details.querySelector('details-menu [autofocus]') if (input) { input.focus() return true From a0168677e671041099f1b06423297652eb64d807 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20N=C3=BA=C3=B1ez?= Date: Tue, 20 Jul 2021 17:53:09 +0200 Subject: [PATCH 4/7] Add example of autofocus --- examples/index.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/examples/index.html b/examples/index.html index a3f4e7a..57a5ee8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -24,6 +24,8 @@ +

Base examples

Best robot: Unknown

@@ -60,6 +62,20 @@

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.

+ +

Autofocus picker

+ + + + + + +

+ From 6c5c99e8f8cb057509dbb309190d44cd564c8325 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20N=C3=BA=C3=B1ez?= Date: Wed, 21 Jul 2021 11:36:06 +0200 Subject: [PATCH 5/7] Add test for the fixed scenario. --- test/test.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/test/test.js b/test/test.js index 052ae69..4c77ca8 100644 --- a/test/test.js +++ b/test/test.js @@ -601,6 +601,22 @@ describe('details-menu element', function () { assert.equal(input, document.activeElement, 'toggle open focuses on [autofocus]') }) + + it('summary autofocus should not impact with inner autofocus element', function () { + const details = document.querySelector('details') + const summary = details.querySelector('summary') + const input = details.querySelector('input') + + // Summary is the initial element of the entire page, while input is the initial element in the popup + summary.setAttribute('autofocus', '') + + summary.focus() + details.open = true + summary.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true})) + details.dispatchEvent(new CustomEvent('toggle')) + + assert.equal(document.activeElement, input, 'toggle open focuses on [autofocus]') + }) }) describe('closing the menu', function () { From 342e80f7e6a8c9b641111c5d56cfdcd5c81b1588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20N=C3=BA=C3=B1ez?= Date: Wed, 21 Jul 2021 11:37:36 +0200 Subject: [PATCH 6/7] Drop placeholder. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Kristján Oddsson --- examples/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/index.html b/examples/index.html index 57a5ee8..5d985dd 100644 --- a/examples/index.html +++ b/examples/index.html @@ -69,7 +69,7 @@

Autofocus example

Autofocus picker

- + From 03d0c3d16965eba800b73da15e82e8c8748fa063 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 21 Jul 2021 10:56:13 +0100 Subject: [PATCH 7/7] 1.0.10 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index ce3cdf5..895a4cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@github/details-menu-element", - "version": "1.0.9", + "version": "1.0.10", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b1d88aa..eb550f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@github/details-menu-element", - "version": "1.0.9", + "version": "1.0.10", "description": "A menu opened with a

button.", "main": "dist/index.js", "module": "dist/index.js",