search

IgniteUI / igniteui-webcomponents

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
https://www.infragistics.com/products/ignite-ui-web-components
Other
121 stars 3 forks source link

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

Open georgianastasov opened 3 weeks ago

georgianastasov commented 3 weeks ago

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)

simeonoff commented 3 days ago

@SisIvanova we will have to defer this fix as after some discussion with @rkaraivanov, we would like to implement a different solution that will solve this and other issues in the component.