Fix: a11y combobox attributes (fixes #147) (#198)

adaptlearning · Dec 4, 2024 · 9998391 · 9998391
1 parent ca9c8ba
commit 9998391
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/templates/matching.jsx b/templates/matching.jsx
@@ -49,8 +49,8 @@ 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;
+          const ariaLabelledBy = text ? questionTitleId : (ariaQuestion ? null : `${_id}-header`);
 
           return (
             <div key={_index} className={classes([
@@ -70,7 +70,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} ariaLabelledBy={ariaLabelledBy}/>
 
                 <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
@@ -149,7 +149,8 @@ export default function MatchingDropDown(props) {
     _options,
     _isCorrectAnswerShown,
     setActiveOption,
-    setHighlightedOption
+    setHighlightedOption,
+    ariaQuestion
   } = props;
 
   const options = _options.filter(({ _itemIndex: itemIndex }) => (itemIndex === _itemIndex) || (itemIndex === -1));
@@ -176,16 +177,19 @@ 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}
         ref={button}
-        aria-labelledby={props.questionTitleId + ' ' + props.questionTextId}
+        aria-labelledby={props.ariaLabelledBy}
+        aria-label={ariaQuestion || null}
       >
 
-        <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">
@@ -205,13 +209,14 @@ export default function MatchingDropDown(props) {
           left: buttonOffsetLeft,
           width: buttonWidth
         }}
+        id={`${_id}-matching-item-${_itemIndex}__list`}
         role="listbox"
         tabIndex="-1"
         onBlur={onListBlur}
         ref={list}
         disabled={!_isEnabled}
+        aria-labelledby={props.ariaLabelledBy}
         aria-activedescendant={highlightedOption && `dropdown__item__${_id}__${_itemIndex}__${highlightedOption._index}`}
-        aria-labelledby={`${_id}-matching-item-${_itemIndex}__title`}
       >
 
         {options.map(({