On Applying high contrast Aquatic/Dessert themes, Slider control is not visible.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 55/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
Research direction
Reproduce on the demos page at the linked URL by turning on a Windows contrast theme, or by emulating forced-colors: active in browser DevTools. Find which slider parts (track, selection bar, handle) disappear, then trace their styling in the ngx-slider component's CSS and templates. Done when the slider's track and handle stay visible and distinguishable under forced colors, and the normal theme looks unchanged.
Written by the indexing model from the issue text.
Description
Test Environment:
OS: Windows 11[Version 25H2(OS Build 26220.9587)]
Edge: Version 156.0.4314.8 (Official build)
Test URL: ngx-slider
User Impact:
Users with low vision who rely on high contrast themes may be unable to perceive the slider control, making it difficult or impossible to identify and adjust the associated setting.
Prerequisites:
System settings > Accessibility > Contrast themes > Select themes and apply
Repro Steps:
- Launch the URL: ngx-slider
- Press tab key to reach to "Slider" control.
- Observe whether, on Applying high contrast themes, Slider control is visible or not.
Actual Result:
When a high contrast theme is applied, the slider control is not visible on the page.
https://github.com/user-attachments/assets/49f29a9f-c02f-468a-8f5e-59249f2a7fd2
Expected Result:
The slider control should remain clearly visible and distinguishable when high contrast themes are applied, allowing users to identify and interact with it.
- Dominant language
- TypeScript
- Stars
- 412
- Forks
- 177
- PR merge metrics
- No merged PRs in 30d
Getting set up
This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from angular-slider/ngx-slider
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
angular-slider/ngx-slider#450 ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 48/100
angular-slider/ngx-slider#403 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
angular-slider/ngx-slider#398 · 1 comment ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 38/100
angular-slider/ngx-slider#393 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 30/100
angular-slider/ngx-slider#388 ·
All issues in angular-slider/ngx-slider
Similar issues
-
area: web
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
inabagumi/shinju-date#6823 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
vercel-labs/ui#540 ·
Maintainers usually reply within 1 day
-
accepted ai-dev ai-implementing
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
livesport/homer#218 · 1 comment ·
Maintainers usually reply within 1 day
-
normalizePropName strips `#` characters from Figma property names instead of only the `#id` suffixOpen
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
figma/code-connect#419 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100