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: Seperate IDs for prefix/suffix and aria-describedby added for suffix (fixes #143) #144

Merged
merged 5 commits into from
Oct 4, 2024
+10 −3
Merged

Fix: Seperate IDs for prefix/suffix and aria-describedby added for suffix (fixes #143) #144

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
af70fbc
Fix: seperate IDs for prefix/suffix (fixes #143)
joe-allen-89 Jul 9, 2024
4524b7e
text input content removed from aria-labelledby
joe-allen-89 Jul 10, 2024
ffa909d
suffix moved to aria-describedby
joe-allen-89 Jul 10, 2024
2ba5195
placeholder added to aria-labelledby
joe-allen-89 Jul 30, 2024
0a87b52
placeholder div element added for aria-describedby
joe-allen-89 Oct 2, 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
13 changes: 10 additions & 3 deletions templates/textinput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function TextInput (props) {
<div className="textinput-item__prefix-container">
<label
className="textinput-item__prefix"
id={`${_id}-${index}-aria`}
id={`${_id}-${index}-aria-prefix`}
htmlFor={`${_id}-${index}`}
aria-label={prefix}
dangerouslySetInnerHTML={{ __html: compile(prefix, props) }}
Expand All @@ -61,11 +61,18 @@ export default function TextInput (props) {
placeholder={placeholder}
data-id={`${input}-${index}`}
id={`${_id}-${index}`}
aria-labelledby={prefix && `${_id}-${index}-aria`}
aria-labelledby={(prefix) ? `${_id}-${index}-aria-prefix ${_id}-${index}-aria-placeholder` : null}
aria-describedby={(suffix) ? `${_id}-${index}-aria-suffix` : null}
aria-label={placeholder}
defaultValue={userAnswer}
disabled={!_isEnabled}
/>
<div
className='textinput-item__placeholder aria-label'
id={`${_id}-${index}-aria-placeholder`}
aria-hidden='true'>
{placeholder}
</div>
<div className="textinput-item__state">
<div className="textinput-item__icon textinput-item__correct-icon" aria-label={_globals._accessibility._ariaLabels.correct}>
<div className="icon" aria-hidden="true"/>
Expand All @@ -80,7 +87,7 @@ export default function TextInput (props) {
<div className="textinput-item__suffix-container">
<label
className="textinput-item__suffix"
id={`${_id}-${index}-aria`}
id={`${_id}-${index}-aria-suffix`}
htmlFor={`${_id}-${index}`}
aria-label={suffix}
dangerouslySetInnerHTML={{ __html: compile(suffix, props) }}
Expand Down