Merge branch 'master' into issue/3032

coffee/chosen.jquery.coffee

@@ -52,6 +52,7 @@ class Chosen extends AbstractChosen
 
     @search_field = @container.find('input').first()
     @search_results = @container.find('ul.chosen-results').first()
+    @search_results.attr('id', "#{@form_field.id}-chosen-search-results")
     this.search_field_scale()
 
     @search_no_results = @container.find('li.no-results').first()
@@ -63,6 +64,7 @@ class Chosen extends AbstractChosen
       @search_container = @container.find('div.chosen-search').first()
       @selected_item = @container.find('.chosen-single').first()
 
+    this.set_aria_labels()
     this.results_build()
     this.set_tab_index()
     this.set_label_behavior()
@@ -116,6 +118,20 @@ class Chosen extends AbstractChosen
     @form_field_jq.removeData('chosen')
     @form_field_jq.show()
 
+  set_aria_labels: ->
+    @search_field.attr "aria-owns", @search_results.attr "id"
+    if @form_field.attributes["aria-label"]
+      @search_field.attr "aria-label", @form_field.attributes["aria-label"]
+      if @form_field.attributes["aria-labelledby"]
+        @search_field.attr "aria-labelledby", @form_field.attributes["aria-labelledby"]
+    else if Object.prototype.hasOwnProperty.call(@form_field,'labels') && @form_field.labels.length
+      labelledbyList = ""
+      for label, i in @form_field.labels
+        if label.id is ""
+          label.id = "#{@form_field.id}-chosen-label-#{i}"
+        labelledbyList += @form_field.labels[i].id + " "
+      @search_field.attr "aria-labelledby", labelledbyList
+
   search_field_disabled: ->
     @is_disabled = @form_field.disabled || @form_field_jq.parents('fieldset').is(':disabled')
 
@@ -165,13 +181,14 @@ class Chosen extends AbstractChosen
 
     @active_field = false
     this.results_hide()
+    @search_field.attr("aria-expanded",false);
 
     @container.removeClass "chosen-container-active"
     this.clear_backstroke()
 
     this.show_search_field_default()
     this.search_field_scale()
-    @search_field.blur()
+    @search_field.trigger "blur"
 
   activate_field: ->
     return if @is_disabled
@@ -180,7 +197,9 @@ class Chosen extends AbstractChosen
     @active_field = true
 
     @search_field.val(@search_field.val())
-    @search_field.focus()
+    @search_field.attr("aria-expanded",true);
+    this.search_results.attr("aria-busy", false);
+    @search_field.trigger "focus"
 
 
   test_active_click: (evt) ->
@@ -222,6 +241,8 @@ class Chosen extends AbstractChosen
       @result_highlight = el
       @result_highlight.addClass "highlighted"
 
+      @search_field.attr("aria-activedescendant", @result_highlight.attr("id"))
+
       maxHeight = parseInt @search_results.css("maxHeight"), 10
       visible_top = @search_results.scrollTop()
       visible_bottom = maxHeight + visible_top
@@ -246,7 +267,7 @@ class Chosen extends AbstractChosen
     @container.addClass "chosen-with-drop"
     @results_showing = true
 
-    @search_field.focus()
+    @search_field.trigger "focus"
     @search_field.val this.get_search_field_value()
 
     this.winnow_results()
@@ -255,6 +276,9 @@ class Chosen extends AbstractChosen
   update_results_content: (content) ->
     @search_results.html content
 
+  fire_search_updated: (search_term) ->
+    @form_field_jq.trigger("chosen:search_updated", {chosen: this, search_term: search_term})
+
   results_hide: ->
     if @results_showing
       this.result_clear_highlight()
@@ -292,7 +316,7 @@ class Chosen extends AbstractChosen
     if target.length
       @result_highlight = target
       this.result_select(evt)
-      @search_field.focus()
+      @search_field.trigger "focus"
 
   search_results_mouseover: (evt) ->
     target = if $(evt.target).hasClass "active-result" then $(evt.target) else $(evt.target).parents(".active-result").first()
@@ -321,7 +345,7 @@ class Chosen extends AbstractChosen
   choice_destroy: (link) ->
     if this.result_deselect( link[0].getAttribute("data-option-array-index") )
       if @active_field
-        @search_field.focus()
+        @search_field.trigger "focus"
       else
         this.show_search_field_default()
 

coffee/chosen.proto.coffee

@@ -2,6 +2,15 @@ class @Chosen extends AbstractChosen
 
   setup: ->
     @current_selectedIndex = @form_field.selectedIndex
+    @is_rtl = @form_field.hasClassName "chosen-rtl"
+
+  set_default_values: ->
+    super()
+
+    # HTML Templates
+    @single_temp = new Template('<a class="chosen-single chosen-default"><span>#{default}</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" /></div><ul class="chosen-results" role="listbox" aria-busy="true"></ul></div>')
+    @multi_temp = new Template('<ul class="chosen-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results" role="listbox" aria-busy="true"></ul></div>')
+    @no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
 
   set_up_html: ->
     container_classes = ["chosen-container"]
@@ -30,6 +39,7 @@ class @Chosen extends AbstractChosen
 
     @search_field = @container.down('input')
     @search_results = @container.down('ul.chosen-results')
+    @search_results.writeAttribute('id', "#{@form_field.id}-chosen-search-results")
     this.search_field_scale()
 
     @search_no_results = @container.down('li.no-results')
@@ -41,6 +51,7 @@ class @Chosen extends AbstractChosen
       @search_container = @container.down('div.chosen-search')
       @selected_item = @container.down('.chosen-single')
 
+    this.set_aria_labels()
     this.results_build()
     this.set_tab_index()
     this.set_label_behavior()
@@ -111,6 +122,21 @@ class @Chosen extends AbstractChosen
     @container.remove()
     @form_field.show()
 
+  set_aria_labels: ->
+    @search_field.writeAttribute "aria-owns", @search_results.readAttribute "id"
+    if @form_field.attributes["aria-label"]
+      @search_field.writeAttribute "aria-label", @form_field.attributes["aria-label"]
+
+    if @form_field.attributes["aria-labelledby"]
+      @search_field.writeAttribute "aria-labelledby", @form_field.attributes["aria-labelledby"]
+    else if Object.prototype.hasOwnProperty.call(@form_field,'labels') && @form_field.labels.length
+      labelledbyList = ""
+      for label, i in @form_field.labels
+        if label.id is ""
+          label.id = "#{@form_field.id}-chosen-label-#{i}"
+        labelledbyList += @form_field.labels[i].id + " "
+      @search_field.writeAttribute "aria-labelledby", labelledbyList
+
   search_field_disabled: ->
     @is_disabled = @form_field.disabled || @form_field.up('fieldset')?.disabled || false
 
@@ -169,6 +195,7 @@ class @Chosen extends AbstractChosen
 
     @active_field = false
     this.results_hide()
+    @search_field.writeAttribute("aria-expanded", "false")
 
     @container.removeClassName "chosen-container-active"
     this.clear_backstroke()
@@ -184,6 +211,8 @@ class @Chosen extends AbstractChosen
     @active_field = true
 
     @search_field.value = this.get_search_field_value()
+    @search_field.writeAttribute("aria-expanded", "true")
+    this.search_results.writeAttribute("aria-busy", "false")
     @search_field.focus()
 
   test_active_click: (evt) ->
@@ -223,9 +252,11 @@ class @Chosen extends AbstractChosen
     @result_highlight = el
     @result_highlight.addClassName "highlighted"
 
-    maxHeight = parseInt @search_results.getStyle('maxHeight'), 10
-    visible_top = @search_results.scrollTop
-    visible_bottom = maxHeight + visible_top
+      @search_field.writeAttribute("aria-activedescendant", @result_highlight.readAttribute("id"))
+
+      maxHeight = parseInt @search_results.getStyle('maxHeight'), 10
+      visible_top = @search_results.scrollTop
+      visible_bottom = maxHeight + visible_top
 
     high_top = @result_highlight.positionedOffset().top
     high_bottom = high_top + @result_highlight.getHeight()
@@ -256,6 +287,9 @@ class @Chosen extends AbstractChosen
   update_results_content: (content) ->
     @search_results.update content
 
+  fire_search_updated: (search_term) ->
+    @form_field.fire("chosen:search_updated", {chosen: this, search_term: search_term})
+
   results_hide: ->
     if @results_showing
       this.result_clear_highlight()

coffee/lib/abstract-chosen.coffee

@@ -117,6 +117,8 @@ class AbstractChosen
     option_el.style.cssText = option.style if option.style
     option_el.setAttribute("data-option-array-index", option.array_index)
     option_el.innerHTML = option.highlighted_html or option.html
+    option_el.setAttribute("role", "option")
+    option_el.id = "#{@form_field.id}-chosen-search-result-#{option.array_index}"
     option_el.title = option.title if option.title
 
     this.outerHTML(option_el)
@@ -211,9 +213,11 @@ class AbstractChosen
 
     if results < 1 and query.length
       this.update_results_content ""
+      this.fire_search_updated query
       this.no_results query
     else
       this.update_results_content this.results_option_build()
+      this.fire_search_updated query
       this.winnow_results_set_highlight() unless options?.skip_highlight
 
   get_search_regex: (escaped_search_string) ->
@@ -337,7 +341,7 @@ class AbstractChosen
       </a>
       <div class="chosen-drop">
         <div class="chosen-search">
-          <input class="chosen-search-input" type="text" autocomplete="off" />
+          <input class="chosen-search-input" type="text" autocomplete="off" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" autocomplete="off" role="listbox" />
         </div>
         <ul class="chosen-results"></ul>
       </div>
@@ -347,11 +351,11 @@ class AbstractChosen
     """
       <ul class="chosen-choices">
         <li class="search-field">
-          <input class="chosen-search-input" type="text" autocomplete="off" value="#{@default_text}" />
+          <input class="chosen-search-input" type="text" autocomplete="off" value="#{@default_text}" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" />
         </li>
       </ul>
       <div class="chosen-drop">
-        <ul class="chosen-results"></ul>
+        <ul class="chosen-results" role="listbox"></ul>
       </div>
     """
 

composer.json

@@ -27,7 +27,7 @@
     "input",
     "ui"
   ],
-  "type": "library",
+  "type": "npm-asset",
   "license": "MIT",
   "minimum-stability": "stable",
   "homepage": "https://harvesthq.github.io/chosen/",

contributing.md

@@ -13,7 +13,7 @@ _**Please Note:** These guidelines are adapted from [@necolas](https://github.co
 an excellent starting point for contributing to any open source project._
 
 
-## Using the issue tracker
+## Using the issue tracker [![Open Source Helpers](https://www.codetriage.com/harvesthq/chosen/badges/users.svg)](https://www.codetriage.com/harvesthq/chosen)
 
 The [issue tracker](https://github.com/harvesthq/chosen/issues) is the
 preferred channel for [bug reports](#bugs), [features requests](#features)
@@ -28,6 +28,7 @@ following restrictions:
 * Please **do not** derail or troll issues. Keep the discussion on topic and
   respect the opinions of others.
 
+You can triage issues which may include reproducing bug reports or asking for vital information, such as version numbers or reproduction instructions. If you would like to start triaging issues, one easy way to get started is to [subscribe to chosen on CodeTriage](https://www.codetriage.com/harvesthq/chosen).
 
 <a name="bugs"></a>
 ## Bug reports

public/options.html

@@ -244,6 +244,11 @@ <h3>Example:</h3>
           <td>chosen:maxselected</td>
           <td>Triggered if <code class="language-javascript">max_selected_options</code> is set and that total is broken.</td>
         </tr>
+        <tr>
+          <td>chosen:search_updated</td>
+          <td>Triggered when Chosen’s search results are updated after typing search term.
+            The event includes a corresponding <code class="language-javascript">search_term</code> parameter.</td>
+        </tr>
         <tr>
           <td>chosen:showing_dropdown</td>
           <td>Triggered when Chosen’s dropdown is opened.</td>

sass/chosen.scss

@@ -108,7 +108,7 @@ $chosen-sprite-retina: url('[email protected]') !default;
       display: block;
       width: 100%;
       height: 100%;
-      background: $chosen-sprite no-repeat 0px 2px;
+      background: $chosen-sprite no-repeat 0 0;
     }
   }
   .chosen-search {
@@ -421,5 +421,9 @@ $chosen-sprite-retina: url('[email protected]') !default;
     background-size: 52px 37px !important;
     background-repeat: no-repeat !important;
   }
+
+  .chosen-container-single .chosen-single div b {
+    background-position: 0 2px;
+  }
 }
 /* @end */