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

Improve focus control of radioSelect

Browse Source 
Makes focus shift to the first time in the range
when you select a day.

Also rewrites the code for controlling focus so it
explains itself better, now it has different
settings.
This commit is contained in:
Tom Byers
2021-01-19 14:12:29 +00:00
parent e7291ffd51
commit 9651da1292
2 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/javascripts/radioSelect.js
View File

@@ -63,8 +63,13 @@
`)
};
let focusSelected = function(component) {
$('[type=radio]:checked', component).focus();
let shiftFocus = function(target, component) {
if (target === 'now') {
$('[type=radio]', component).eq(0).focus();
}
if (target === 'time') {
$('[type=radio]', component).eq(1).focus();
}
};
Modules.RadioSelect = function() {
@@ -96,6 +101,7 @@
'name': name,
'showNowAsDefault': showNowAsDefault
});
shiftFocus('now', component);
};
const selectOption = (value) => {
render('chosen', {
@@ -105,7 +111,7 @@
'name': name,
'showNowAsDefault': showNowAsDefault
});
focusSelected(component);
shiftFocus('time', component);
};
const trackMouseup = (event) => {
const parentNode = event.target.parentNode;
@@ -134,7 +140,7 @@
'name': name,
'showNowAsDefault': showNowAsDefault
});
focusSelected(component);
shiftFocus('time', component);
})
.on('mousedown', '.js-option', function(event) {
@@ -169,20 +175,21 @@
'name': name,
'showNowAsDefault': showNowAsDefault
});
shiftFocus('time', component);
} else {
reset();
shiftFocus('now', component);
}
focusSelected(component);
})
.on('click', '.radio-select__button--reset', function(event) {
event.preventDefault();
reset();
focusSelected(component);
shiftFocus('now', component);
});

20
tests/javascripts/radioSelect.test.js
View File

@@ -228,9 +228,9 @@ describe('RadioSelect', () => {
});
test("keep focus on the default time slot", () => {
test("focus the first time slot", () => {
expect(document.activeElement).toBe(document.getElementById('scheduled_for-0'));
expect(document.activeElement).toBe(document.getElementById('scheduled_for-1'));
});
@@ -347,6 +347,14 @@ describe('RadioSelect', () => {
})
test("focus the selected option", () => {
selectedOption = document.querySelector('.radio-select__column:nth-child(2) input[checked=checked]');
expect(document.activeElement).toBe(selectedOption);
});
});
describe("selecting an option with the enter key should", () => {
@@ -398,6 +406,14 @@ describe('RadioSelect', () => {
})
test("focus the selected option", () => {
selectedOption = document.querySelector('.radio-select__column:nth-child(2) input[checked=checked]');
expect(document.activeElement).toBe(selectedOption);
});
});
test("clicking the 'Done' button should choose whatever time is selected", () => {