Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search Results page, facets checkboxes -- associate checkbox and label #148

Open
lhenze opened this issue Jan 7, 2022 · 0 comments
Open
Labels
a11y - significant Accessibility issues -- Must be fixed

Comments

@lhenze
Copy link
Member

lhenze commented Jan 7, 2022

From NYU A11y review: The checkbox form elements in the filter menu do not have the correct for/id label/input associations. For example, there was no way for the screen reader user to understand that there were 5 results for the metadata information. In the 'mock-up' version of the search results page, this was updated by using the aria-describedby attribute which is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. Also, an aria-label was added to the result number to create more descriptive information so the screen reader would understand what the number 5 represents. For example - the following code was implemented:

<div class="facet-wrapper title facet-subtitle">
   <div class="content facet-count">
     <div class="ui circular label" id="f1v" aria-label="5 results">5</div>
   </div>
   <div class="ui checkbox">
     <input class="hidden" tabindex="0" type="checkbox" value="metadata-only" id="f1" aria-describedby="f1v">
     <label for="f1">Metadata-only</label>
   </div>
</div>


This task has at least 2 parts.

  1. Associate facet checkbox with its label.

  2. Associate item count with its facet.


For 1st part --
What we need is to give the input element a unique "id", and then to give the label a "for" attribute whose value is that same value.
For example,
<div class="ui checkbox"><input type="checkbox" class="hidden" id="uniqueID" readonly="" tabindex="0"/><label for="uniqueID">labelname</label></div>

This seems straightforward in semantic UI - react
https://codesandbox.io/s/8pm9i?file=/example.js

But I have not been able to get it working in InvenioRDM.

Here's the place I've been trying to make changes, FWIW
https://github.com/inveniosoftware/react-searchkit/blob/master/src/lib/components/BucketAggregation/BucketAggregationValues.js#L134

@lhenze lhenze added help wanted Extra attention is needed a11y - significant Accessibility issues -- Must be fixed javascript labels Jan 7, 2022
@lhenze lhenze assigned dismorfo and unassigned dismorfo Jan 7, 2022
@lhenze lhenze removed help wanted Extra attention is needed javascript labels Jan 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y - significant Accessibility issues -- Must be fixed
Projects
None yet
Development

No branches or pull requests

2 participants