From 7aee340a8b31f042fbae1f4db7c6bee1c6a9c046 Mon Sep 17 00:00:00 2001 From: Vladimir Kolmakov Date: Wed, 16 Aug 2017 11:28:50 -0500 Subject: [PATCH] Add aria-activedescendant attribute only when dropdown is active --- assets/scripts/src/choices.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index 5cd4db6..e83ac32 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -797,6 +797,10 @@ class Choices { this.containerOuter.setAttribute('aria-expanded', 'false'); this.dropdown.classList.remove(this.config.classNames.activeState); this.dropdown.setAttribute('aria-expanded', 'false'); + // IE11 ignores aria-label and blocks virtual keyboard + // if aria-activedescendant is set without a dropdown + this.input.removeAttribute('aria-activedescendant'); + this.containerOuter.removeAttribute('aria-activedescendant'); if (isFlipped) { this.containerOuter.classList.remove(this.config.classNames.flippedState); @@ -2198,7 +2202,16 @@ class Choices { // Highlight given option, and set accessiblity attributes passedEl.classList.add(this.config.classNames.highlightedState); passedEl.setAttribute('aria-selected', 'true'); - this.containerOuter.setAttribute('aria-activedescendant', passedEl.id); + + const hasActiveDropdown = this.dropdown.classList.contains( + this.config.classNames.activeState + ); + if (hasActiveDropdown) { + // IE11 ignores aria-label and blocks virtual keyboard + // if aria-activedescendant is set without a dropdown + this.input.setAttribute('aria-activedescendant', passedEl.id); + this.containerOuter.setAttribute('aria-activedescendant', passedEl.id); + } } }