Merge pull request #27649 from eeejay/bug-1069004

Bug 1069004 - Make brightness slider accessible. r=pdahiya

apps/gallery/index.html

@@ -193,7 +193,7 @@ <h1 id="edit-title" data-l10n-id="edit"></h1>
       <!-- this holds different options for different editing modes -->
       <!-- only one set of options will be visible at a time -->
       <div id="edit-options">
-        <div id="exposure-slider" class="edit-options-bar hidden">
+        <div id="exposure-slider" class="edit-options-bar hidden" role="slider" aria-valuemax="3" aria-valuemin="-3" aria-valuenow="0">
           <div id="sliderbar">
             <hr id="sliderline"/>
             <div id="sliderthumb"></div>

apps/gallery/js/ImageEditor.js

@@ -230,6 +230,14 @@ var exposureSlider = (function() {
   thumb.addEventListener('touchend', function(e) {
     thumb.classList.remove('active');
   });
+  slider.addEventListener('keypress', function(e) {
+    // screen reader sends key arrow up/down events for adjusting the slider.
+    if (e.keyCode == KeyEvent.DOM_VK_DOWN) {
+      setExposure(currentExposure - 0.25);
+    } else if (e.keyCode == KeyEvent.DOM_VK_UP) {
+      setExposure(currentExposure + 0.25);
+    }
+  });
 
   function resize() {
     forceSetExposure(currentExposure);
@@ -281,6 +289,9 @@ var exposureSlider = (function() {
     // Remember the new exposure value
     currentExposure = exposure;
 
+    // Set value for ARIA widget
+    slider.setAttribute('aria-valuenow', exposure);
+
     // Dispatch an event to actually change the image
     slider.dispatchEvent(new Event('change', {bubbles: true}));
   }