fix(slider): enhance accessibility with ARIA attributes

Author: georgianastasov

projects/igniteui-angular/src/lib/slider/slider.component.html

@@ -37,13 +37,16 @@
         #thumbFrom
         type="from"
         [value]="lowerLabel"
+        [min]="minValue"
+        [max]="maxValue"
         [disabled]="disabled"
         [continuous]="continuous"
         [onPan]="onPan"
         [stepDistance]="stepDistance"
         [step]="step"
         [templateRef]="thumbFromTemplateRef"
         [context]="context"
+        [labels]="labels"
         (thumbChange)="onThumbChange()"
         (hoverChange)="onHoverChange($event)"
         [deactiveState]="deactivateThumbLabel"
@@ -62,13 +65,16 @@
         #thumbTo
         type="to"
         [value]="upperLabel"
+        [min]="minValue"
+        [max]="maxValue"
         [disabled]="disabled"
         [continuous]="continuous"
         [onPan]="onPan"
         [stepDistance]="stepDistance"
         [step]="step"
         [templateRef]="thumbToTemplateRef"
         [context]="context"
+        [labels]="labels"
         (thumbChange)="onThumbChange()"
         (hoverChange)="onHoverChange($event)"
         [deactiveState]="deactivateThumbLabel"

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -1819,45 +1819,100 @@ describe('IgxSlider', () => {
     });
 
     describe('Accessibility: ARIA Attributes', () => {
-        let fixture: ComponentFixture<SliderInitializeTestComponent>;
+        let fixture: ComponentFixture<RangeSliderTestComponent>;
         let slider: IgxSliderComponent;
 
         beforeEach(() => {
-            fixture = TestBed.createComponent(SliderInitializeTestComponent);
+            fixture = TestBed.createComponent(RangeSliderTestComponent);
             slider = fixture.componentInstance.slider;
             fixture.detectChanges();
         });
 
-        it('aria properties should be successfully applied', () => {
-            const sliderElement = fixture.nativeElement.querySelector('igx-slider');
-            const sliderRole = fixture.nativeElement.querySelector('igx-slider[role="slider"]');
+        it('should apply all ARIA properties correctly to both thumbs', fakeAsync(() => {
+            fixture = TestBed.createComponent(RangeSliderTestComponent);
+            slider = fixture.componentInstance.slider;
+            fixture.detectChanges();
+            tick();
 
-            expect(sliderElement).toBeDefined();
-            expect(sliderRole).toBeDefined();
+            const thumbFrom = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const thumbTo = fixture.debugElement.query(By.css(THUMB_TO_CLASS)).nativeElement;
 
-            const minValue = parseInt(sliderElement.getAttribute('aria-valuemin'), 10);
-            const maxValue = parseInt(sliderElement.getAttribute('aria-valuemax'), 10);
-            const readOnly = sliderElement.getAttribute('aria-readonly');
+            expect(thumbFrom.getAttribute('role')).toBe('slider');
+            expect(thumbFrom.getAttribute('tabindex')).toBe('0');
+            expect(parseInt(thumbFrom.getAttribute('aria-valuenow'), 10)).toBe(slider.lowerValue);
+            expect(parseInt(thumbFrom.getAttribute('aria-valuemin'), 10)).toBe(slider.minValue);
+            expect(parseInt(thumbFrom.getAttribute('aria-valuemax'), 10)).toBe(slider.maxValue);
+            expect(thumbFrom.getAttribute('aria-label')).toBe('Slider thumb from');
+            expect(thumbFrom.getAttribute('aria-orientation')).toBe('horizontal');
+            expect(thumbFrom.getAttribute('aria-disabled')).toBe('false');
+
+            expect(thumbTo.getAttribute('role')).toBe('slider');
+            expect(thumbTo.getAttribute('tabindex')).toBe('0');
+            expect(parseInt(thumbTo.getAttribute('aria-valuenow'), 10)).toBe(slider.upperValue);
+            expect(parseInt(thumbTo.getAttribute('aria-valuemin'), 10)).toBe(slider.minValue);
+            expect(parseInt(thumbTo.getAttribute('aria-valuemax'), 10)).toBe(slider.maxValue);
+            expect(thumbTo.getAttribute('aria-label')).toBe('Slider thumb to');
+            expect(thumbTo.getAttribute('aria-orientation')).toBe('horizontal');
+            expect(thumbTo.getAttribute('aria-disabled')).toBe('false');
+
+            slider.labels = ['Low', 'Medium', 'High'];
+            fixture.detectChanges();
+            tick();
 
-            expect(minValue).toBe(slider.minValue);
-            expect(maxValue).toBe(slider.maxValue);
-            expect(readOnly).toBe('false');
-        });
+            expect(thumbFrom.getAttribute('aria-valuetext')).toBe('Low');
+            expect(thumbTo.getAttribute('aria-valuetext')).toBe('High');
 
-        it('should maintain accessibility attributes when slider is disabled', () => {
-            const sliderElement = fixture.nativeElement.querySelector('igx-slider');
-            const sliderRole = fixture.nativeElement.querySelector('igx-slider[role="slider"]');
+            slider.disabled = true;
+            fixture.detectChanges();
+            tick();
 
-            expect(sliderElement).toBeDefined();
-            expect(sliderRole).toBeDefined();
+            expect(thumbFrom.getAttribute('aria-disabled')).toBe('true');
+            expect(thumbTo.getAttribute('aria-disabled')).toBe('true');
+        }));
 
-            slider.disabled = true;
+        it('should apply correct tabindex to thumbs', fakeAsync(() => {
+            fixture = TestBed.createComponent(RangeSliderTestComponent);
+            slider = fixture.componentInstance.slider;
             fixture.detectChanges();
+            tick();
 
-            const disabled = sliderElement.getAttribute('aria-readonly');
+            const thumbFrom = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const thumbTo = fixture.debugElement.query(By.css(THUMB_TO_CLASS)).nativeElement;
 
-            expect(disabled).toBe('true');
-        });
+            expect(thumbFrom.getAttribute('tabindex')).toBe('0');
+            expect(thumbTo.getAttribute('tabindex')).toBe('0');
+        }));
+
+        it('should apply correct role to thumbs', fakeAsync(() => {
+            fixture = TestBed.createComponent(RangeSliderTestComponent);
+            slider = fixture.componentInstance.slider;
+            fixture.detectChanges();
+            tick();
+
+            const thumbFrom = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const thumbTo = fixture.debugElement.query(By.css(THUMB_TO_CLASS)).nativeElement;
+
+            expect(thumbFrom.getAttribute('role')).toBe('slider');
+            expect(thumbTo.getAttribute('role')).toBe('slider');
+        }));
+
+        it('should apply aria-valuenow, aria-valuemin, and aria-valuemax to thumbs', fakeAsync(() => {
+            fixture = TestBed.createComponent(RangeSliderTestComponent);
+            slider = fixture.componentInstance.slider;
+            fixture.detectChanges();
+            tick();
+
+            const thumbFrom = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const thumbTo = fixture.debugElement.query(By.css(THUMB_TO_CLASS)).nativeElement;
+
+            expect(thumbFrom.getAttribute('aria-valuenow')).toBe(String(slider.lowerValue));
+            expect(thumbFrom.getAttribute('aria-valuemin')).toBe(String(slider.minValue));
+            expect(thumbFrom.getAttribute('aria-valuemax')).toBe(String(slider.maxValue));
+
+            expect(thumbTo.getAttribute('aria-valuenow')).toBe(String(slider.upperValue));
+            expect(thumbTo.getAttribute('aria-valuemin')).toBe(String(slider.minValue));
+            expect(thumbTo.getAttribute('aria-valuemax')).toBe(String(slider.maxValue));
+        }));
 
         it('should apply aria-valuenow to the thumbs', fakeAsync(() => {
             fixture = TestBed.createComponent(RangeSliderTestComponent);
@@ -1895,16 +1950,78 @@ describe('IgxSlider', () => {
             expect(thumbTo.getAttribute('aria-valuenow')).toBe('70');
         }));
 
-        it('should have correct aria-labelledby references for each thumb', () => {
+        it('should apply aria-valuetext when labels are provided', fakeAsync(() => {
             fixture = TestBed.createComponent(RangeSliderTestComponent);
+            slider = fixture.componentInstance.slider;
+            fixture.detectChanges();
+            tick();
+
+            slider.labels = ['Low', 'Medium', 'High'];
+            tick();
             fixture.detectChanges();
 
             const thumbFrom = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
             const thumbTo = fixture.debugElement.query(By.css(THUMB_TO_CLASS)).nativeElement;
 
-            expect(thumbFrom.getAttribute('aria-labelledby')).toBe('slider-label-from');
-            expect(thumbTo.getAttribute('aria-labelledby')).toBe('slider-label-to');
-        });
+            expect(thumbFrom.getAttribute('aria-valuetext')).toBe('Low');
+            expect(thumbTo.getAttribute('aria-valuetext')).toBe('High');
+
+            slider.value = {
+                lower: 1,
+                upper: 1
+            };
+            fixture.detectChanges();
+            tick();
+
+            expect(thumbFrom.getAttribute('aria-valuetext')).toBe('Medium');
+            expect(thumbTo.getAttribute('aria-valuetext')).toBe('Medium');
+        }));
+
+        it('should apply correct aria-label to thumbs', fakeAsync(() => {
+            fixture = TestBed.createComponent(RangeSliderTestComponent);
+            slider = fixture.componentInstance.slider;
+            fixture.detectChanges();
+            tick();
+
+            const thumbFrom = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const thumbTo = fixture.debugElement.query(By.css(THUMB_TO_CLASS)).nativeElement;
+
+            expect(thumbFrom.getAttribute('aria-label')).toBe('Slider thumb from');
+            expect(thumbTo.getAttribute('aria-label')).toBe('Slider thumb to');
+        }));
+
+        it('should apply correct aria-orientation to thumbs', fakeAsync(() => {
+            fixture = TestBed.createComponent(RangeSliderTestComponent);
+            slider = fixture.componentInstance.slider;
+            fixture.detectChanges();
+            tick();
+
+            const thumbFrom = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const thumbTo = fixture.debugElement.query(By.css(THUMB_TO_CLASS)).nativeElement;
+
+            expect(thumbFrom.getAttribute('aria-orientation')).toBe('horizontal');
+            expect(thumbTo.getAttribute('aria-orientation')).toBe('horizontal');
+        }));
+
+        it('should update aria-disabled when the slider is disabled', fakeAsync(() => {
+            fixture = TestBed.createComponent(RangeSliderTestComponent);
+            slider = fixture.componentInstance.slider;
+            fixture.detectChanges();
+            tick();
+
+            const thumbFrom = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const thumbTo = fixture.debugElement.query(By.css(THUMB_TO_CLASS)).nativeElement;
+
+            expect(thumbFrom.getAttribute('aria-disabled')).toBe('false');
+            expect(thumbTo.getAttribute('aria-disabled')).toBe('false');
+
+            slider.disabled = true;
+            fixture.detectChanges();
+            tick();
+
+            expect(thumbFrom.getAttribute('aria-disabled')).toBe('true');
+            expect(thumbTo.getAttribute('aria-disabled')).toBe('true');
+        }));
     });
 
     const verifySecondaryTicsLabelsAreHidden = (ticks, hidden) => {

projects/igniteui-angular/src/lib/slider/slider.component.ts

@@ -96,12 +96,6 @@ export class IgxSliderComponent implements
     @ContentChild(IgxTickLabelTemplateDirective, { read: TemplateRef, static: false })
     public tickLabelTemplateRef: TemplateRef<any>;
 
-    /**
-     * @hidden
-     */
-    @HostBinding(`attr.role`)
-    public role = 'slider';
-
     /**
      * @hidden
      */
@@ -128,30 +122,6 @@ export class IgxSliderComponent implements
     @Input()
     public thumbLabelVisibilityDuration = 750;
 
-    /**
-     * @hidden
-     */
-    @HostBinding(`attr.aria-valuemin`)
-    public get valuemin() {
-        return this.minValue;
-    }
-
-    /**
-     * @hidden
-     */
-    @HostBinding(`attr.aria-valuemax`)
-    public get valuemax() {
-        return this.maxValue;
-    }
-
-    /**
-     * @hidden
-     */
-    @HostBinding(`attr.aria-readonly`)
-    public get readonly() {
-        return this.disabled;
-    }
-
     /**
      * @hidden
      */
@@ -1353,7 +1323,7 @@ export class IgxSliderComponent implements
     }
 
     private changeThumbFocusableState(state: boolean) {
-        const value = state ? -1 : 1;
+        const value = state ? -1 : 0;
 
         if (this.isRange) {
             this.thumbFrom.tabindex = value;

projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts

@@ -60,6 +60,15 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
     @Input({ transform: booleanAttribute })
     public deactiveState: boolean;
 
+    @Input()
+    public min: number;
+
+    @Input()
+    public max: number;
+
+    @Input()
+    public labels: any[];
+
     @Output()
     public thumbValueChange = new EventEmitter<number>();
 
@@ -75,19 +84,48 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
     @HostBinding('attr.tabindex')
     public tabindex = 0;
 
-    @HostBinding('attr.z-index')
-    public zIndex = 0;
+    @HostBinding('attr.role')
+    public role = 'slider';
 
     @HostBinding('attr.aria-valuenow')
     public get ariaValueNow() {
         return this.value;
     }
 
-    @HostBinding('attr.aria-labelledby')
-    public get ariaLabelledbyAttr() {
-        return this.type === SliderHandle.FROM ? 'slider-label-from' : 'slider-label-to';
+    @HostBinding('attr.aria-valuemin')
+    public get ariaValueMin() {
+        return this.min;
+    }
+
+    @HostBinding('attr.aria-valuemax')
+    public get ariaValueMax() {
+        return this.max;
+    }
+
+    @HostBinding('attr.aria-valuetext')
+    public get ariaValueText() {
+        if (this.labels && this.labels[this.value] !== undefined) {
+            return this.labels[this.value];
+        }
+        return this.value;
+    }
+
+    @HostBinding('attr.aria-label')
+    public get ariaLabelAttr() {
+        return `Slider thumb ${this.type}`;
     }
 
+    @HostBinding('attr.aria-orientation')
+    public ariaOrientation = 'horizontal';
+
+    @HostBinding(`attr.aria-disabled`)
+    public get ariaDisabled() {
+        return this.disabled;
+    }
+
+    @HostBinding('attr.z-index')
+    public zIndex = 0;
+
     @HostBinding('class.igx-slider-thumb-to--focused')
     public focused = false;