spartacus icon indicating copy to clipboard operation
spartacus copied to clipboard
verified publisher icon SAP

feat(a11y): improve My Account payment-details/address-book components readability support

Open uroslates opened this issue 1 year ago • 1 comments

Closes https://jira.tools.sap/browse/CXSPA-8195

uroslates avatar Oct 28 '24 11:10 uroslates

spartacus    Run #45633

Run Properties:  status check passed Passed #45633  •  git commit ebbb6836f9 ℹ️: Merge c4618a6abdc4edac95be47d7b7175c9794108715 into 4259cfd252d3ad72eceac480657b...
Project spartacus
Branch Review feature/CXSPA-8195
Run status status check passed Passed #45633
Run duration 12m 30s
Commit git commit ebbb6836f9 ℹ️: Merge c4618a6abdc4edac95be47d7b7175c9794108715 into 4259cfd252d3ad72eceac480657b...
Committer Uros Lates
View all properties for this run ↗︎
Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 4
Tests that did not run due to a developer annotating a test with .skip  Pending 2
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 125
⚠️ You've recorded test results over your free plan limit.
Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

cypress[bot] avatar Oct 28 '24 12:10 cypress[bot]

@uroslates the combination of aria-label + aria-describedby provides the expected narration. Just a couple of adjustments please for both, Payments and Addresses:

  1. Please remove role="application", you probably meant presentation, but even that one is not needed, if I remove the role attribute completely the information still gets narrated properly.
  2. You will have to generate differentiated IDs for each container, currently, if a user has more than two payment methods and addresses the content of the first card is always narrated for the rest of the cards.

8195 payment first container gets read for all - also remove role application

8195 addresses have same id for all

developpeurweb avatar Oct 31 '24 15:10 developpeurweb

After conversation with Miguel we decided to use role application and combination of aria-label+aria-describedby (with dynamic id). This combination vocalises both aria-labels and children's content.

uroslates avatar Oct 31 '24 18:10 uroslates

@uroslates I've tested this with JAWS on my end and it's all good. Let's just wait for a developer to review the code before merging. Thanks.

developpeurweb avatar Oct 31 '24 21:10 developpeurweb

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

github-actions[bot] avatar Nov 04 '24 13:11 github-actions[bot]