Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve chat input accessibility (#2353)

Browse Source 
Sets aria-role="textbox" and aria-placeholder
This commit is contained in:
Albin Larsson 2022-11-17 19:32:25 +01:00 committed by GitHub
parent 3a401991cf
commit 17bf41461c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webroot/js/components/chat/chat-input.js
View File

@ -347,8 +347,9 @@ export default class ChatInput extends Component {
> >
<${ContentEditable} <${ContentEditable}
id="message-input" id="message-input"
aria-role="textbox"
class="appearance-none block w-full bg-transparent text-sm text-gray-700 h-full focus:outline-none" class="appearance-none block w-full bg-transparent text-sm text-gray-700 h-full focus:outline-none"
placeholderText=${placeholderText} aria-placeholder=${placeholderText}
innerRef=${this.formMessageInput} innerRef=${this.formMessageInput}
html=${inputHTML} html=${inputHTML}
disabled=${!inputEnabled} disabled=${!inputEnabled}

2
webroot/styles/chat.css
View File

@ -62,7 +62,7 @@
/* If the div is empty then show the placeholder */ /* If the div is empty then show the placeholder */
#message-input:empty:before { #message-input:empty:before {
content: attr(placeholderText); content: attr(aria-placeholder);
pointer-events: none; pointer-events: none;
position: absolute; /* Fixes firefox positioning caret on the right */ position: absolute; /* Fixes firefox positioning caret on the right */
display: block; /* For Firefox */ display: block; /* For Firefox */