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

[lhenze]

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