how to update aria label value

Open
  • Is something wrong?
#359 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
accessibility, frontend

Research direction

Start with the ngx-slider component and its Options configuration, focusing on the ariaLabel setting and the rendered role and aria-label attributes shown by the user's example. Reproduce the price-slider markup and verify that the configured label produces a valid accessible slider without the reported compliance warning.

Written by the indexing model from the issue text.

Description

Hi,

we are using below code snippet to show the price slider on our site but we are getting ADA compliance issue for this.

<ngx-slider *ngIf="isBrowser" [(value)]="min" [(highValue)]="max" [options]="options" (userChangeEnd)="appliedFilter($event)" >

ADA compliance issue reported : aria-label attribute is not well supported on a ngx-slider with no valid role attribute.

to fix this we tried. -

<ngx-slider *ngIf="isBrowser" [(value)]="min" [(highValue)]="max" [options]="options" (userChangeEnd)="appliedFilter($event)" role="slider" aria-label="Select a range">

Also tried to update like below :

options: Options = {
floor: 0,
ceil: 10000,
ariaLabel: "Select a Price"
};

but still seeing same when inspecting code -

Can you please check and let us know.. how to update the aria-label value to fix the compliance issue.

Dominant language
TypeScript
Stars
412
Forks
177
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular-slider/ngx-slider

All issues in angular-slider/ngx-slider

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.