Sets slider value labels for screen reader announcements

Uses aria-valuetext to set the label for the slider to reflect the data
list pixel value, rather than slider position. Works when the slider
initially receives focus, and when the slider position is moved.

Bug: 1041918
Change-Id: Id2276c1a8bff0dea54d767d9c067d8119fb5a5c3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2087197Reviewed-by: Wei-Yin Chen (陳威尹) <wychen@chromium.org>
Commit-Queue: Meredith Lane <meredithl@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748901}

components/dom_distiller/core/javascript/dom_distiller_viewer.js

@@ -134,10 +134,6 @@ class FontSizeSlider {
       this.update(e.target.value);
     });
 
-    this.element.addEventListener('input', (e) => {
-      this.update(e.target.value);
-    });
-
     this.tickmarks = document.createElement('datalist');
     this.tickmarks.setAttribute('class', 'tickmarks');
     this.element.after(this.tickmarks);
@@ -156,6 +152,8 @@ class FontSizeSlider {
     this.element.style.setProperty(
         '--fontSizePercent',
         (position / (this.supportedFontSizes.length - 1) * 100) + '%');
+    this.element.setAttribute(
+        'aria-valuetext', this.supportedFontSizes[position] + 'px');
     for (let option = this.tickmarks.firstChild; option != null;
          option = option.nextSibling) {
       const isBeforeThumb = option.value < position;