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

Re-position live-region to remove duplication

Browse Source 
Adding a visually hidden live-region creates
duplication in the HTML. End result for users of
screen readers are that you get the same text read
out twice.

This adds `aria-hidden` to hide the visible
version and re-positions the live-region one next
to it. That means the live-region text appears in
the same place in the document order as the
visible one so things are announced as expected.
This commit is contained in:
Tom Byers
2019-02-15 11:03:22 +00:00
parent 050a513cf5
commit 15104e9d25
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,11 +10,10 @@
// which field is visible.
this.$form.find('button[value=unknown]').remove();
this.$stickyBottom = this.$form.find('#sticky_template_forms');
this.$liveRegionCounter = this.$form.find('.selection-counter');
this.$stickyBottom.append(this.nothingSelectedButtons);
this.$stickyBottom.append(this.itemsSelectedButtons);
this.$liveRegionCounter.before(this.nothingSelectedButtons);
this.$liveRegionCounter.before(this.itemsSelectedButtons);
// all the diff states that we want to show or hide
this.states = [
@@ -180,7 +179,7 @@
// detach everything, unless they are the currentState
this.states.forEach(
state => (state.key === this.currentState ? this.$stickyBottom.append(state.$el) : state.$el.detach())
state => (state.key === this.currentState ? this.$liveRegionCounter.before(state.$el) : state.$el.detach())
);
// use dialog mode for states which contain more than one form control
@@ -199,7 +198,7 @@
<div class="js-stick-at-bottom-when-scrolling">
<button class="button-secondary" value="add-new-template">New template</button>
<button class="button-secondary" value="add-new-folder">New folder</button>
<div class="template-list-selected-counter">
<div class="template-list-selected-counter" aria-hidden="true">
${this.selectionStatus.default}
</div>
</div>
@@ -211,7 +210,7 @@
<div class="js-stick-at-bottom-when-scrolling">
<button class="button-secondary" value="move-to-existing-folder">Move</button>
<button class="button-secondary" value="move-to-new-folder">Add to new folder</button>
<div class="template-list-selected-counter">
<div class="template-list-selected-counter" aria-hidden="true">
${this.selectionStatus.selected(1)}
</div>
</div>