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

Tidy up JS code for focusing & associated html

Browse Source 
Makes sure the tabindex we add for focusing is
removed.

Also removes the outer fieldset from the radios
for new templates. We don't wrap form buttons in
fieldsets anywhere else and it doesn't add any
useful semantics to the form.
This commit is contained in:
Tom Byers
2019-01-30 10:47:26 +00:00
parent 2b2641b039
commit d633bdbb6d
4 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,10 +19,10 @@
this.states = [
{key: 'nothing-selected-buttons', $el: this.$form.find('#nothing_selected'), cancellable: false},
{key: 'items-selected-buttons', $el: this.$form.find('#items_selected'), cancellable: false},
{key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_folder_radios fieldset', true)},
{key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_folder_radios legend', true)},
{key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_new_folder_name', false)},
{key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_folder_name', false)},
{key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_template_form fieldset', true)}
{key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_template_form legend', true)}
];
// cancel/clear buttons only relevant if JS enabled, so
@@ -47,9 +47,15 @@
this.getFocusRoutine = function (selector, setTabindex) {
return function () {
let $el = $(selector);
let removeTabindex = (e) => {
$(e.target)
.removeAttr('tabindex')
.off('blur', removeTabindex);
};
if (setTabindex) {
$el.attr('tabindex', '-1');
$el.on('blur', removeTabindex);
}
$el.focus();

13
app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
View File

@@ -4,18 +4,17 @@
.js-stick-at-top-when-scrolling,
.js-stick-at-bottom-when-scrolling {
@extend %contain-floats;
overflow: hidden;
margin-left: -$gutter-half;
padding: 10px 0 0 $gutter-half;
position: relative;
fieldset:focus {
outline: solid 3px $focus-colour;
outline-offset: $gutter-half;
}
.form-group {
margin-bottom: 20px;
legend {
outline: none;
}
}
.back-to-top-link {
@@ -52,7 +51,7 @@
margin-top: -$vertical-padding;
& + .js-stick-at-bottom-when-scrolling {
margin-top: ($vertical-padding * 2) * -1;
margin-top: ($sticky-padding * 2) * -1;
}
.page-footer {

15
app/templates/views/templates/_move_to.html
View File

@@ -29,14 +29,11 @@
</fieldset>
</div>
<div id="add_new_template_form">
<fieldset>
<legend class="visuallyhidden">Add a new template</legend>
<div class="js-will-stick-at-bottom-when-scrolling">
{{ radios(templates_and_folders_form.add_template_by_template_type) }}
</div>
<div class="js-will-stick-at-bottom-when-scrolling">
{{ page_footer('Continue', button_name='operation', button_value='add-new-template') }}
</div>
</fieldset>
<div class="js-will-stick-at-bottom-when-scrolling">
{{ radios(templates_and_folders_form.add_template_by_template_type) }}
</div>
<div class="js-will-stick-at-bottom-when-scrolling">
{{ page_footer('Continue', button_name='operation', button_value='add-new-template') }}
</div>
</div>
</div>

2
tests/app/main/views/test_templates.py
View File

@@ -320,7 +320,7 @@ def test_should_show_new_template_choices_if_service_has_folder_permission(
if not page.select('#add_new_template_form'):
raise ElementNotFound()
assert normalize_spaces(page.select_one('#add_new_template_form fieldset fieldset legend').text) == (
assert normalize_spaces(page.select_one('#add_new_template_form fieldset legend').text) == (
'Add new'
)
assert [