diff --git a/js/mixins/modal.js b/js/mixins/modal.js index df168c59..b1d7a376 100644 --- a/js/mixins/modal.js +++ b/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 } } } diff --git a/package.json b/package.json index f83facd5..2a939edf 100644 --- a/package.json +++ b/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", diff --git a/styles/elements/_buttons.scss b/styles/elements/_buttons.scss index c4bf4337..59a6481e 100644 --- a/styles/elements/_buttons.scss +++ b/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; + } +} diff --git a/templates/components/modal.html b/templates/components/modal.html index 8897238d..f8c19daf 100644 --- a/templates/components/modal.html +++ b/templates/components/modal.html @@ -2,7 +2,7 @@ {% macro Modal(name, dismissable=False) -%}
-
+