Skip to content

Add accessible button element to dropdown arrow for screen reader support #68

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

Draft
Copilot wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

Add accessible button element to dropdown arrow for screen reader support #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5d57740
Initial plan
Copilot Dec 10, 2025
a6e4358
Add accessible button element inside arrow div for screen readers
Copilot Dec 10, 2025
83b7b01
Address code review feedback: simplify button CSS
Copilot Dec 10, 2025
f6a5f88
Merge branch 'master' into copilot/fix-chosen-accessibility-issue
JJJ Dec 14, 2025
2398cc8
Update coffee/chosen.proto.coffee
JJJ Dec 14, 2025
f9147d4
Update coffee/lib/abstract-chosen.coffee
JJJ Dec 14, 2025
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: 2 additions & 2 deletions coffee/chosen.jquery.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ class Chosen extends AbstractChosen
@container.addClass "chosen-dropup"

@container.addClass "chosen-with-drop"
@container.find(".chosen-single div").attr("aria-label", "Hide options")
@container.find(".chosen-single-button").attr("aria-label", "Hide options")
@results_showing = true

@search_field.attr("aria-expanded", true)
Expand All @@ -339,7 +339,7 @@ class Chosen extends AbstractChosen

@container.removeClass "chosen-with-drop"
@container.removeClass "chosen-dropup"
@container.find(".chosen-single div").attr("aria-label", "Show options")
@container.find(".chosen-single-button").attr("aria-label", "Show options")
@form_field_jq.trigger("chosen:hiding_dropdown", {chosen: this})

@search_field.attr("aria-expanded", false)
Expand Down
12 changes: 7 additions & 5 deletions coffee/chosen.proto.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ class @Chosen extends AbstractChosen
'<a class="chosen-single chosen-default" role="button">
<span>#{default}</span>
<div aria-label="Show options">
<b aria-hidden="true"></b>
<b aria-hidden="true">
<button type="button" class="chosen-single-button" aria-label="Show options" tabindex="-1"></button>
</b>
</div>
</a>
<div class="chosen-drop">
Expand Down Expand Up @@ -379,8 +381,8 @@ class @Chosen extends AbstractChosen
@container.addClassName "chosen-dropup"

@container.addClassName "chosen-with-drop"
single_div = @container.down(".chosen-single div")
single_div.writeAttribute("aria-label", "Hide options") if single_div
single_button = @container.down(".chosen-single-button")
single_button.writeAttribute("aria-label", "Hide options") if single_button
@results_showing = true

@search_field.writeAttribute("aria-expanded", "true")
Expand All @@ -405,8 +407,8 @@ class @Chosen extends AbstractChosen

@container.removeClassName "chosen-with-drop"
@container.removeClassName "chosen-dropup"
single_div = @container.down(".chosen-single div")
single_div.writeAttribute("aria-label", "Show options") if single_div
single_button = @container.down(".chosen-single-button")
single_button.writeAttribute("aria-label", "Show options") if single_button
@form_field.fire("chosen:hiding_dropdown", {chosen: this})

@search_field.writeAttribute("aria-expanded", "false")
Expand Down
6 changes: 4 additions & 2 deletions coffee/lib/abstract-chosen.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -498,8 +498,10 @@ class AbstractChosen
"""
<a class="chosen-single chosen-default" role="button">
<span>#{this.escape_html(@default_text)}</span>
<div aria-label="Show options">
<b aria-hidden="true"></b>
<div>
<b aria-hidden="true">
<button type="button" class="chosen-single-button" aria-label="Show options" tabindex="-1"></button>
</b>
</div>
</a>
<div class="chosen-drop">
Expand Down
18 changes: 18 additions & 0 deletions docs/chosen.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/chosen.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 5 additions & 3 deletions docs/chosen.jquery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -952,7 +952,9 @@ This file is generated by `grunt build`, do not edit it by hand.
return `<a class="chosen-single chosen-default" role="button">
<span>${this.escape_html(this.default_text)}</span>
<div aria-label="Show options">
<b aria-hidden="true"></b>
<b aria-hidden="true">
<button type="button" class="chosen-single-button" aria-label="Show options" tabindex="-1"></button>
</b>
</div>
</a>
<div class="chosen-drop">
Expand Down Expand Up @@ -1460,7 +1462,7 @@ This file is generated by `grunt build`, do not edit it by hand.
this.container.addClass("chosen-dropup");
}
this.container.addClass("chosen-with-drop");
this.container.find(".chosen-single div").attr("aria-label", "Hide options");
this.container.find(".chosen-single-button").attr("aria-label", "Hide options");
this.results_showing = true;
this.search_field.attr("aria-expanded", true);
this.search_field.trigger("focus");
Expand Down Expand Up @@ -1489,7 +1491,7 @@ This file is generated by `grunt build`, do not edit it by hand.
this.result_clear_highlight();
this.container.removeClass("chosen-with-drop");
this.container.removeClass("chosen-dropup");
this.container.find(".chosen-single div").attr("aria-label", "Show options");
this.container.find(".chosen-single-button").attr("aria-label", "Show options");
this.form_field_jq.trigger("chosen:hiding_dropdown", {
chosen: this
});
Expand Down
Loading