From b60607ea84c7d727b9c35a7ec2b808c8cfb11121 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 5 Oct 2020 17:08:29 +0200 Subject: [PATCH] fix(material/slider): some screen readers announcing long decimal values It looks like some screen readers announce the value of a slider by calculating the percentage themselves using the `aria-valuemin`, `aria-valuemax` and `aria-valuenow`. The problem is that they don't round down the decimals so for a slider between 0 and 1 with a step of 0.1, they end up reading out values like 0.20000068. These changes work around the issue by setting `aria-valuetext` to the same value that we shown in the thumb which we truncate ourselves. Fixes #20719. --- src/material/slider/slider.spec.ts | 10 ++++++++++ src/material/slider/slider.ts | 7 +++++++ 2 files changed, 17 insertions(+) diff --git a/src/material/slider/slider.spec.ts b/src/material/slider/slider.spec.ts index cb064373776b..5667b787805b 100644 --- a/src/material/slider/slider.spec.ts +++ b/src/material/slider/slider.spec.ts @@ -507,6 +507,16 @@ describe('MatSlider', () => { expect(sliderInstance.value).toBe(0.3); }); + it('should set the truncated value to the aria-valuetext', () => { + fixture.componentInstance.step = 0.1; + fixture.detectChanges(); + + dispatchSlideEventSequence(sliderNativeElement, 0, 0.333333); + fixture.detectChanges(); + + expect(sliderNativeElement.getAttribute('aria-valuetext')).toBe('33'); + }); + }); describe('slider with auto ticks', () => { diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts index d06c9b77241c..91f6d2fbfd0c 100644 --- a/src/material/slider/slider.ts +++ b/src/material/slider/slider.ts @@ -134,6 +134,13 @@ const _MatSliderMixinBase: '[attr.aria-valuemax]': 'max', '[attr.aria-valuemin]': 'min', '[attr.aria-valuenow]': 'value', + + // NVDA and Jaws appear to announce the `aria-valuenow` by calculating its percentage based + // on its value between `aria-valuemin` and `aria-valuemax`. Due to how decimals are handled, + // it can cause the slider to read out a very long value like 0.20000068 if the current value + // is 0.2 with a min of 0 and max of 1. We work around the issue by setting `aria-valuetext` + // to the same value that we set on the slider's thumb which will be truncated. + '[attr.aria-valuetext]': 'displayValue', '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"', '[class.mat-slider-disabled]': 'disabled', '[class.mat-slider-has-ticks]': 'tickInterval',