Improve mutually exclusive screen reader alerts #263
Conversation
Codecov Report
@@ Coverage Diff @@
## master #263 +/- ##
=========================================
+ Coverage 95.92% 96.3% +0.38%
=========================================
Files 15 15
Lines 564 595 +31
=========================================
+ Hits 541 573 +32
+ Misses 23 22 -1
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
- Could we change alert for the ‘or’ option dependent on whether or not selecting it would actually deselect the other checkboxes? Currently always says "selecting this will uncheck all other checkboxes" ...it ideally shouldn’t read the same thing out after the user has checked it.
- If the ‘or’ checkbox is selected, selecting an option checkbox doesn’t inform the user that the ‘or’ checkbox has been unselected.
- When you select 'or' option whilst 'other' is selected and has a value it reads: "Other deselected, please specify deselected" …it would read better as just e.g. ‘Other, [other input value] deselected’
…age to only fire when relevent
|
@jrbarnes9 I've changed it to only say "selecting this will uncheck all other checkboxes" if checkboxes have been checked. I get an alert for "no central heating deselected" when i check another options so it could be a device specific issue... what are you testing with? As for the other field, I think we will have to address that as a fix for checkboxes and radios as they have no link between other and the input field it shows at the moment. I've raised an issue here: #272 |
|
|
When using the feedback text area example, the character count is read out after the 'I don't want to provide feedback' checkbox is selected. |
|
Still a spacing issue:... |
|
Mutually exclusive duration... "[legend] deselected" is read out twice after selecting the checkbox. One for each field cleared presumably. Preferably should just read this out once to indicate all fields in the field_group have been deselected. |
… will be required for mutually exclusive questions
…n inner label elements, but still read the labels
I've updated this to read out the title of the abbreviation so it should read something like "Years cleared. Months cleared" rather than the [legend] deselected. I'm not sure whether saying "[legend] cleared" and not mentioning which fields were cleared in the group 'e.g. years and months here, or day, month, year in the date input' would be clear enough for screen reader users. |
Co-Authored-By: bameyrick <bameyrick@gmail.com>
* Prevent screen reader from reading Or * Prevent screen reader from saying "Table end" when selecting a label in a field__item * Improve aria-live for mutually exclusive * Ensure alert message is read by screen reader and fix spacing of checkbox / radios * Fix mutually exclusive fields layout * Fix layout of mutually exclusive checkbox and change deselection message to only fire when relevent * Ensure characters remaining isnt read out when textarea cleared programatically * Ensure "Select all that apply" message isnt part of legend * Fix layout of mutually exclusive prefixed/suffixed field * Update all input types to be able to be run in "questionMode" as this will be required for mutually exclusive questions * Fix mutually exlusive for inputs with prefix/suffix and no label * Fix tagName detection * Update radios and checkboxes to prevent screen reader from focusing on inner label elements, but still read the labels * Fix clear meassage for prefixed/suffixed inputs not in a group * Fix label for mutiple suffixed/prefixed and add unit test * Fix char limit unit tests * Improve char limit test * Correct spelling Co-Authored-By: bameyrick <bameyrick@gmail.com>
I've updated the mutually exclusive component to improve the screen reader alerts for when inputs/checkboxes are programatically cleared.
It would be worth having a play with a few of the different mutually exclusive example types using a screen reader to see how the alerts sound. One to be aware of is the "please specify" input in the "Other" option in mutually exclusive checkboxes, although that may be an issue with the "other" checkbox/radio option itself rather than the mutually exclusive code.
Will resolve #270
Will resolve #271