Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button accessibility #618

Open
goulinkh opened this issue Oct 12, 2021 · 2 comments
Open

Button accessibility #618

goulinkh opened this issue Oct 12, 2021 · 2 comments
Labels
Accessibility Bug 🐛 Something isn't working P3 Triaged Issue has been reviewed as part of legacy backlog grooming (project P3). Triaged: v4 Triaged, to be implemented as part of Vanilla v4

Comments

@goulinkh
Copy link
Contributor

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.

@hatched
Copy link
Contributor

hatched commented Oct 12, 2021

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 button then add the role.

@bartaz bartaz added the Bug 🐛 Something isn't working label Oct 13, 2021
@bartaz
Copy link
Member

bartaz commented Sep 30, 2024

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).

@bartaz bartaz added P3 Triaged Issue has been reviewed as part of legacy backlog grooming (project P3). Triaged: v4 Triaged, to be implemented as part of Vanilla v4 Accessibility labels Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Bug 🐛 Something isn't working P3 Triaged Issue has been reviewed as part of legacy backlog grooming (project P3). Triaged: v4 Triaged, to be implemented as part of Vanilla v4
Projects
None yet
Development

No branches or pull requests

3 participants