diff --git a/app/assets/javascripts/radioSelect.js b/app/assets/javascripts/radioSelect.js index 87ca13422..0dd32f252 100644 --- a/app/assets/javascripts/radioSelect.js +++ b/app/assets/javascripts/radioSelect.js @@ -57,11 +57,8 @@ `) }; - let focusSelected = function() { - setTimeout( - () => $('[type=radio]:checked').next('label').blur().trigger('focus').addClass('selected'), - 50 - ); + let focusSelected = function(component) { + $('[type=radio]:checked', component).focus(); }; Modules.RadioSelect = function() { @@ -96,7 +93,7 @@ ), 'name': name }); - focusSelected(); + focusSelected(component); }; const trackMouseup = (event) => { const parentNode = event.target.parentNode; @@ -124,7 +121,7 @@ ), 'name': name }); - focusSelected(); + focusSelected(component); }) .on('mousedown', '.js-option', function(event) { @@ -164,13 +161,14 @@ reset(); } - focusSelected(); + focusSelected(component); }) .on('click', '.js-reset-button', function(event) { event.preventDefault(); reset(); + focusSelected(component); }); diff --git a/tests/javascripts/radioSelect.test.js b/tests/javascripts/radioSelect.test.js index 07de41fc7..918184ae0 100644 --- a/tests/javascripts/radioSelect.test.js +++ b/tests/javascripts/radioSelect.test.js @@ -156,27 +156,41 @@ describe('RadioSelect', () => { CATEGORIES.forEach((category, idx) => { - test(`clicking the button for ${category} should show the options for it, with the right label and value`, () => { + describe(`clicking the button for ${category} should`, () => { - // get all the options in the original page for this category - originalOptionsForCategory = originalOptionsForAllCategories.filter(option => option.label === category); + beforeEach(() => { - // start module - window.GOVUK.modules.start(); + // get all the options in the original page for this category + originalOptionsForCategory = originalOptionsForAllCategories.filter(option => option.label === category); - clickButtonForCategory(category); + // start module + window.GOVUK.modules.start(); - // check options this reveals against those originally in the page for this category - const options = document.querySelector('.radio-select-column:nth-child(2) .multiple-choice'); + clickButtonForCategory(category); + + }); + + test("show the options for it, with the right label and value", () => { + + // check options this reveals against those originally in the page for this category + const options = document.querySelector('.radio-select-column:nth-child(2) .multiple-choice'); + + const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => { + const optionData = getDataFromOption(option); + const originalOption = originalOptionsForCategory[idx]; + + return optionData.value === originalOption.value && optionData.label === originalOption.label; + }); + + expect(optionsThatMatchOriginals.length).toEqual(originalOptionsForCategory.length); - const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => { - const optionData = getDataFromOption(option); - const originalOption = originalOptionsForCategory[idx]; - - return optionData.value === originalOption.value && optionData.label === originalOption.label; }); - expect(optionsThatMatchOriginals.length).toEqual(originalOptionsForCategory.length); + test("keep focus on the default time slot", () => { + + expect(document.activeElement).toBe(document.getElementById('scheduled_for-0')); + + }); }); @@ -245,6 +259,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 space key should", () => { @@ -355,25 +377,35 @@ describe('RadioSelect', () => { }); - describe("after selecting an option", () => { + describe("after selecting an option clicking the 'Choose a different time' button should", () => { - test("clicking the 'Choose a different time' button should reset the module", () => { + beforeEach(() => { // select the first option const firstOption = document.querySelector('.radio-select-column:nth-child(2) input[type=radio]'); - helpers.triggerEvent(firstOption, 'click'); + helpers.clickElementWithMouse(firstOption); // click the 'Choose a different time' button const resetButton = document.querySelector('.radio-select-column:nth-child(3) input[type=button]'); helpers.triggerEvent(resetButton, 'click'); + }); + + test("reset the module", () => { + categoryButtons = document.querySelectorAll('.radio-select-column:nth-child(2) .js-category-button'); expect(categoryButtons.length).toEqual(CATEGORIES.length); }); + test("focus the default option", () => { + + expect(document.activeElement).toBe(document.getElementById('scheduled_for-0')); + + }); + }); });