canonical
Button accessibility
As mentioned in MDN web docs, adding role="button" will make an element appear as a button control to a screen reader.
Maybe the Button component should have the property role="button" to improve it's accessibly.
The default sub element (and arguably the only one ever used) is a button so it'll already have all the necessary elements on it.
https://github.com/canonical-web-and-design/react-components/blob/master/src/components/Button/Button.tsx#L79
There has been some discussion of removing the ability to pass a different element into this but maas-ui I think has a couple cases where they pass in an a. So we could either:
- remove the ability to change the element (my preferred approach)
- add in a conditional that checks if it's not a
buttonthen add the role.
Seems that we quite often use links styled as buttons (at least in websites), so option to change the element needs to stay. But in such case (if something other than button is used, role='button' should be added).
