[MDCT-2042]: Make dropdown checkbox options accessible

[braxex]

Description

The default behavior of a third-party library (react-multi-select-component) was disallowing tabbing through dropdown checkbox options. The solution was to utilize the component's exposed ItemRenderer prop to provide a custom component to render for each dropdown option. In this case, the component to be provided is the exact same as the default component but one major change: it does not set tabIndex={-1}, which allows users to tab to the dropdown checkbox options. Really this just involved:

1. Copying over the default option component
2. Converting from TS to JS + PropTypes (sigh)
3. Removing the tabIndex property

Here's a video of it in action:

clip.mov

Related ticket(s)

MDCT-2042

---

How to test

1. Pull down m2042-a11yed-droppies and run locally
2. Sign in as admin user
3. Test that users can tab through the dropdown checkbox options with Tab, select/unselect options with Space, unselect dropdowns with Esc, etc.

Important updates

---

Author checklist

• I have performed a self-review of my code
• I have added thorough tests, if necessary
• I have updated relevant documentation, if necessary

---

convert to a different template: test → val | val → prod

[codeclimate]

Code Climate has analyzed commit bd14c75 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 66.6% (90% is the threshold).

This pull request will bring the total coverage in the repository to 55.6% (0.0% change).

View more on Code Climate.