diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index 2efa5c79c1d..97a7f0204a1 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -34,6 +34,7 @@ class Chosen extends AbstractChosen 'class': container_classes.join ' ' 'style': "width: #{this.container_width()};" 'title': @form_field.title + 'aria-hidden': true container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chosen" if @form_field.id.length @@ -44,7 +45,7 @@ class Chosen extends AbstractChosen else @container.html '' + @default_text + '
' - @form_field_jq.hide().after @container + @form_field_jq.addClass('chosen-sr-only').after @container @dropdown = @container.find('div.chosen-drop').first() @search_field = @container.find('input').first() diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index 1450144c84f..8580b92bdc8 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -22,12 +22,13 @@ class @Chosen extends AbstractChosen 'class': container_classes.join ' ' 'style': "width: #{this.container_width()};" 'title': @form_field.title + 'aria-hidden': true container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chosen" if @form_field.id.length @container = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) ) - @form_field.hide().insert({ after: @container }) + @form_field.addClassName('chosen-sr-only').insert({ after: @container }) @dropdown = @container.down('div.chosen-drop') @search_field = @container.down('input') diff --git a/sass/chosen.scss b/sass/chosen.scss index b2f78e2d7bc..fb261fd3d0f 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -417,3 +417,15 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default; } } /* @end */ + +/* @group Accessibility helpers */ +.chosen-sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; +}