diff --git a/app/javascript/elements/clipboard_copy.js b/app/javascript/elements/clipboard_copy.js index 4118b9e2..b31808a6 100644 --- a/app/javascript/elements/clipboard_copy.js +++ b/app/javascript/elements/clipboard_copy.js @@ -2,7 +2,15 @@ export default class extends HTMLElement { connectedCallback () { this.clearChecked() - this.addEventListener('click', (e) => { + // Make element keyboard accessible + if (!this.hasAttribute('tabindex')) { + this.setAttribute('tabindex', '0') + } + if (!this.hasAttribute('role')) { + this.setAttribute('role', 'button') + } + + const copyToClipboard = (e) => { const text = this.dataset.text || this.innerText.trim() if (navigator.clipboard) { @@ -12,6 +20,16 @@ export default class extends HTMLElement { alert(`Clipboard not available. Make sure you're using https://\nCopy text: ${text}`) } } + } + + this.addEventListener('click', copyToClipboard) + + // Add keyboard support for Enter and Space keys + this.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + copyToClipboard(e) + } }) } diff --git a/app/javascript/elements/download_button.js b/app/javascript/elements/download_button.js index 160fc770..26aa1e8a 100644 --- a/app/javascript/elements/download_button.js +++ b/app/javascript/elements/download_button.js @@ -4,7 +4,23 @@ export default targetable(class extends HTMLElement { static [target.static] = ['defaultButton', 'loadingButton'] connectedCallback () { + // Make element keyboard accessible + if (!this.hasAttribute('tabindex')) { + this.setAttribute('tabindex', '0') + } + if (!this.hasAttribute('role')) { + this.setAttribute('role', 'button') + } + this.addEventListener('click', () => this.downloadFiles()) + + // Add keyboard support for Enter and Space keys + this.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + this.downloadFiles() + } + }) } toggleState () { diff --git a/app/javascript/elements/password_input.js b/app/javascript/elements/password_input.js index be25740f..9db2f77d 100644 --- a/app/javascript/elements/password_input.js +++ b/app/javascript/elements/password_input.js @@ -9,12 +9,31 @@ export default targetable(class extends HTMLElement { ] connectedCallback () { + // Make toggle button keyboard accessible + if (!this.togglePasswordVisibility.hasAttribute('tabindex')) { + this.togglePasswordVisibility.setAttribute('tabindex', '0') + } + if (!this.togglePasswordVisibility.hasAttribute('role')) { + this.togglePasswordVisibility.setAttribute('role', 'button') + } + this.togglePasswordVisibility.addEventListener('click', this.handleTogglePasswordVisibility) + + // Add keyboard support for Enter and Space keys + this.handleKeydown = (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + this.handleTogglePasswordVisibility() + } + } + this.togglePasswordVisibility.addEventListener('keydown', this.handleKeydown) + document.addEventListener('turbo:submit-start', this.setInitialPasswordType) } disconnectedCallback () { this.togglePasswordVisibility.removeEventListener('click', this.handleTogglePasswordVisibility) + this.togglePasswordVisibility.removeEventListener('keydown', this.handleKeydown) document.removeEventListener('turbo:submit-start', this.setInitialPasswordType) }