Fix aria expanded and height of option select

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);

app/assets/stylesheets/govuk-component/_option-select.scss

@@ -38,22 +38,21 @@
   .options-container {
     position: relative;
     background-color: $page-colour;
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
 
     @include media(desktop) {
       max-height: 200px;
     }
 
     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%;
       }
 

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:

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 = $('<div class="govuk-option-select" data-closed-on-load=true></div>');
+    closedOnLoadFixture = '<div class="govuk-option-select" data-closed-on-load=true>' +
+                            '<div class="container-head js-container-head"></div>' +
+                          '</div>';
+    $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 = $('<div class="govuk-option-select" data-closed-on-load="false"></div>');
+    openOnLoadFixture = '<div class="govuk-option-select" data-closed-on-load=false>' +
+                            '<div class="container-head js-container-head"></div>' +
+                          '</div>';
+    $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 = $('<div class="govuk-option-select"></div>');
+    openOnLoadFixture = '<div class="govuk-option-select">' +
+                          '<div class="container-head js-container-head"></div>' +
+                        '</div>';
+    $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 = '<div class="govuk-option-select" data-closed-on-load=true>' +
+                            '<div class="options-container"></div>' +
+                          '</div>';
+    $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);