search

nhsuk / nhsuk-frontend

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
https://nhsuk.github.io/nhsuk-frontend/
MIT License
623 stars 107 forks source link

Javascript required for the button component #425

Closed mcheung-nhs closed 4 years ago

mcheung-nhs commented 5 years ago

When using the button component as a link, you need to be able to trigger the link via the spacebar, which is what you can do with a real button but not with a link.

Because the link has a role of button then assistive technologies (screen readers, dictation software) will describe it as a button so users will expect to be able to trigger it using the spacebar.

See here for example of code that can be used:

https://github.com/alphagov/govuk-frontend/blob/master/src/components/button/button.js#L19-L34

dudiedood commented 5 years ago

https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/button/button.js

andrewbarnesweb commented 4 years ago

What’s the rationale to use a link styled as a button and then try to semantically suggest it’s a button? Would you not just use a button?

chrimesdev commented 4 years ago

Hey @andrewbarnesweb this would be for when semantically it should be an anchor tag, but have the styling of a button. For example on the GOVUK Start page pattern, which is commonly used within NHS services (although not in our service manual just yet). Buttons are used more for a form when submitting and can't be used as links to another page.

andrewbarnesweb commented 4 years ago

Hey @andrewbarnesweb this would be for when semantically it should be an anchor tag, but have the styling of a button

If semantically it should be an anchor tag, then it should be a standard link? Whether it's styled to look like a button is just how it looks, not connected to accessibility and semantics. So I don't think it makes sense to have role="button" on an anchor tag.

role="button" in my opinion is more for if you ever wanted to use other element types to behave like a button, e.g if you had a div that was supposed to toggle something on the page. Although, wherever possible, just use buttons and style them because then you obviously get all the good stuff for free 🙂

tomdoughty commented 4 years ago

I second that this doesn't seem like something we should be doing... I understand that maybe it feels like the "Start page" is a button but semantically it is not and doesn't give any accessibility benefit to making it behave like button either, in fact I think it is more confusing.

chrimesdev commented 4 years ago

Going to close this issue following discussions above!