Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Dec 4, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
06ff974
Fix: a11y combobox attributes (fixes #147)
oliverfoster Nov 11, 2024
9d92a1c
Recommendations
oliverfoster Nov 11, 2024
08c15ea
Recommendations
oliverfoster Nov 11, 2024
271aa86
make ul and button aria-labelledby the same as per WCAG example
kirsty-hames Nov 14, 2024
ee5520d
move aria-activedescendant from ul to button as per WCAG example
kirsty-hames Nov 14, 2024
98b84d6
revert aria-activedescendant back to ul
kirsty-hames Nov 19, 2024
b77f232
set ariaLabel to provide fallback aria if item text doesn't exist
kirsty-hames Nov 20, 2024
0f5203a
change ariaLabel var to ariaLabelledBy
kirsty-hames Nov 21, 2024
c328cbc
update ul aria-labelledby prop for consistency with button
kirsty-hames Nov 21, 2024
d7efd80
aria fixes
kirsty-hames Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions templates/matching.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand All @@ -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}>
Expand Down
13 changes: 9 additions & 4 deletions templates/matchingDropDown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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">
Expand All @@ -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(({
Expand Down