darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-09 06:33:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Give context to 'Cancel' and 'Clear' links

Browse Source 
Links need to work in isolation from their context
in the page.

This is an attempt at doing that. The one for
'Cancel' is still not ideal but 'Clear selection'
gives more information than 'Clear' about what it
does.

Also adds a 'href' attribute to the link, without
which its accessible role isn't recognised.
This commit is contained in:
Tom Byers
2019-02-15 16:10:01 +00:00
parent 2d85469cd0
commit 14553dcfd0
1 changed files with 39 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/assets/javascripts/templateFolderForm.js
View File

@@ -76,7 +76,8 @@
this.addCancelButton = function(state) { this.addCancelButton = function(state) {
let selector = `[value=${state.key}]`; let selector = `[value=${state.key}]`;
let $cancel = this.makeButton('Cancel', () => { let $cancel = this.makeButton('Cancel', {
'onclick': () => {
// clear existing data // clear existing data
state.$el.find('input:radio').prop('checked', false); state.$el.find('input:radio').prop('checked', false);
@@ -84,38 +85,53 @@
// go back to action buttons // go back to action buttons
this.selectActionButtons(selector); this.selectActionButtons(selector);
}, selector); },
'cancelSelector': selector,
'nonvisualText': "this step"
});
state.$el.find('[type=submit]').after($cancel); state.$el.find('[type=submit]').after($cancel);
}; };
this.addClearButton = function(state) { this.addClearButton = function(state) {
let selector = 'button[value=add-new-template]'; let selector = 'button[value=add-new-template]';
let $clear = this.makeButton('Clear', () => { let $clear = this.makeButton('Clear', {
'onclick': () => {
// uncheck all templates and folders // uncheck all templates and folders
this.$form.find('input:checkbox').prop('checked', false); this.$form.find('input:checkbox').prop('checked', false);
// go back to action buttons // go back to action buttons
this.selectActionButtons(selector); this.selectActionButtons(selector);
},
'nonvisualText': "selection"
}); });
state.$el.find('.template-list-selected-counter').append($clear); state.$el.find('.template-list-selected-counter').append($clear);
}; };
this.makeButton = (text, fn, cancelSelector) => $('<a></a>') this.makeButton = (text, opts) => {
let $btn = $('<a href=""></a>')
.html(text) .html(text)
.addClass('js-cancel') .addClass('js-cancel')
.data('target', cancelSelector) // isn't set if cancelSelector is undefined // isn't set if cancelSelector is undefined
.data('target', opts.cancelSelector || undefined)
.attr('tabindex', '0') .attr('tabindex', '0')
.on('click keydown', event => { .on('click keydown', event => {
// space, enter or no keyCode (must be mouse input) // space, enter or no keyCode (must be mouse input)
if ([13, 32, undefined].indexOf(event.keyCode) > -1) { if ([13, 32, undefined].indexOf(event.keyCode) > -1) {
event.preventDefault(); event.preventDefault();
fn(); if (opts.hasOwnProperty('onclick')) { opts.onclick(); }
} }
}); });
if (opts.hasOwnProperty('nonvisualText')) {
$btn.append(`<span class="visuallyhidden"> ${opts.nonvisualText}</span>`);
}
return $btn;
};
this.selectActionButtons = function (targetSelector) { this.selectActionButtons = function (targetSelector) {
// If we want to show one of the grey choose actions state, we can pretend we're in the choose actions state, // If we want to show one of the grey choose actions state, we can pretend we're in the choose actions state,
// and then pretend a checkbox was clicked to work out whether to show zero or non-zero options. // and then pretend a checkbox was clicked to work out whether to show zero or non-zero options.