fix(slider): fixes usage of aria-valuetext, adds aria-valuenow

adobe · Dec 17, 2019 · 4b25a89 · 4b25a89
1 parent 5800915
commit 4b25a89
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/__snapshots__/Slider.md b/__snapshots__/Slider.md
@@ -5,12 +5,9 @@
 ```html
 <div id="labelContainer">
     <label for="input" id="label"></label>
-    <div
-        aria-labelledby="label"
-        aria-readonly="true"
-        id="value"
-        role="textbox"
-    ></div>
+    <div aria-labelledby="label" aria-readonly="true" id="value" role="textbox">
+        10
+    </div>
 </div>
 <div id="controls">
     <div
@@ -25,7 +22,8 @@
             aria-label=""
             aria-valuemax="20"
             aria-valuemin="0"
-            aria-valuetext=""
+            aria-valuenow="10"
+            aria-valuetext="10"
             id="input"
             max="20"
             min="0"
@@ -48,12 +46,9 @@
 ```html
 <div id="labelContainer">
     <label for="input" id="label"></label>
-    <div
-        aria-labelledby="label"
-        aria-readonly="true"
-        id="value"
-        role="textbox"
-    ></div>
+    <div aria-labelledby="label" aria-readonly="true" id="value" role="textbox">
+        10
+    </div>
 </div>
 <div id="controls">
     <div class="track"></div>
@@ -63,7 +58,8 @@
             aria-label=""
             aria-valuemax="20"
             aria-valuemin="0"
-            aria-valuetext=""
+            aria-valuenow="10"
+            aria-valuetext="10"
             id="input"
             max="20"
             min="0"
@@ -1104,6 +1100,7 @@
             aria-label=""
             aria-valuemax="100"
             aria-valuemin="-100"
+            aria-valuenow="0"
             aria-valuetext="0"
             id="input"
             max="100"

diff --git a/packages/slider/src/slider.ts b/packages/slider/src/slider.ts
@@ -46,7 +46,6 @@ export class Slider extends Focusable {
         }
 
         this._value = value;
-        this.ariaValueText = this.getAriaValueText(this._value);
         this.requestUpdate('value', oldValue);
     }
 
@@ -78,8 +77,13 @@ export class Slider extends Focusable {
     @property({ attribute: false })
     public getAriaValueText: (value: number) => string = (value) => `${value}`;
 
-    @property({ reflect: true, attribute: 'aria-valuetext' })
-    private ariaValueText = '';
+    @property({ attribute: false })
+    private get ariaValueText(): string {
+        if (!this.getAriaValueText) {
+            return `${this.value}`;
+        }
+        return this.getAriaValueText(this.value);
+    }
 
     @property()
     public label = '';
@@ -254,6 +258,7 @@ export class Slider extends Focusable {
                     max="${this.max}"
                     aria-disabled=${this.disabled ? 'true' : 'false'}
                     aria-label=${this.ariaLabel || this.label}
+                    aria-valuenow=${this.value}
                     aria-valuemin=${this.min}
                     aria-valuemax=${this.max}
                     aria-valuetext=${this.ariaValueText}

diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts
@@ -600,11 +600,12 @@ describe('Slider', () => {
 
         await elementUpdated(el);
 
-        expect(el.getAttribute('aria-valuetext')).to.equal('50%');
+        const input = el.focusElement as HTMLInputElement;
+        expect(input.getAttribute('aria-valuetext')).to.equal('50%');
 
         el.value = 100;
         await elementUpdated(el);
 
-        expect(el.getAttribute('aria-valuetext')).to.equal('100%');
+        expect(input.getAttribute('aria-valuetext')).to.equal('100%');
     });
 });