diff --git a/app/javascript/elements/fetch_form.js b/app/javascript/elements/fetch_form.js index 32ebf915..72980a4a 100644 --- a/app/javascript/elements/fetch_form.js +++ b/app/javascript/elements/fetch_form.js @@ -1,4 +1,4 @@ -import { announceError } from './aria_announce' +import { announceError, announcePolite } from './aria_announce' export default class extends HTMLElement { connectedCallback () { @@ -28,6 +28,8 @@ export default class extends HTMLElement { } catch (err) { console.error(err) } + } else if (this.dataset.successMessage) { + announcePolite(this.dataset.successMessage) } }) } diff --git a/app/javascript/elements/file_dropzone.js b/app/javascript/elements/file_dropzone.js index 12ef253d..d5a08d07 100644 --- a/app/javascript/elements/file_dropzone.js +++ b/app/javascript/elements/file_dropzone.js @@ -10,6 +10,15 @@ export default actionable(targetable(class extends HTMLElement { ] connectedCallback () { + this.setAttribute('role', 'region') + if (!this.hasAttribute('aria-label')) { + this.setAttribute('aria-label', this.dataset.name || 'File upload') + } + + if (this.input && !this.input.getAttribute('aria-label')) { + this.input.setAttribute('aria-label', this.dataset.name || 'Upload file') + } + this.addEventListener('dragover', (e) => e.preventDefault()) this.addEventListener('drop', this.onDrop) document.addEventListener('turbo:submit-end', this.toggleLoading) diff --git a/app/javascript/elements/menu_active.js b/app/javascript/elements/menu_active.js index 819e9259..9b477d21 100644 --- a/app/javascript/elements/menu_active.js +++ b/app/javascript/elements/menu_active.js @@ -3,6 +3,7 @@ export default class extends HTMLElement { this.querySelectorAll('a').forEach((link) => { if (document.location.pathname.startsWith(link.pathname) && !link.getAttribute('href').startsWith('http')) { link.classList.add('bg-base-300') + link.setAttribute('aria-current', 'page') } }) } diff --git a/app/javascript/elements/scroll_to.js b/app/javascript/elements/scroll_to.js index ded724b5..c62430db 100644 --- a/app/javascript/elements/scroll_to.js +++ b/app/javascript/elements/scroll_to.js @@ -2,9 +2,23 @@ export default class extends HTMLElement { connectedCallback () { this.selector = document.getElementById(this.dataset.selectorId) - this.addEventListener('click', () => { + const scrollToTarget = () => { this.selector.scrollIntoView({ behavior: 'smooth', block: 'start' }) history.replaceState(null, null, `#${this.dataset.selectorId}`) + + if (this.selector.tabIndex < 0) { + this.selector.tabIndex = -1 + } + + this.selector.focus({ preventScroll: true }) + } + + this.addEventListener('click', scrollToTarget) + this.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + scrollToTarget() + } }) } } diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue index 414c545e..0e2b9bf2 100644 --- a/app/javascript/submission_form/form.vue +++ b/app/javascript/submission_form/form.vue @@ -69,7 +69,9 @@ id="expand_form_button" class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3 expand-form-button text-base" style="width: 96%; margin-left: 2%" - @click.prevent="[isFormVisible = true, $nextTick(() => scrollIntoField(currentField))]" + aria-expanded="false" + aria-controls="form_container" + @click="[isFormVisible = true, $nextTick(() => scrollIntoField(currentField))]" >