Added appropriate labels to checkboxes in Cache File page table for accessibility #111
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
label Google lighthouse cannot detect hidden labels, which is what I had before. Instead, in order to not disrupt the original appearance of the table, I decided to use the existing Labels column's href column values to be the labels.
coffeeologist
changed the title
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.
Issue
Resolves #101
Refer to the original issue specification with the link above.
Solution idea
labelelements that either encapsulates the form (our checkboxes), or directly references the form's id. In order to not disrupt the original appearance of the page, a fix must come from using an existing resource as labels (since you cannot add thehiddenattribute to labels). In our cache file list, the 2nd column contains the label of the cache locations.Implemented solution
The template is changed to condition on the column's name (it's name must be "Label"), and turns the original table entry
<a..>label text></a>into a label:<label for="checkbox_n"><a>...</a><label>. Wherecheckbox_nis assigned based on the checkbox's order in the table.This is what a rendered table's elements look like (note that values like "Assets cache" are dynamically provided, and all I did was change the template in which data was fed into.
End result
The lighthouse score for the accessibility component has now risen from 82 to 89, with form labeling issue completely resolved.
