Merge pull request #13 from JJJ/issue/2726

Issue/2726

Author: JJJ

coffee/chosen.jquery.coffee

@@ -164,7 +164,8 @@ class Chosen extends AbstractChosen
       this.activate_field()
 
   container_mouseup: (evt) ->
-    this.results_reset(evt) if evt.target.nodeName is "ABBR" and not @is_disabled
+    if not @is_disabled and @allow_single_deselect and $(evt.target).hasClass('search-choice-close')
+      this.results_reset(evt)
 
   search_results_mousewheel: (evt) ->
     delta = evt.originalEvent.deltaY or -evt.originalEvent.wheelDelta or evt.originalEvent.detail if evt.originalEvent
@@ -337,7 +338,7 @@ class Chosen extends AbstractChosen
     if item.disabled
       choice.addClass 'search-choice-disabled'
     else
-      close_link = $('<a />', { class: 'search-choice-close', 'data-option-array-index': item.array_index })
+      close_link = $('<button />', { type: 'button', tabindex: -1, class: 'search-choice-close', 'data-option-array-index': item.array_index })
       close_link.on 'click.chosen', (evt) => this.choice_destroy_link_click(evt)
       choice.append close_link
     if @inherit_option_classes && item.classes
@@ -375,7 +376,7 @@ class Chosen extends AbstractChosen
 
   results_reset_cleanup: ->
     @current_selectedIndex = @form_field.selectedIndex
-    @selected_item.find("abbr").remove()
+    @selected_item.find('.search-choice-close').remove()
 
   result_select: (evt) ->
     if @result_highlight
@@ -452,8 +453,9 @@ class Chosen extends AbstractChosen
 
   single_deselect_control_build: ->
     return unless @allow_single_deselect
-    @selected_item.find("span").first().after "<abbr class=\"search-choice-close\"></abbr>" unless @selected_item.find("abbr").length
-    @selected_item.addClass("chosen-single-with-deselect")
+    unless @selected_item.find('.search-choice-close').length
+      @selected_item.find('span').first().after '<button type="button" tabindex="-1" class="search-choice-close"></button>'
+    @selected_item.addClass('chosen-single-with-deselect')
 
   get_search_field_value: ->
     @search_field.val()
@@ -499,7 +501,7 @@ class Chosen extends AbstractChosen
 
   keydown_backstroke: ->
     if @pending_backstroke
-      this.choice_destroy @pending_backstroke.find("a").first()
+      this.choice_destroy @pending_backstroke.find('.search-choice-close').first()
       this.clear_backstroke()
     else
       next_available_destroy = @search_container.siblings("li.search-choice").last()

coffee/chosen.proto.coffee

@@ -111,7 +111,7 @@ class @Chosen extends AbstractChosen
 
     if @is_multiple
       @search_choices.stopObserving()
-      @container.select(".search-choice-close").each (choice) ->
+      @container.select('.search-choice-close').each (choice) ->
         choice.stopObserving()
     else
       @selected_item.stopObserving()
@@ -348,7 +348,7 @@ class @Chosen extends AbstractChosen
     if item.disabled
       choice.addClassName 'search-choice-disabled'
     else
-      close_link = new Element('a', { href: '#', class: 'search-choice-close', rel: item.array_index })
+      close_link = new Element('button', { type: 'button', tabindex: -1, class: 'search-choice-close', rel: item.array_index })
       close_link.observe "click", (evt) => this.choice_destroy_link_click(evt)
       choice.insert close_link
     if @inherit_option_classes && item.classes
@@ -386,7 +386,7 @@ class @Chosen extends AbstractChosen
 
   results_reset_cleanup: ->
     @current_selectedIndex = @form_field.selectedIndex
-    deselect_trigger = @selected_item.down("abbr")
+    deselect_trigger = @selected_item.down('.search-choice-close')
     deselect_trigger.remove() if(deselect_trigger)
 
   result_select: (evt) ->
@@ -462,8 +462,9 @@ class @Chosen extends AbstractChosen
 
   single_deselect_control_build: ->
     return unless @allow_single_deselect
-    @selected_item.down("span").insert { after: "<abbr class=\"search-choice-close\"></abbr>" } unless @selected_item.down("abbr")
-    @selected_item.addClassName("chosen-single-with-deselect")
+    unless @selected_item.down('.search-choice-close')
+      @selected_item.down('span').insert { after: '<button type="button" tabindex="-1" class="search-choice-close"></button>' }
+    @selected_item.addClassName('chosen-single-with-deselect')
 
   get_search_field_value: ->
     @search_field.value
@@ -515,7 +516,7 @@ class @Chosen extends AbstractChosen
 
   keydown_backstroke: ->
     if @pending_backstroke
-      this.choice_destroy @pending_backstroke.down("a")
+      this.choice_destroy @pending_backstroke.down(".search-choice-close")
       this.clear_backstroke()
     else
       next_available_destroy = @search_container.siblings().last()

sass/chosen.scss

@@ -31,7 +31,8 @@ $chosen-sprite-retina: url('[email protected]') !default;
     cursor: pointer;
   }
 
-  .search-choice, .chosen-single{
+  .search-choice,
+  .chosen-single{
     .group-name{
       margin-right: 4px;
       overflow: hidden;
@@ -46,6 +47,21 @@ $chosen-sprite-retina: url('[email protected]') !default;
       }
     }
   }
+  .search-choice-close {
+    border: none;
+    cursor: pointer;
+    background: none;
+    display: block;
+    width: 12px;
+    height: 12px;
+    background: $chosen-sprite -42px 1px no-repeat;
+    font-size: 1px;
+
+    &:hover,
+    &:focus {
+      background-position: -42px -10px;
+    }
+  }
 }
 /* @end */
 
@@ -81,21 +97,10 @@ $chosen-sprite-retina: url('[email protected]') !default;
   .chosen-single-with-deselect span {
     margin-right: 38px;
   }
-  .chosen-single abbr {
+  .chosen-single .search-choice-close {
     position: absolute;
     top: 6px;
     right: 26px;
-    display: block;
-    width: 12px;
-    height: 12px;
-    background: $chosen-sprite -42px 1px no-repeat;
-    font-size: 1px;
-    &:hover {
-      background-position: -42px -10px;
-    }
-  }
-  &.chosen-disabled .chosen-single abbr:hover {
-    background-position: -42px -10px;
   }
   .chosen-single div {
     position: absolute;
@@ -257,14 +262,6 @@ $chosen-sprite-retina: url('[email protected]') !default;
         position: absolute;
         top: 4px;
         right: 3px;
-        display: block;
-        width: 12px;
-        height: 12px;
-        background: $chosen-sprite -42px 1px no-repeat;
-        font-size: 1px;
-        &:hover {
-          background-position: -42px -10px;
-        }
       }
     }
     &.search-choice-disabled {
@@ -331,8 +328,14 @@ $chosen-sprite-retina: url('[email protected]') !default;
   .chosen-single {
     cursor: default;
   }
-  .chosen-choices .search-choice .search-choice-close {
+  .search-choice-close {
     cursor: default;
+    &:hover,
+    &:focus {
+      outline: none;
+      background-position: -42px 1px;
+      cursor: default;
+    }
   }
 }
 /* @end */
@@ -356,7 +359,7 @@ $chosen-sprite-retina: url('[email protected]') !default;
     right: auto;
     left: 3px;
   }
-  .chosen-single abbr {
+  .chosen-single .search-choice-close {
     right: auto;
     left: 26px;
   }
@@ -407,10 +410,9 @@ $chosen-sprite-retina: url('[email protected]') !default;
 /* @group Retina compatibility */
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
   .chosen-rtl .chosen-search input[type="text"],
-  .chosen-container-single .chosen-single abbr,
   .chosen-container-single .chosen-single div b,
   .chosen-container-single .chosen-search input[type="text"],
-  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
+  .chosen-container .search-choice-close,
   .chosen-container .chosen-results-scroll-down span,
   .chosen-container .chosen-results-scroll-up span {
     background-image: $chosen-sprite-retina !important;