Accessibility: mark up .input-button as semantic buttons #323
Conversation
Add the semantic role of 'button' to the .inpout-button whenever it is created so a screen-reader user is told it is a button Add the tabindex attribute and value of '0' so a keyboard user can tab to the button and OvidijusParsiunas#286
When the submit button has the class 'disabled-button' apply the attribute `aria-disabled="true"`. When the submit button has the class 'loading-button' apply the attribute `aria-busy="true"`. These attributes and their values should inform the screen-reader users that the button is not interactive and loading respectively. When the button is not disabled, the `aria-disabled` is removed and same for when the button is not loading, it should not have `aria-busy`.
…t-button A11y/add semantics to input button
|
Hey @imgiseverything! The code looks great! Let me know if you need any help, thankyou! |
|
Hi @imgiseverything. Since I am going to release the next version of Deep Chat very shortly, I have merged your changes and make the necessary updates that I mentioned myself. Thankyou for your work! It is very much appreciated! |
As described here: #286 the 'button's coded into deep-chat are not semantic buttons and as such are accessible to keyboard/switch users nor screen-reader users.
role="button"
This PR adds the semantic
roleattribute with thevalueofbuttonto the.input-buttonelements so it announces to screen-readers that it is a button.Disabled buttons
It also adds other semantics such as
aria-disabled="true"instead of just styling the buttons to look disabled so screen-reader users hear when the button is disabledNote: rather than having
aria-disabled="false"when the button is enabled, instead we remove the attributeLoading/busy buttons
It also adds other semantics such as
aria-busy="true"instead of just styling the buttons to look busy so screen-reader users hear when the button is loading.Note: rather than having
aria-busy="false"when the button is not busy, instead we remove the attributeKeyboard/Switch accessibility
:hoverstyles in CSS are duplicated for :focus-visible so non-mouse users can see when the button is in focus.