diff --git a/select2.js b/select2.js index 70c63e31..1187c7dc 100644 --- a/select2.js +++ b/select2.js @@ -876,9 +876,12 @@ the specific language governing permissions and limitations under the Apache Lic if (disabled) { node.addClass("select2-disabled"); } if (compound) { node.addClass("select2-result-with-children"); } node.addClass(self.opts.formatResultCssClass(result)); + node.attr("role", "presentation"); label=$(document.createElement("div")); label.addClass("select2-result-label"); + label.attr("id", "select2-result-label-" + nextUid()); + label.attr("role", "option"); formatted=opts.formatResult(result, label, query, self.opts.escapeMarkup); if (formatted!==undefined) { @@ -1465,6 +1468,9 @@ the specific language governing permissions and limitations under the Apache Lic choice = $(choices[index]); choice.addClass("select2-highlighted"); + // ensure assistive technology can determine the active choice + this.search.attr("aria-activedescendant", choice.find(".select2-result-label").attr("id")); + this.ensureHighlightVisible(); data = choice.data("select2-data"); @@ -1809,14 +1815,15 @@ the specific language governing permissions and limitations under the Apache Lic }).html([ "", "  ", - " ", + " ", "", - "", + "", "
", " ", - "
"].join("")); return container; @@ -1919,7 +1926,9 @@ the specific language governing permissions and limitations under the Apache Lic var selection, container = this.container, - dropdown = this.dropdown; + dropdown = this.dropdown, + idSuffix = nextUid(), + elementLabel; if (this.opts.minimumResultsForSearch < 0) { this.showSearch(false); @@ -1931,12 +1940,22 @@ the specific language governing permissions and limitations under the Apache Lic this.focusser = container.find(".select2-focusser"); - // rewrite labels from original element to focusser - this.focusser.attr("id", "s2id_autogen"+nextUid()); + // add aria associations + selection.find(".select2-chosen").attr("id", "select2-chosen-"+idSuffix); + this.focusser.attr("aria-labelledby", "select2-chosen-"+idSuffix); + this.results.attr("id", "select2-results-"+idSuffix); + this.search.attr("aria-owns", "select2-results-"+idSuffix); - $("label[for='" + this.opts.element.attr("id") + "']") + // rewrite labels from original element to focusser + this.focusser.attr("id", "s2id_autogen"+idSuffix); + + elementLabel = $("label[for='" + this.opts.element.attr("id") + "']") .attr('for', this.focusser.attr('id')); + // Ensure the original element retains an accessible name + var originalTitle = this.opts.element.attr("title"); + this.opts.element.attr("title", (originalTitle || elementLabel.text())); + this.focusser.attr("tabindex", this.elementTabIndex); this.search.on("keydown", this.bind(function (e) {