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 = '