-
Notifications
You must be signed in to change notification settings - Fork 283
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
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
Buttons Do Not Change Cursor Type #2288
Comments
Hi @HSchuette, While it's common to give 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
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? |
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. |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
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.
The text was updated successfully, but these errors were encountered: