Closed HSchuette closed 4 months ago
Hi @HSchuette,
While it's common to give <button>
s cursor: pointer;
, this is an anti-pattern. The CSS spec establishes that cursor: pointer indicates an element is a link.
This article has some additional justification for this.
Do you have any sources that supports why this is an Aria best practice?
Hi @gerjanvangeest!
Thank you for the quick response. While it is true that the CSS specification mentions cursor: pointer
as an indicator for links, I believe the argument in the article is flawed.
Here’s why:
Consistency and User Expectations: Most users expect buttons to behave similarly to links in terms of cursor behavior. This enhances the user experience by providing a clear visual indication of interactivity.
Accessibility: ARIA Authoring Practices do not explicitly require cursor: pointer
for buttons, but they do emphasize clear visual indicators for interactivity, aligning with general usability heuristics that support its use for buttons.
Established Practices: Many design systems, including Material Design and Bootstrap, utilize cursor: pointer
for buttons to provide a consistent and familiar experience.
Knowledge Gap: I would argue that most of the users so not know the difference between an interactive button or a link. Especially with SPAs the line becomes blurry and worse for the UX.
To give you an example: open any ing page and see how they use the collapsible components or radio buttons.
I can clearly see your point and am completely ok if you decide to close this issue. However I see a lot of websites where the buttons are used inconsistently and believe that defaulting to a pointer for button would improve usability because the curso indicates interactivity.
Hi @HSchuette , I just came from a site; and found no such issue, cursor is changing to pointer on every button click so far. Can you provide screenshot, where issue come exactly on your side? Thanks
Hi @HSchuette,
Good points :)
But as lion we would like to stay as close as possible to the web standards.
In your own extension you can always do:
export class MyButton extends LionButton {
static get styles() {
return [
...super.styles,
css`
:host(:hover) {
cursor: pointer;
}
`
];
}
}
btw, i'll convert this into a discussion, instead of an issue.
The
lion-button
component currently does not change the cursor to a pointer when hovered over. This behavior is typically expected for button elements to indicate interactivity, aligning with ARIA best practices and enhancing user experience.Expected Behavior: When a
lion-button
is hovered over, the cursor should change to a pointer (cursor: pointer).Current Behavior: The cursor remains as the default arrow when hovering over a
lion-button
, which can be misleading for users as it does not visually indicate that the button is interactive.Steps to Reproduce:
lion-button
in a web application.Suggested Solution: Add a CSS rule to the
lion-button
component to change the cursor to a pointer on hover. For example:Additional Context: This issue impacts the usability and accessibility of applications using the Lion button component. Aligning the button behavior with common web standards will improve the overall user experience.