-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2425 from bitzesty/focus-management-appear-disappear
Focus management
- Loading branch information
Showing
56 changed files
with
294 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| web: bundle exec rake cf:run_migrations db:migrate && bin/rails server -p $PORT | ||
| worker: bundle exec sidekiq -L ./log/worker.log -C ./config/sidekiq.yml | ||
| webpack: bin/webpack-dev-server |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| FOCUSABLE_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)' | ||
| FOCUSABLE_FORM_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled])' | ||
|
|
||
| window.FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS | ||
| window.FOCUSABLE_FORM_ELEMENTS = FOCUSABLE_FORM_ELEMENTS | ||
|
|
||
| visible = (el) -> | ||
| !el.hidden and (!el.type or el.type != 'hidden') and (el.offsetWidth > 0 or el.offsetHeight > 0) | ||
|
|
||
| focusable = (el) -> | ||
| el.tabIndex >= 0 and !el.disabled and visible(el) | ||
|
|
||
| window.focusElement = (el, elements = FOCUSABLE_ELEMENTS) -> | ||
| autofocusElement = Array.from(el.querySelectorAll(elements)).filter(focusable)[0] | ||
| if autofocusElement | ||
| autofocusElement.focus() | ||
| return | ||
|
|
||
| window.autofocusElement = (el) -> | ||
| autofocusElement = Array.from(el.querySelectorAll('[autofocus]')).filter(focusable)[0] | ||
| if !autofocusElement | ||
| autofocusElement = el | ||
| el.setAttribute('tabindex', '-1') | ||
| autofocusElement.focus() | ||
| return |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { Application } from '@hotwired/stimulus'; | ||
| import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers'; | ||
|
|
||
| const application = Application.start(); | ||
| const context = require.context('controllers', true, /_controller\.js$/); | ||
| application.load(definitionsFromContext(context)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { Controller } from '@hotwired/stimulus'; | ||
|
|
||
| export default class extends Controller { | ||
| get classList() { | ||
| return this.element.classList; | ||
| } | ||
|
|
||
| get csrfToken() { | ||
| return this.metaValue('csrf-token'); | ||
| } | ||
|
|
||
| dispatch(eventName, { target = this.element, detail = {}, bubbles = true, cancelable = true } = {}) { | ||
| const type = `${this.identifier}:${eventName}`; | ||
| const event = new CustomEvent(type, { detail, bubbles, cancelable }); | ||
| target.dispatchEvent(event); | ||
| return event; | ||
| } | ||
|
|
||
| observeMutations(callback, target = this.element, options = { childList: true, subtree: true }) { | ||
| const observer = new MutationObserver((mutations) => { | ||
| observer.disconnect(); | ||
| Promise.resolve().then(start); // eslint-disable-line no-use-before-define | ||
| callback.call(this, mutations); | ||
| }); | ||
| function start() { | ||
| if (target.isConnected) observer.observe(target, options); | ||
| } | ||
| start(); | ||
| } | ||
|
|
||
| metaValue(name) { | ||
| const element = document.head.querySelector(`meta[name="${name}"]`); | ||
| return element && element.getAttribute('content'); | ||
| } | ||
| } |
7 changes: 7 additions & 0 deletions
7
app/javascript/controllers/autofocus_first_element_controller.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export default class extends ApplicationController { | ||
| static targets = ['element']; | ||
|
|
||
| connect() { | ||
| this.elementTargets[0].focus(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| export default class extends ApplicationController { | ||
| static targets = ['reveal', 'dismiss']; | ||
| static values = { | ||
| selector: String | ||
| } | ||
|
|
||
| connect() { | ||
| if (this.hasRevealTarget) { | ||
| this.revealTarget.addEventListener('click', () => setTimeout(() => this.focusFirstElement(), 1)) | ||
| } | ||
|
|
||
| if (this.hasDismissTarget) { | ||
| this.dismissTarget.addEventListener('click', () => setTimeout(() => this.focusElement(), 1)) | ||
| } | ||
| } | ||
|
|
||
| focusElement(_event) { | ||
| if (this.hasRevealTarget && this.focusable(this.revealTarget)) { | ||
| this.revealTarget.focus() | ||
| } | ||
| } | ||
|
|
||
| focusFirstElement(_event) { | ||
| const element = this.focusableElements[0] | ||
|
|
||
| if (element) { | ||
| element.focus() | ||
| } | ||
| } | ||
|
|
||
| // Private | ||
|
|
||
| visible(el) { | ||
| return !el.hidden && (!el.type || el.type != 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0) | ||
| } | ||
|
|
||
| focusable(el) { | ||
| return el.tabIndex >= 0 && !el.disabled && this.visible(el) | ||
| } | ||
|
|
||
| get focusableElements() { | ||
| return Array.from(this.element.querySelectorAll(this.selectors)).filter((el) => this.focusable(el)) || [] | ||
| } | ||
|
|
||
| get selectors() { | ||
| return this.hasSelectorValue ? | ||
| this.selectorValue : | ||
| 'input:not([disabled]), select:not([disabled]), textarea:not([disabled])' | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export default class extends ApplicationController { | ||
| remove() { | ||
| this.element.remove(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| require('admin') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
app/views/admin/form_answers/_section_admin_comments.html.slim
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 2 additions & 3 deletions
5
app/views/admin/form_answers/_section_company_details.html.slim
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
app/views/admin/form_answers/_section_critical_comments.html.slim
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
app/views/admin/form_answers/_section_press_summary.html.slim
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.