Improved accessibility (#118):

* top chat button accessibility improved (role, aria-hidden for icons,
  tabindex for keyboard navigation, ...)
This commit is contained in:
John Livingston 2024-08-20 17:52:53 +02:00
parent e65bd5c426
commit 0732bd1de3
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC

View File

@ -42,6 +42,23 @@ function displayButton (dbo: displayButtonOptions): void {
if ('href' in dbo) { if ('href' in dbo) {
button.href = dbo.href button.href = dbo.href
} }
if (!button.href || button.href === '#') {
// No href => it is not a link.
button.role = 'button'
button.tabIndex = 0
// We must also ensure that the enter key is triggering the onclick
if (button.onclick) {
button.onkeydown = ev => {
if (ev.key === 'Enter') {
ev.preventDefault()
button.click()
}
}
}
}
if (('targetBlank' in dbo) && dbo.targetBlank) { if (('targetBlank' in dbo) && dbo.targetBlank) {
button.target = '_blank' button.target = '_blank'
} }
@ -52,6 +69,10 @@ function displayButton (dbo: displayButtonOptions): void {
tmp.innerHTML = svg.trim() tmp.innerHTML = svg.trim()
const svgDom = tmp.firstChild const svgDom = tmp.firstChild
if (svgDom) { if (svgDom) {
if ('ariaHidden' in (svgDom as HTMLElement)) {
// Icon must be hidden for screen readers.
(svgDom as HTMLElement).ariaHidden = 'true'
}
button.prepend(svgDom) button.prepend(svgDom)
} }
} catch (err) { } catch (err) {