matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved accessibility (#118):

Browse Source 
* 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
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/common/videowatch/button.ts
View File

@ -42,6 +42,23 @@ function displayButton (dbo: displayButtonOptions): void {
if ('href' in dbo) {
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) {
button.target = '_blank'
}
@ -52,6 +69,10 @@ function displayButton (dbo: displayButtonOptions): void {
tmp.innerHTML = svg.trim()
const svgDom = tmp.firstChild
if (svgDom) {
if ('ariaHidden' in (svgDom as HTMLElement)) {
// Icon must be hidden for screen readers.
(svgDom as HTMLElement).ariaHidden = 'true'
}
button.prepend(svgDom)
}
} catch (err) {