Merge pull request #397 from dod-ccpo/modal-accessibility

Modal accessibility

js/mixins/modal.js

@@ -1,17 +1,32 @@
+import ally from 'ally.js'
+
 export default {
   methods: {
     closeModal: function(name) {
       this.activeModal = null
       this.$emit('modalOpen', false)
+      if (this.allyHandler) this.allyHandler.disengage()
     },
+
     openModal: function (name) {
       this.activeModal = name
       this.$emit('modalOpen', true)
+      const idSelector = `#${this.modalId}`
+
+      this.allyHandler = ally.maintain.disabled({
+        filter: idSelector
+      });
     }
   },
   data: function() {
     return {
       activeModal: null,
+      allyHandler: null
+    }
+  },
+  computed: {
+    modalId: function () {
+      return !!this.activeModal ? `modal--${ this.activeModal }` : null
     }
   }
 }

package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "ally.js": "^1.4.1",
     "autoprefixer": "^9.1.3",
     "babel-polyfill": "^6.26.0",
     "date-fns": "^1.29.0",

styles/elements/_buttons.scss

@@ -3,3 +3,11 @@
  * @see https://designsystem.digital.gov/components/buttons/
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_buttons.scss
  */
+
+button,
+[type='button'] {
+  &:disabled {
+    background-color: unset;
+    opacity: 0.75;
+  }
+}

templates/components/modal.html

@@ -2,7 +2,7 @@
 
 {% macro Modal(name, dismissable=False) -%}
   <div v-show="activeModal === '{{name}}'" v-cloak>
-    <div class='modal {% if dismissable %}modal--dismissable{% endif%}'>
+    <div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%}'>
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
           <div class='modal__body'>

templates/fragments/edit_project_form.html

@@ -22,7 +22,7 @@
       </p>
 
       <div class='action-group'>
-        <button type='submit' class='action-group__action usa-button' tabindex='0'>{{ action_text }} Project</button>
+        <button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>{{ action_text }} Project</button>
         <button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
       </div>
     {% endcall %}

templates/requests/index.html

@@ -12,7 +12,7 @@
     {% include 'fragments/pending_financial_verification.html' %}
 
     <div class='action-group'>
-      <a v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</a>
+      <button autofocus type=button v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</button>
     </div>
   {% endcall %}
 
@@ -22,7 +22,7 @@
     {% include 'fragments/pending_ccpo_approval_modal.html' %}
 
     <div class='action-group'>
-      <a v-on:click="closeModal('pendingCCPOApproval')" class='action-group__action usa-button'>Close</a>
+      <button autofocus type='button' v-on:click="closeModal('pendingCCPOApproval')" class='action-group__action usa-button'>Close</button>
     </div>
   {% endcall %}
 
@@ -32,7 +32,7 @@
     {% include 'fragments/pending_ccpo_acceptance_alert.html' %}
 
     <div class='action-group'>
-      <a v-on:click="closeModal('pendingCCPOAcceptance')" class='action-group__action usa-button'>Close</a>
+      <button autofocus type='button' v-on:click="closeModal('pendingCCPOAcceptance')" class='action-group__action usa-button'>Close</button>
     </div>
   {% endcall %}
 

templates/workspaces/members/edit.html

@@ -99,6 +99,7 @@
                             value='{{ choice[0] }}'
                             {% if role == choice[0] %}
                               checked='checked'
+                              autofocus
                             {% endif %}
                           />
                           <label for="env_{{ env.id }}_{{ choice[0] }}">
@@ -118,8 +119,8 @@
                     <input type='hidden' name='env_{{ env.id }}' v-bind:value='new_role'/>
                     <div class='block-list__footer'>
                       <div class='action-group'>
-                        <a v-on:click="closeModal('{{ env.name }}RolesModal')" class='action-group__action usa-button'>Select Access Role</a>
-                        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ env.name }}RolesModal'); cancel();" value="{{ value if value == role else role }}" >Cancel</a>
+                        <button type='button' v-on:click="closeModal('{{ env.name }}RolesModal')" class='action-group__action usa-button'>Select Access Role</button>
+                        <button type='button' class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ env.name }}RolesModal'); cancel();" value="{{ value if value == role else role }}" >Cancel</button>
                       </div>
                     </div>
                   </div>

yarn.lock

@@ -86,6 +86,14 @@ ajv@^5.1.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+ally.js@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/ally.js/-/ally.js-1.4.1.tgz#9fb7e6ba58efac4ee9131cb29aa9ee3b540bcf1e"
+  integrity sha1-n7fmuljvrE7pExyymqnuO1QLzx4=
+  dependencies:
+    css.escape "^1.5.0"
+    platform "1.3.3"
+
 alphanum-sort@^1.0.0, alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -1927,6 +1935,11 @@ css-what@2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
   integrity sha1-lGfQMsOM+u+58teVASUwYvh/ob0=
 
+css.escape@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
 cssnano-preset-default@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.0.tgz#c334287b4f7d49fb2d170a92f9214655788e3b6b"
@@ -5352,6 +5365,11 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
+platform@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.3.tgz#646c77011899870b6a0903e75e997e8e51da7461"
+  integrity sha1-ZGx3ARiZhwtqCQPnXpl+jlHadGE=
+
 popper.js@^1.12.9:
   version "1.14.4"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"