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.

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(IT Wallet): [SIW-1726] Fix accessibility issues within credential details screen #6398

Open
wants to merge 21 commits into
base: master
Choose a base branch
from

Conversation

mastro993
Copy link
Contributor

@mastro993 mastro993 commented Nov 13, 2024

Short description

This pull request addresses multiple accessibility issues on the credential details screen, ensuring a better experience for screen reader (SR) users.

List of changes proposed in this pull request

  • Updated io-app-design-system to 2.1.2
  • Added required locales
  • Added accessibilty props to the trustmark QR Code image in the trustmark bottom sheet
  • Added accessibilty props to the credential's skeumorphic card
  • Fixed accessibilty for image claims, which where not announced with the correct role
  • Added feedback announcement for the skeumorphic card's front/back toggle button
  • Added feedback announcement for the hide/show claims data toggle button
  • Added accessibility label to the fiscal code barcode

How to test

With screen reader enabled, navigate to the MDL credential details screen and verify:

  • The credential card has appropriate alternative text and is announced clearly by the SR.
  • The front/back toggle button on the credential card provides feedback on its action.
  • The hide/show claims data toggle button provides feedback on its state change.
  • The Trustmark QR Code is announced correctly as an image.
  • The profile image is recognized as an image and announced appropriately.

Navigate to the TS credential details screen and verify

  • The fiscal code barcode is announced correctly as na image

@pagopa-github-bot pagopa-github-bot changed the title [SIW-1726] Fix credential's details screen accessibility issues fix(IT Wallet): [SIW-1726] Fix credential's details screen accessibility issues Nov 13, 2024
@pagopa-github-bot
Copy link
Collaborator

pagopa-github-bot commented Nov 13, 2024

Affected stories

  • 🐞 SIW-1726: Dettaglio patente non accessibile
    subtask of

Generated by 🚫 dangerJS against 7c81469

@mastro993 mastro993 changed the title fix(IT Wallet): [SIW-1726] Fix credential's details screen accessibility issues fix(IT Wallet): [SIW-1726] Fix accessibility issues within credential details screen Nov 13, 2024
Copy link

codecov bot commented Nov 13, 2024

Codecov Report

Attention: Patch coverage is 37.50000% with 10 lines in your changes missing coverage. Please review.

Project coverage is 48.43%. Comparing base (4f204b4) to head (7c81469).
Report is 720 commits behind head on master.

Files with missing lines Patch % Lines
...let/common/components/ItwSkeumorphicCard/index.tsx 0.00% 5 Missing ⚠️
...on/components/ItwSkeumorphicCard/FlippableCard.tsx 0.00% 2 Missing ⚠️
...ation/components/ItwPresentationCredentialCard.tsx 0.00% 2 Missing ⚠️
ts/components/QrCodeImage.tsx 66.66% 1 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##           master    #6398     +/-   ##
=========================================
  Coverage   48.42%   48.43%             
=========================================
  Files        1488     1828    +340     
  Lines       31617    37242   +5625     
  Branches     7669     8892   +1223     
=========================================
+ Hits        15311    18038   +2727     
- Misses      16238    19137   +2899     
+ Partials       68       67      -1     
Files with missing lines Coverage Δ
.../itwallet/common/components/ItwCredentialClaim.tsx 63.73% <ø> (ø)
...res/itwallet/common/utils/itwAccessibilityUtils.ts 100.00% <100.00%> (ø)
...presentation/components/ItwCredentialTrustmark.tsx 25.80% <ø> (ø)
...tation/components/ItwPresentationClaimsSection.tsx 94.73% <100.00%> (ø)
...tation/components/ItwPresentationDetailsHeader.tsx 27.77% <ø> (ø)
...sentation/components/ItwPresentationFiscalCode.tsx 50.00% <ø> (ø)
ts/components/QrCodeImage.tsx 77.77% <66.66%> (ø)
...on/components/ItwSkeumorphicCard/FlippableCard.tsx 22.22% <0.00%> (ø)
...ation/components/ItwPresentationCredentialCard.tsx 25.00% <0.00%> (ø)
...let/common/components/ItwSkeumorphicCard/index.tsx 14.81% <0.00%> (ø)

... and 1530 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update be7d043...7c81469. Read the comment docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Activities related to accessibility IT Wallet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants