Styling links as buttons using role="button" about mvp HOT 4 CLOSED

@DiemenDesign - I was reading more about role="button" here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role and it says:

The button role should be used for clickable elements that trigger a response when activated by the user.

A button is a widget used to perform actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying information.

While a link could be considered "a response", it sounds like it's more for tags that simulate a button action rather than tags that look like buttons.

So, even though role="button" is an interesting option I'm inclined to leave the button styling as <a><b> and <a><i> since they appear to be more semantically correct. I could see this going either way though and happy to revisit it though if there's a popular consensus to the opposite.

Thanks again for proposing this as I didn't even know about these attributes before.

from mvp.

Just been doing some more research into using custom role values, they have set values, this means if we use our own custom values the document they are in will no longer be valid. However, we could use data- attributes for the same purpose as they can be styled. And where we are changing the behaviour of elements such as <a/> to behave as though it's a <button/> we can use role="button" to style it how we want.

from mvp.

Thanks @DiemenDesign, this is a neat feature that I wasn't aware of.

I like the idea of role="button". If we're moving away from <a><b> it would be nice to ditch <a><i> as well, but I'm not sure how to do that without introducing a custom attribute like data-, which I'm not in favor of since the goal is to have the styling affect only standard HTML tags and attributes. If we have to use <a role="button"><i> anyway, then it's just more typing for not that much better markup (since most MVPs won't need the accessibility benefits of role=).

But, if there's a slick way to create an outline button with one standard HTML tag then it could be a compelling solution. Any ideas around that?

from mvp.

It is a tricky one, the role="button" on anchors when changing it's behaviour to a button representation makes sense to me for accessibility in particular. And similar could be used for other elements when used with different behaviours as well. For keeping an outline button as per the example page, we could seperatly style the .a[role="button"]{} like what is already happening with button{} style directive to adjust it's background colour.

The data- attribute is a different beast. For e.g. in my CMS I'm using something like <section data-content="category"/> where I want to restyle how the <aside/> elements look, but don't want to affect how the original (to mvp.css at least) <aside/> look on the page. Maybe it's something that people can be made aware that can be done to achieve differences to the look of elements like colour for e.g., without altering too much of the original mvp.css stylesheet.

from mvp.