darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 11:23:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Move focus of legends to their fieldsets

Browse Source 
When testing with the JAWS screenreader, we found
a bug around getting it to announce the name of a
fieldset when we ask the user to select from it.

Bug on pivotal:

https://www.pivotaltracker.com/story/show/165565088

The flows for adding a new template and moving a
template/folder both need the user to select an
option from a radio group. When we add the radio
group to the UI, we need to move focus to it so
the user is in the right place to choose an
option.

The expectation of the original code was that
focusing the field set's legend would work like
focusing the heading of a section of content and
announce the label of it. This didn't happen with
JAWS. This tries to achieve the same by focusing
the whole fieldset instead.

When doing this we also hide the focus style, to
follow the convention for this across www.gov.uk.
This commit is contained in:
Tom Byers
2019-07-11 14:28:13 +01:00
parent 60389d7087
commit d0b6f844ce
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
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 legend', true)},
{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-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 legend', true)}
{key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_template_form fieldset', true)}
];
// cancel/clear buttons only relevant if JS enabled, so

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

@@ -48,6 +48,10 @@ $sticky-padding: $gutter * 2 / 3;
margin-top: ($sticky-padding * 2) * -1;
}
fieldset:focus {
outline: none;
}
.page-footer {
margin-bottom: 0;
min-height: 50px;