Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A11y updates #2764

Closed
wants to merge 20 commits into from
Closed

A11y updates #2764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
4f8008c
Add initial round of aria elements to jQuery
cooperfellows Apr 26, 2016
5666e31
Add ARIA elements in prototype code
cooperfellows Apr 26, 2016
2c4a76b
Add new trigger buildresultslist
cooperfellows Apr 26, 2016
8198d30
Update aria-expanded during activate/close of field
cooperfellows Apr 26, 2016
d9f8f91
Add aria-busy to search list
cooperfellows Apr 27, 2016
27b32f1
Add aria-busy to prototype
cooperfellows Apr 27, 2016
7381e1e
Remove buildresults trigger
cooperfellows Apr 27, 2016
5478548
Update aria-busy selector
cooperfellows Apr 27, 2016
face961
Merge branch 'refs/heads/a11y-updates-busy' into a11y-updates
cooperfellows Apr 27, 2016
458bd05
Update prototype with correct attribute syntax
cooperfellows Apr 27, 2016
ce81dc5
Update prototype with correct attribute syntax
cooperfellows Apr 27, 2016
1120b1f
Merge remote-tracking branch 'origin/a11y-updates' into a11y-updates
cooperfellows Apr 27, 2016
9cb8fa5
Update missed read attribute value call
cooperfellows Apr 27, 2016
511154a
Ensure controls.labels support exists
cooperfellows May 9, 2016
d020ba5
Add IE8 Compatible version of hasOwnProperty
cooperfellows May 23, 2016
a544375
Add aria-hidden, aria-selected, hidden attrs to address accessibility…
Dec 21, 2016
2692b89
wrap highlighted row in <strong> to provide meaning to browsers that …
Dec 22, 2016
93bea6a
Merge tag 'v1.6.2' into a11y-updates
Dec 22, 2016
e60af13
Use .get(0) for DOM element for $.contains() in mouseout callback
Dec 22, 2016
13e02b3
Revert commits that added "<strong>" element to highlighted row
Dec 23, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ GEM

PLATFORMS
ruby
x64-mingw32

DEPENDENCIES
compass

BUNDLED WITH
1.13.6
29 changes: 27 additions & 2 deletions coffee/chosen.jquery.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,17 @@ class Chosen extends AbstractChosen
@container = ($ "<div />", container_props)

if @is_multiple
@container.html '<ul class="chosen-choices"><li class="search-field"><input type="text" value="' + @default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>'
@container.html '<ul class="chosen-choices"><li class="search-field"><input type="text" value="' + @default_text + '" class="default" autocomplete="off" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" style="width:25px;" /></li></ul><div class="chosen-drop" aria-hidden="true"><ul class="chosen-results" role="listbox" aria-busy="true"></ul></div>'
else
@container.html '<a class="chosen-single chosen-default"><span>' + @default_text + '</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>'
@container.html '<a class="chosen-single chosen-default"><span>' + @default_text + '</span><div><b></b></div></a><div class="chosen-drop" aria-hidden="true"><div class="chosen-search"><input type="text" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" autocomplete="off" /></div><ul class="chosen-results" role="listbox" aria-busy="true"></ul></div>'

@form_field_jq.hide().after @container
@form_field_jq.attr "hidden", true
@dropdown = @container.find('div.chosen-drop').first()

@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()
Expand All @@ -62,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()
Expand Down Expand Up @@ -113,6 +116,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_jq[0].disabled
if(@is_disabled)
Expand Down Expand Up @@ -159,6 +176,7 @@ class Chosen extends AbstractChosen

@active_field = false
this.results_hide()
@search_field.attr("aria-expanded",false);

@container.removeClass "chosen-container-active"
this.clear_backstroke()
Expand All @@ -171,6 +189,8 @@ class Chosen extends AbstractChosen
@active_field = true

@search_field.val(@search_field.val())
@search_field.attr("aria-expanded",true);
this.search_results.attr("aria-busy", false);
@search_field.focus()


Expand Down Expand Up @@ -213,6 +233,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
Expand All @@ -235,6 +257,7 @@ class Chosen extends AbstractChosen
return false

@container.addClass "chosen-with-drop"
@dropdown.attr "aria-hidden", false
@results_showing = true

@search_field.focus()
Expand All @@ -251,6 +274,7 @@ class Chosen extends AbstractChosen
this.result_clear_highlight()

@container.removeClass "chosen-with-drop"
@dropdown.attr "aria-hidden", true
@form_field_jq.trigger("chosen:hiding_dropdown", {chosen: this})

@results_showing = false
Expand Down Expand Up @@ -348,6 +372,7 @@ class Chosen extends AbstractChosen
this.reset_single_select_options()

high.addClass("result-selected")
high.attr "aria-selected", true

item = @results_data[ high[0].getAttribute("data-option-array-index") ]
item.selected = true
Expand Down
30 changes: 28 additions & 2 deletions coffee/chosen.proto.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ class @Chosen extends AbstractChosen
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" /></div><ul class="chosen-results"></ul></div>')
@multi_temp = new Template('<ul class="chosen-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>')
@single_temp = new Template('<a class="chosen-single chosen-default"><span>#{default}</span><div><b></b></div></a><div class="chosen-drop" aria-hidden="true"><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" aria-hidden="true"><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: ->
Expand All @@ -28,10 +28,12 @@ class @Chosen extends AbstractChosen
@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.setAttribute "hidden", true
@dropdown = @container.down('div.chosen-drop')

@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')
Expand All @@ -43,6 +45,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()
Expand Down Expand Up @@ -108,6 +111,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
if(@is_disabled)
Expand Down Expand Up @@ -153,6 +171,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()
Expand All @@ -165,6 +184,8 @@ class @Chosen extends AbstractChosen
@active_field = true

@search_field.value = @search_field.value
@search_field.writeAttribute("aria-expanded", "true")
this.search_results.writeAttribute("aria-busy", "false")
@search_field.focus()

test_active_click: (evt) ->
Expand Down Expand Up @@ -204,6 +225,8 @@ class @Chosen extends AbstractChosen
@result_highlight = el
@result_highlight.addClassName "highlighted"

@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
Expand All @@ -226,6 +249,7 @@ class @Chosen extends AbstractChosen
return false

@container.addClassName "chosen-with-drop"
@container.setAttribute "aria-hidden", false
@results_showing = true

@search_field.focus()
Expand All @@ -242,6 +266,7 @@ class @Chosen extends AbstractChosen
this.result_clear_highlight()

@container.removeClassName "chosen-with-drop"
@container.setAttribute "aria-hidden", true
@form_field.fire("chosen:hiding_dropdown", {chosen: this})

@results_showing = false
Expand Down Expand Up @@ -339,6 +364,7 @@ class @Chosen extends AbstractChosen
this.reset_single_select_options()

high.addClassName("result-selected")
high.setAttribute "aria-selected", true

item = @results_data[ high.getAttribute("data-option-array-index") ]
item.selected = true
Expand Down
3 changes: 3 additions & 0 deletions coffee/lib/abstract-chosen.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,9 @@ class AbstractChosen
option_el.className = classes.join(" ")
option_el.style.cssText = option.style
option_el.setAttribute("data-option-array-index", option.array_index)
option_el.setAttribute("role", "option")
option_el.id = "#{@form_field.id}-chosen-search-result-#{option.array_index}"
option_el.setAttribute("aria-selected", "true") if option.selected
option_el.innerHTML = option.search_text
option_el.title = option.title if option.title

Expand Down