Skip to content

Remove aria attributes in order to read card body content #90

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

Merged
merged 4 commits into from
Feb 26, 2025
Merged

Remove aria attributes in order to read card body content #90

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e582cb4
remove aria attributes in order to read card body content
jomcarvajal Feb 18, 2025
7f5bcee
conditional aria attributes for cardbody
jomcarvajal Feb 20, 2025
7cad9e0
previewMode in storybook
jomcarvajal Feb 24, 2025
cc7abf0
missing previewMode prop
jomcarvajal Feb 26, 2025
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
2 changes: 1 addition & 1 deletion src/components/AnswersTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export const AnswersTable = (props: AnswersTableProps) => {
});

return (
<div role="radiogroup" aria-label="Answer choices" className="answers-table">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jivey using NVDA I noticed that Answer choices appears always, no matter the content. Removing this aria attributes NVDA is capable to read inside card's content. I didn't see any other a11y issue after removing role="radiogroup" but let me know if you're fine with this approach

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The label and role here were recently added for accessibility so they probably need to stay here... can you share a screenshot of the NVDA speech that you are seeing? When I test with focus first off, I get this speech which is reading the options:

Answer choices  grouping       radio button  unavailable  not checked    clickable  A  Option 1     radio button  unavailable  not checked    clickable  B  Option 2     radio button  unavailable  not checked    clickable  C  Option 3     radio button  unavailable  not checked    clickable  D  Option 4

Additionally, I'm seeing we have a new issue here I didn't see before: those are being read as clickable, can we disable them while in preview mode?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using VoiceOver with the label and role I get this:
Screenshot 2025-02-19 at 10 05 26 AM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah okay yes that seems like a problem, at least for our purposes. It's a newer change that I'm not familiar with: #78 My initial thought is that an aria label shouldn't be on that, as it has a role, but I'm not sure. Can you look into that? And if you determine the label needs to be there, we may have to make it conditional for preview cards...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason role is removing Answers from screen reader. I removed the label just to test but Answers still missing as you can see in my previous screenshot. @TylerZeroMaster maybe you can help us to understand this a11y changes. Are we expecting that answers from a card only appears as "Answer choices" in screen readers?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jomcarvajal I think the aria-label and role can be removed from the AnswersTable if all the radio buttons have the same name. When they have the same name, they should implicitly be in a radiogroup.

When using HTML's native input radio button, , the radio buttons are grouped when each of input radio buttons in the group is given the same name.

I may have followed the original issue, which suggested adding the radiogroup role, too closely when I implemented those changes. After further reading:

It is recommended to create radio groups by using same-named HTML input radio buttons, but, if you must use ARIA roles and attributes instead of semantic HTML form controls, custom radio buttons can and should act like native HTML radio input buttons.

So if it works better to create an implicit radiogroup by using same-named radio buttons, then I am all for that solution.

link for both quotes

<div className="answers-table">
{instructions}
{answersHtml}
</div>
Expand Down
12 changes: 0 additions & 12 deletions src/components/__snapshots__/AnswersTable.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@

exports[`AnswersTable matches tutor teacher-preview snapshot 1`] = `
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -109,9 +107,7 @@ exports[`AnswersTable matches tutor teacher-preview snapshot 1`] = `

exports[`AnswersTable renders all feedback 1`] = `
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -250,9 +246,7 @@ exports[`AnswersTable renders all feedback 1`] = `

exports[`AnswersTable renders correct answer feedback 1`] = `
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -365,9 +359,7 @@ exports[`AnswersTable renders correct answer feedback 1`] = `

exports[`AnswersTable renders incorrect answer feedback 1`] = `
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -486,9 +478,7 @@ exports[`AnswersTable renders incorrect answer feedback 1`] = `

exports[`AnswersTable renders instructions 1`] = `
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<b>
Instructions
Expand Down Expand Up @@ -578,9 +568,7 @@ exports[`AnswersTable renders instructions 1`] = `

exports[`AnswersTable sorts by given ID order 1`] = `
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down
12 changes: 0 additions & 12 deletions src/components/__snapshots__/Exercise.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -276,9 +274,7 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -467,9 +463,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -798,9 +792,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -1169,9 +1161,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -1360,9 +1350,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down
6 changes: 0 additions & 6 deletions src/components/__snapshots__/ExercisePreview.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,7 @@ exports[`ExercisePreview using step data matches snapshot %description 1`] = `
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -270,9 +268,7 @@ exports[`ExercisePreview using step data matches snapshot %description 2`] = `
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -462,9 +458,7 @@ exports[`ExercisePreview using step data matches snapshot %description 3`] = `
data-test-id="question"
>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down
20 changes: 0 additions & 20 deletions src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ exports[`ExerciseQuestion matches snapshot 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -159,9 +157,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -306,9 +302,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -453,9 +447,7 @@ exports[`ExerciseQuestion renders Submit & continue button 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -600,9 +592,7 @@ exports[`ExerciseQuestion renders all attempts remaining 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -747,9 +737,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -893,9 +881,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -1069,9 +1055,7 @@ exports[`ExerciseQuestion renders free response 1`] = `
A free response
</div>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -1209,9 +1193,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -1355,9 +1337,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down
14 changes: 0 additions & 14 deletions src/components/__snapshots__/Question.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@ exports[`Question defaults QuestionHtml html 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -120,9 +118,7 @@ exports[`Question defaults collaborator_solutions 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -224,9 +220,7 @@ exports[`Question defaults formats 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -337,9 +331,7 @@ exports[`Question matches snapshot 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -441,9 +433,7 @@ exports[`Question renders exercise uid 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -550,9 +540,7 @@ exports[`Question renders formats 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down Expand Up @@ -666,9 +654,7 @@ exports[`Question renders solutions 1`] = `
data-question-number={1}
/>
<div
aria-label="Answer choices"
className="answers-table"
role="radiogroup"
>
<div
className="openstax-answer"
Expand Down