add ARIA labels to input fields #2562
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Signed-off-by: Michael Robinson <merobi@gmail.com>
Codecov Report
@@ Coverage Diff @@
## main #2562 +/- ##
=========================================
Coverage 83.26% 83.26%
Complexity 1286 1286
=========================================
Files 243 243
Lines 5934 5934
Branches 279 279
=========================================
Hits 4941 4941
Misses 846 846
Partials 147 147 📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
phixMe
reviewed
Aug 3, 2023
| @@ -30,7 +30,7 @@ const SearchPlaceholder: React.FC<WithStyles<typeof styles>> = ({ classes }) => | |||
| return ( | |||
| <Box className={classes.root}> | |||
| <Box display={'inline'}> | |||
| <MqText disabled inline> | |||
| <MqText disabled inline aria-label={i18next.t('search.search_aria')} aria-required='true'> | |||
| {' '} | |||
There was a problem hiding this comment.
Why is there a space character here?
There was a problem hiding this comment.
Good question. I removed it along with a few other unnecessary spaces and standardized the font so the spacing is consistent without them.
Signed-off-by: Michael Robinson <merobi@gmail.com>
Signed-off-by: Michael Robinson <merobi@gmail.com>
phixMe
approved these changes
Aug 4, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Input fields in the Web UI are missing ARIA labels, which the OSSF Silver Badge requires to meet a11y standards.
Solution
This adds ARIA properties to the Web UI's
inputandtextcomponents used for user input and configures i18next to support the text in them. All have been tested with a screen reader and found to work as expected.One-line summary: adds i18next-compliant ARIA labels to input fields
Checklist
CHANGELOG.md(Depending on the change, this may not be necessary)..sqldatabase schema migration according to Flyway's naming convention (if relevant)