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:
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>
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:
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