From 06ff974f632ce312ea8a0710d2add114c0ed7a8b Mon Sep 17 00:00:00 2001
From: Oliver Foster <oliver.foster@kineo.com>
Date: Mon, 11 Nov 2024 11:06:51 +0000
Subject: [PATCH 1/6] Fix: a11y combobox attributes (fixes #147)

---
 templates/matchingDropDown.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/templates/matchingDropDown.jsx b/templates/matchingDropDown.jsx
index 94a438d..8f9dd95 100644
--- a/templates/matchingDropDown.jsx
+++ b/templates/matchingDropDown.jsx
@@ -176,8 +176,10 @@ export default function MatchingDropDown(props) {
           !_isEnabled && 'is-disabled',
           hasActiveOption && 'is-selected'
         ])}
+        role="combobox"
         aria-haspopup="listbox"
         aria-expanded={isOpen}
+        aria-controls="${_id}-matching-item-${_itemIndex}__list"
         onMouseDown={onStartInteraction}
         onTouchStart={onStartInteraction}
         onClick={onButtonClick}
@@ -205,6 +207,7 @@ export default function MatchingDropDown(props) {
           left: buttonOffsetLeft,
           width: buttonWidth
         }}
+        id="${_id}-matching-item-${_itemIndex}__list"
         role="listbox"
         tabIndex="-1"
         onBlur={onListBlur}

From 9d92a1c06f4ea0b21b45cdf47b464437c0dc5d69 Mon Sep 17 00:00:00 2001
From: Oliver Foster <oliver.foster@kineo.com>
Date: Mon, 11 Nov 2024 15:37:26 +0000
Subject: [PATCH 2/6] Recommendations

---
 templates/matchingDropDown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/matchingDropDown.jsx b/templates/matchingDropDown.jsx
index 8f9dd95..0bd0fc3 100644
--- a/templates/matchingDropDown.jsx
+++ b/templates/matchingDropDown.jsx
@@ -179,7 +179,7 @@ export default function MatchingDropDown(props) {
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded={isOpen}
-        aria-controls="${_id}-matching-item-${_itemIndex}__list"
+        aria-controls={"${_id}-matching-item-${_itemIndex}__list"}
         onMouseDown={onStartInteraction}
         onTouchStart={onStartInteraction}
         onClick={onButtonClick}
@@ -207,7 +207,7 @@ export default function MatchingDropDown(props) {
           left: buttonOffsetLeft,
           width: buttonWidth
         }}
-        id="${_id}-matching-item-${_itemIndex}__list"
+        id={"${_id}-matching-item-${_itemIndex}__list"}
         role="listbox"
         tabIndex="-1"
         onBlur={onListBlur}

From 08c15ea1898fbf5e1687902d8b1c22dae4a6389e Mon Sep 17 00:00:00 2001
From: Oliver Foster <oliver.foster@kineo.com>
Date: Mon, 11 Nov 2024 15:38:18 +0000
Subject: [PATCH 3/6] Recommendations

---
 templates/matchingDropDown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/matchingDropDown.jsx b/templates/matchingDropDown.jsx
index 0bd0fc3..972adcb 100644
--- a/templates/matchingDropDown.jsx
+++ b/templates/matchingDropDown.jsx
@@ -179,7 +179,7 @@ export default function MatchingDropDown(props) {
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded={isOpen}
-        aria-controls={"${_id}-matching-item-${_itemIndex}__list"}
+        aria-controls={`${_id}-matching-item-${_itemIndex}__list`}
         onMouseDown={onStartInteraction}
         onTouchStart={onStartInteraction}
         onClick={onButtonClick}
@@ -207,7 +207,7 @@ export default function MatchingDropDown(props) {
           left: buttonOffsetLeft,
           width: buttonWidth
         }}
-        id={"${_id}-matching-item-${_itemIndex}__list"}
+        id={`${_id}-matching-item-${_itemIndex}__list`}
         role="listbox"
         tabIndex="-1"
         onBlur={onListBlur}

From 271aa86dcb4e65d4a459540d9188b573eee5cbee Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:44:21 +0000
Subject: [PATCH 4/6] make ul and button aria-labelledby the same as per WCAG
 example

- questionTextId removed. This reads without being explicitly defined.
---
 templates/matching.jsx         | 3 +--
 templates/matchingDropDown.jsx | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/templates/matching.jsx b/templates/matching.jsx
index abce671..64a0fbe 100644
--- a/templates/matching.jsx
+++ b/templates/matching.jsx
@@ -49,7 +49,6 @@ export default function Matching(props) {
           const activeOption = _options.find(option => (option._itemIndex === _index) && option._isActive);
           const displayItemAsCorrect = (!_isEnabled && _shouldShowMarking && (_isCorrectAnswerShown || activeOption?._shouldBeSelected));
           const questionTitleId = `${_id}-matching-item-${_index}__title`;
-          const questionTextId = `${_id}-matching-item-${_index}__text`;
           const hasMultipleCorrectAnswers = _correctAnswers.length > 1;
 
           return (
@@ -70,7 +69,7 @@ export default function Matching(props) {
 
               <div className="matching-item__select-container js-matching-item-select-container">
 
-                <templates.matchingDropDown {...props} _itemIndex={_index} questionTitleId={questionTitleId} questionTextId={questionTextId}/>
+                <templates.matchingDropDown {...props} _itemIndex={_index} questionTitleId={questionTitleId}/>
 
                 <div className="matching-item__select-state">
                   <div className="matching-item__select-icon matching-item__select-correct-icon" aria-label={_globals._accessibility._ariaLabels.correct}>
diff --git a/templates/matchingDropDown.jsx b/templates/matchingDropDown.jsx
index 972adcb..c0093b9 100644
--- a/templates/matchingDropDown.jsx
+++ b/templates/matchingDropDown.jsx
@@ -184,10 +184,10 @@ export default function MatchingDropDown(props) {
         onTouchStart={onStartInteraction}
         onClick={onButtonClick}
         ref={button}
-        aria-labelledby={props.questionTitleId + ' ' + props.questionTextId}
+        aria-labelledby={props.questionTitleId}
       >
 
-        <span id={props.questionTextId} className="dropdown__inner js-dropdown-inner" dangerouslySetInnerHTML={{ __html: displayActiveOption?.text }}>
+        <span className="dropdown__inner js-dropdown-inner" dangerouslySetInnerHTML={{ __html: displayActiveOption?.text }}>
         </span>
 
         <span className="dropdown__icon" aria-hidden="true">
@@ -214,7 +214,7 @@ export default function MatchingDropDown(props) {
         ref={list}
         disabled={!_isEnabled}
         aria-activedescendant={highlightedOption && `dropdown__item__${_id}__${_itemIndex}__${highlightedOption._index}`}
-        aria-labelledby={`${_id}-matching-item-${_itemIndex}__title`}
+        aria-labelledby={props.questionTitleId}
       >
 
         {options.map(({

From ee5520d14251f8efc155dec0d74cd76cc55f16e6 Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:46:40 +0000
Subject: [PATCH 5/6] move aria-activedescendant from ul to button as per WCAG
 example

---
 templates/matchingDropDown.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/matchingDropDown.jsx b/templates/matchingDropDown.jsx
index c0093b9..93977e3 100644
--- a/templates/matchingDropDown.jsx
+++ b/templates/matchingDropDown.jsx
@@ -185,6 +185,7 @@ export default function MatchingDropDown(props) {
         onClick={onButtonClick}
         ref={button}
         aria-labelledby={props.questionTitleId}
+        aria-activedescendant={highlightedOption && `dropdown__item__${_id}__${_itemIndex}__${highlightedOption._index}`}
       >
 
         <span className="dropdown__inner js-dropdown-inner" dangerouslySetInnerHTML={{ __html: displayActiveOption?.text }}>
@@ -213,7 +214,6 @@ export default function MatchingDropDown(props) {
         onBlur={onListBlur}
         ref={list}
         disabled={!_isEnabled}
-        aria-activedescendant={highlightedOption && `dropdown__item__${_id}__${_itemIndex}__${highlightedOption._index}`}
         aria-labelledby={props.questionTitleId}
       >
 

From 98b84d6a13c7cd7480479a41f45cc8e28cd0dad0 Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Tue, 19 Nov 2024 17:20:31 +0000
Subject: [PATCH 6/6] revert aria-activedescendant back to ul

---
 templates/matchingDropDown.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/matchingDropDown.jsx b/templates/matchingDropDown.jsx
index 93977e3..960ea86 100644
--- a/templates/matchingDropDown.jsx
+++ b/templates/matchingDropDown.jsx
@@ -185,7 +185,6 @@ export default function MatchingDropDown(props) {
         onClick={onButtonClick}
         ref={button}
         aria-labelledby={props.questionTitleId}
-        aria-activedescendant={highlightedOption && `dropdown__item__${_id}__${_itemIndex}__${highlightedOption._index}`}
       >
 
         <span className="dropdown__inner js-dropdown-inner" dangerouslySetInnerHTML={{ __html: displayActiveOption?.text }}>
@@ -215,6 +214,7 @@ export default function MatchingDropDown(props) {
         ref={list}
         disabled={!_isEnabled}
         aria-labelledby={props.questionTitleId}
+        aria-activedescendant={highlightedOption && `dropdown__item__${_id}__${_itemIndex}__${highlightedOption._index}`}
       >
 
         {options.map(({