Buttons Do Not Change Cursor Type

[HSchuette]

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:

1. Use a lion-button in a web application.
2. Hover over the button.
3. Observe that the cursor does not change to a pointer.

Suggested Solution: Add a CSS rule to the lion-button component to change the cursor to a pointer on hover. For example:

:host(:hover) {
  cursor: pointer;
}

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.

[gerjanvangeest]

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?

[HSchuette]

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:

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

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

3. Established Practices: Many design systems, including Material Design and Bootstrap, utilize cursor: pointer for buttons to provide a consistent and familiar experience.

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

[ARehmanGujjar]

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

[gerjanvangeest]

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.