Fix: aria-labelledby added to matching dropdown (fixes #190)

adaptlearning · Jul 12, 2024 · dd16360 · dd16360
1 parent 92ab2e5
commit dd16360
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/templates/matching.jsx b/templates/matching.jsx
@@ -53,7 +53,7 @@ export default function Matching(props) {
 
               {text &&
               <div className="matching-item__title">
-                <div className="matching-item__title_inner" dangerouslySetInnerHTML={{ __html: compile(text) }}>
+                <div id={`${_id}-matching-item-${_index}__title`} className="matching-item__title_inner" dangerouslySetInnerHTML={{ __html: compile(text) }}>
                 </div>
               </div>
               }

diff --git a/templates/matchingDropDown.jsx b/templates/matchingDropDown.jsx
@@ -209,6 +209,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`}
       >
 
         {options.map(({