issue/2950 Switch from disabled to aria-disabled for ButtonsView (#2951)

Author: oliverfoster

js/a11y.js

@@ -235,9 +235,12 @@ define([
       }
       isEnabled = isEnabled === undefined ? true : isEnabled;
       if (!isEnabled) {
-        $elements.attr('disabled', 'disabled').addClass('is-disabled');
+        $elements.attr({
+          tabindex: '-1',
+          'aria-disabled': 'true'
+        }).addClass('is-disabled');
       } else {
-        $elements.removeAttr('disabled').removeClass('is-disabled');
+        $elements.removeAttr('aria-disabled tabindex').removeClass('is-disabled');
       }
       return this;
     },

js/a11y/browserFocus.js

@@ -59,22 +59,29 @@ define([
     /**
      * Force focus when clicked on a tabbable element,
      * making sure `document.activeElement` is updated.
+     * Stop event handling on aria-disabled elements.
      *
      * @param {JQuery.Event} event
      */
     _onClick: function(event) {
       var config = Adapt.a11y.config;
-      if (!config._isEnabled || !config._options._isFocusOnClickEnabled) {
+      if (!config._isEnabled) {
         return;
       }
       var $element = $(event.target);
-      var $stack = $().add($element).add($element.parents());
-      var $focusable = $stack.filter(config._options._tabbableElements);
-      if (!$focusable.length) {
-        return;
+      if (config._options._isFocusOnClickEnabled) {
+        var $stack = $().add($element).add($element.parents());
+        var $focusable = $stack.filter(config._options._tabbableElements);
+        if (!$focusable.length) {
+          return;
+        }
+        // Force focus for screen reader enter / space press
+        $focusable[0].focus();
+      }
+      if ($element.is('[aria-disabled=true]')) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
       }
-      // Force focus for screen reader enter / space press
-      $focusable[0].focus();
     }
 
   });

js/views/buttonsView.js

@@ -54,7 +54,7 @@ define([
         this.$('.js-btn-marking').removeClass('is-incorrect is-correct').addClass('u-display-none');
         this.$el.removeClass('is-submitted');
         this.model.set('feedbackMessage', undefined);
-        Adapt.a11y.toggleAccessibleEnabled(this.$('.js-btn-feedback'), false);
+        Adapt.a11y.toggleEnabled(this.$('.js-btn-feedback'), false);
       } else {
         this.$el.addClass('is-submitted');
       }
@@ -73,10 +73,10 @@ define([
     onFeedbackMessageChanged: function(model, changedAttribute) {
       if (changedAttribute && this.model.get('_canShowFeedback')) {
         // enable feedback button
-        Adapt.a11y.toggleAccessibleEnabled(this.$('.js-btn-feedback'), true);
+        Adapt.a11y.toggleEnabled(this.$('.js-btn-feedback'), true);
       } else {
         // disable feedback button
-        Adapt.a11y.toggleAccessibleEnabled(this.$('.js-btn-feedback'), false);
+        Adapt.a11y.toggleEnabled(this.$('.js-btn-feedback'), false);
       }
     },
 
@@ -94,7 +94,7 @@ define([
       if (changedAttribute === BUTTON_STATE.CORRECT || changedAttribute === BUTTON_STATE.INCORRECT) {
         // Both 'correct' and 'incorrect' states have no model answer, so disable the submit button
 
-        Adapt.a11y.toggleAccessibleEnabled($buttonsAction, false);
+        Adapt.a11y.toggleEnabled($buttonsAction, false);
 
       } else {
 
@@ -104,7 +104,7 @@ define([
 
         // Enable the button, make accessible and update aria labels and text
 
-        Adapt.a11y.toggleAccessibleEnabled($buttonsAction, this.model.get('_canSubmit'));
+        Adapt.a11y.toggleEnabled($buttonsAction, this.model.get('_canSubmit'));
         $buttonsAction.html(buttonText).attr('aria-label', ariaLabel);
 
         // Make model answer button inaccessible (but still enabled) for visual users due to

templates/buttons.hbs

@@ -8,7 +8,7 @@
     {{{_buttons._submit.buttonText}}}
   </button>
 
-  <button class="btn-text btn__feedback js-btn-feedback" aria-label="{{_buttons._showFeedback.ariaLabel}}" disabled="true">
+  <button class="btn-text btn__feedback js-btn-feedback is-disabled" aria-label="{{_buttons._showFeedback.ariaLabel}}" aria-disabled="true">
     {{{_buttons._showFeedback.buttonText}}}
   </button>