diff --git a/app/assets/javascripts/govuk-component/option-select.js b/app/assets/javascripts/govuk-component/option-select.js index 8fe34d178..37603cede 100644 --- a/app/assets/javascripts/govuk-component/option-select.js +++ b/app/assets/javascripts/govuk-component/option-select.js @@ -43,6 +43,9 @@ if (this.$optionSelect.data('closed-on-load') == true) { this.close(); } + else { + this.setupHeight(); + } } } @@ -60,7 +63,7 @@ $button.addClass('js-container-head'); //Add type button to override default type submit when this component is used within a form $button.attr('type', 'button'); - $button.attr('aria-expanded', this.isClosed()); + $button.attr('aria-expanded', true); $button.attr('aria-controls', this.$optionSelect.find('.options-container').attr('id')); $button.html(jsContainerHeadHTML); $containerHead.replaceWith($button); diff --git a/app/assets/stylesheets/govuk-component/_option-select.scss b/app/assets/stylesheets/govuk-component/_option-select.scss index e720810f3..ed3136dcd 100644 --- a/app/assets/stylesheets/govuk-component/_option-select.scss +++ b/app/assets/stylesheets/govuk-component/_option-select.scss @@ -38,7 +38,7 @@ .options-container { position: relative; background-color: $page-colour; - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; @include media(desktop) { @@ -46,14 +46,13 @@ } label { - @include inline-block; - padding: 7px 0 7px 35px; + display: block; + padding: 7px 7px 7px 35px; border-bottom: 1px solid $border-colour; - width: 100%; cursor: pointer; @include media(desktop) { - // leave room for the scroll bars on desktop + // leave space to interact with the scroll bars on desktop width: 90%; } diff --git a/app/views/govuk_component/docs/option_select.yml b/app/views/govuk_component/docs/option_select.yml index d23941fca..1eeee9131 100644 --- a/app/views/govuk_component/docs/option_select.yml +++ b/app/views/govuk_component/docs/option_select.yml @@ -1,6 +1,8 @@ name: Option select description: A scrollable list of checkboxes to be displayed on a form where one might otherwise use a multi-select +accessibility_criteria: | + Options on desktop should not be full width to let users interact with the scrollbar without accidentally clicking an option examples: default: data: diff --git a/spec/javascripts/govuk-component/option-select-spec.js b/spec/javascripts/govuk-component/option-select-spec.js index 056a71e7a..f6fd80a32 100644 --- a/spec/javascripts/govuk-component/option-select-spec.js +++ b/spec/javascripts/govuk-component/option-select-spec.js @@ -66,24 +66,54 @@ describe('GOVUK.OptionSelect', function() { it('instantiates a closed option-select if data-closed-on-load is true', function(){ - $closedOnLoadFixture = $('
'); + closedOnLoadFixture = '
' + + '
' + + '
'; + $closedOnLoadFixture = $(closedOnLoadFixture); + $('body').append($closedOnLoadFixture); optionSelect = new GOVUK.OptionSelect({$el:$closedOnLoadFixture}); expect(optionSelect.isClosed()).toBe(true); + expect($closedOnLoadFixture.find('button').attr('aria-expanded')).toBe('false'); }); it('instantiates an open option-select if data-closed-on-load is false', function(){ - $openOnLoadFixture = $('
'); + openOnLoadFixture = '
' + + '
' + + '
'; + $openOnLoadFixture = $(openOnLoadFixture); + $('body').append($openOnLoadFixture); optionSelect = new GOVUK.OptionSelect({$el:$openOnLoadFixture}); expect(optionSelect.isClosed()).toBe(false); + expect($openOnLoadFixture.find('button').attr('aria-expanded')).toBe('true'); }); it('instantiates an open option-select if data-closed-on-load is not present', function(){ - $openOnLoadFixture = $('
'); + openOnLoadFixture = '
' + + '
' + + '
'; + $openOnLoadFixture = $(openOnLoadFixture); + $('body').append($openOnLoadFixture); optionSelect = new GOVUK.OptionSelect({$el:$openOnLoadFixture}); expect(optionSelect.isClosed()).toBe(false); + expect($openOnLoadFixture.find('button').attr('aria-expanded')).toBe('true'); + }); + + it ('sets the height of the options container as part of initialisation', function(){ + expect($optionSelectHTML.find('.options-container').attr('style')).toContain('height'); + }); + + it ('doesn\'t set the height of the options container as part of initialisation if closed-on-load is true', function(){ + closedOnLoadFixture = '
' + + '
' + + '
'; + $closedOnLoadFixture = $(closedOnLoadFixture); + + $('body').append($closedOnLoadFixture); + optionSelect = new GOVUK.OptionSelect({$el:$closedOnLoadFixture}); + expect($closedOnLoadFixture.find('.options-container').attr('style')).not.toContain('height'); }); describe('replaceHeadWithButton', function(){ @@ -124,7 +154,8 @@ describe('GOVUK.OptionSelect', function() { expect($optionSelectHTML.hasClass('js-closed')).toBe(false); }); - it ('calls setupHeight()', function(){ + it ('calls setupHeight() if a height has not been set', function(){ + $optionSelectHTML.find('.options-container').attr('style', ''); spyOn(optionSelect, "setupHeight"); optionSelect.open(); expect(optionSelect.setupHeight.calls.count()).toBe(1);