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

Make selection summary a live region

Browse Source 
Live regions need to be in the original HTML of
the page to work. We were generating the summary
in JS.

This changes the JS to only generate the contents
of the summary so changes to its contents are
announces by the existing live-region.
This commit is contained in:
Tom Byers
2019-05-07 11:44:12 +01:00
parent 089ebf2c7a
commit 42a9a0cf23
3 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/javascripts/collapsibleCheckboxes.js
View File

@@ -20,7 +20,7 @@
this.addFooterAndDoneButton();
// create summary from component pieces and match text to current selection
this.summary.$el = this.summary.create(this.getSelection(), this.total);
this.summary.addContent();
this.summary.update(this.getSelection(), this.total, this.fieldLabel);
this.$fieldset.before(this.summary.$el);
@@ -55,15 +55,15 @@
}
}
},
create: function() {
const $el = $(`<p class="selection-summary folder-selection">
<span class="selection-summary__text"></span> <button class="button button-secondary">Change</button>
</p>`);
addContent: function() {
const $content = $(`<p>
<span class="selection-summary__text"></span> <button class="button button-secondary">Change</button>
</p>`);
this.$text = $el.find('span');
this.$changeButton = $el.find('button');
this.$text = $content.find('span');
this.$changeButton = $content.find('button');
return $el;
this.$el.append($content);
},
update: function(selection, total, field) {
let template;

3
app/templates/components/select-input.html
View File

@@ -38,6 +38,9 @@
{% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text") %}
{% set is_collapsible = collapsible_opts|length %}
<div class="form-group {% if field.errors %} form-group-error{% endif %}"{% if is_collapsible %} data-module="collapsible-checkboxes"{% if collapsible_opts.field %} data-field-label="{{ collapsible_opts.field }}"{% endif %}{% endif %}>
{% if is_collapsible %}
<div class="selection-summary" role="region" aria-live="polite"></div>
{% endif %}
<fieldset id="{{ field.id }}">
<legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
{% if hide_legend %}<span class="visually-hidden">{% endif %}

10
tests/javascripts/collapsibleCheckboxes.test.js
View File

@@ -47,6 +47,7 @@ describe('Collapsible fieldset', () => {
// set up DOM
document.body.innerHTML =
`<div class="form-group" data-module="collapsible-checkboxes" data-field-label="folder">
<div class="selection-summary"></div>
<fieldset id="folder_permissions">
<legend class="form-label heading-small">
Folders this team member can see
@@ -98,13 +99,12 @@ describe('Collapsible fieldset', () => {
});
test("has a summary added before the selected fieldset", () => {
test("adds the right content to the summary", () => {
const summary = helpers.element(fieldset).getPreviousSibling(
el => (el.nodeName === 'p') && (el.hasClass('selection-summary'))
);
const summary = formGroup.querySelector('.selection-summary');
expect(summary).not.toBeNull();
expect(summary.querySelector('p')).not.toBeNull();
expect(summary.querySelector('p .selection-summary__text')).not.toBeNull();
});