Bug 1531243 - Fix some a11y issues with buttons and labels

[camd]

This addresses Bug 1531243

Please see individual commits

[jcsteh]

I'm not very familiar with React, so I apologise if I'm misunderstanding anything.

[jcsteh]

AFAIK, react-select is not just a standard HTML <select>, but would instead use custom markup. <label forr=...> is only supported by HTML form elements, so I'm not sure if this will work. If you haven't already, you could double check this with the Accessibility inspector in the Firefox Dev Tools. For example, you could right click the control, select Inspect Accessibility Properties and check the name property for that element.

[camd]

I made some modifications to this that may help. Though it looks like react-select just doesn't have good ARIA support. I may need to switch to another select type component to get this fixed.

JedWatson/react-select#2456

[jcsteh]

Okay. I can't tell whether this is going to work without being able to see it rendered. I guess we can handle this in a follow up if this doesn't work.

[edmorley]

Though it looks like react-select just doesn't have good ARIA support. I may need to switch to another select type component to get this fixed.

Removing use of react-select would also fix a few other issues (see bug 1507903).

[camd]

Hi @edmorley ! :) Thanks for the context. Yeah, I think I will replace it in a follow-up PR.

[sarah-clements]

Looks good to me (aside from James' comments). Although, it might be worth changing the buttons to reactstrap components rather than have to manually add the type. However, you've already done the work. :)

[jcsteh]

My lack of familiarity with React notwithstanding, this looks pretty good to me. Thanks!

[jcsteh]

Okay. I can't tell whether this is going to work without being able to see it rendered. I guess we can handle this in a follow up if this doesn't work.