Skip to content

[Bug]: Incorrect aria-label implementation on igc-slider component #1410

Description

@georgianastasov

Which component(s) are affected?

Slider (single/range)

Description

There is an issue (enhancement) with the igc-slider component where the aria-label attribute is applied to both the igc-slider and its inner thumb element. This is not correct because the aria-label should be applied only to the thumb, which is the focusable part of the slider. When navigating via keyboard (tabbing), users focus directly on the thumb and not the slider container itself.

Reproduction

To observe the issue:

1. Include an igc-slider component in your project.
2. Inspect the rendered HTML in the browser.
3. Notice that both the igc-slider and its inner thumb element have the aria-label attribute applied.

Workaround

I have not found a workaround.

Is this a regression?

No or unsure. This never worker, or I haven't tried before.

Affected versions

5.0.2

Browser/OS/Node environment

Browser: All modern browsers (e.g., Chrome, Firefox, Edge)
Operating System: All platforms (e.g., Windows, macOS, Linux)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

a11yWhen the issue or PR is related to accessibilityslider

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions