Skip to content

fix(IT-Wallet): [SIW-3803,SIW-3658] A11y fixes: data toggle state, CIE animation - #8454

Open
MonicaRungi-EY wants to merge 2 commits into
masterfrom
SIW-3803-itwallet-id-hide-data-a11y
Open

fix(IT-Wallet): [SIW-3803,SIW-3658] A11y fixes: data toggle state, CIE animation#8454
MonicaRungi-EY wants to merge 2 commits into
masterfrom
SIW-3803-itwallet-id-hide-data-a11y

Conversation

@MonicaRungi-EY

Copy link
Copy Markdown
Collaborator

Short description

This PR fixes two accessibility bugs on Android/iOS found during a11y testing: the "hide/show data" toggle on the IT-Wallet ID screen didn't announce its state to screen readers, and the CIE preparation screens (PIN/NFC) showed a looping GIF animation with no way to pause or stop it.

List of changes proposed in this pull request

  • [ITWNC-25] IT-Wallet ID "hide data" button: the eye icon's accessibility label now changes based on the current state ("Mostra dati del mio IT-Wallet ID" / "Nascondi dati del mio IT-Wallet ID") instead of always announcing the static section title, so screen reader users know whether the data is currently shown or hidden.
  • [ITWAL3-15] CIE preparation screens looping animation: the animated GIF illustration on the "Prepare your CIE PIN" and "Prepare your CIE for NFC reading" screens now automatically stops after 4 seconds (under the 5s threshold for uncontrollable moving content) and freezes on a static frame extracted from the animation.
    • Added itw_cie_pin_poster.png and itw_cie_nfc_poster.png as the frozen frames.
    • The shared ItwCiePreparationScreenContent component now accepts an optional posterSrc prop; screens using a static image only (CAN, Card) are unaffected.

How to test

ITWNC-25

  1. Enable TalkBack
  2. Navigate to the IT-Wallet ID detail screen
  3. Focus the eye icon next to "Dati del mio IT-Wallet ID" and verify TalkBack announces "Nascondi dati del mio IT-Wallet ID" when data is visible.
  4. Activate it, focus it again, and verify it now announces "Mostra dati del mio IT-Wallet ID".

ITWAL3-15

  1. Navigate to the CIE identification flow, reaching the "Prepara il PIN della tua CIE" screen (or the NFC one).
  2. Watch the illustration: it should stop moving and settle on a static frame within ~4 seconds.
  3. Navigate away and back to the screen (or reopen it) and verify the animation replays from the start and stops again after ~4 seconds.

@MonicaRungi-EY MonicaRungi-EY self-assigned this Aug 13, 2026
@MonicaRungi-EY MonicaRungi-EY added a11y Activities related to accessibility IT Wallet labels Aug 13, 2026
@github-actions

Copy link
Copy Markdown
Contributor

PR Title Validation for conventional commit type

All good! PR title follows the conventional commit type.

@github-actions

github-actions Bot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Jira Pull Request Link

This Pull Request refers to Jira issues:

@codecov

codecov Bot commented Aug 13, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 16.66667% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 63.79%. Comparing base (834209c) to head (b241a8a).

Files with missing lines Patch % Lines
.../cie/components/ItwCiePreparationScreenContent.tsx 10.00% 9 Missing ⚠️
...on/details/components/ItwPresentationPidDetail.tsx 50.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #8454      +/-   ##
==========================================
- Coverage   63.81%   63.79%   -0.03%     
==========================================
  Files        1980     1980              
  Lines       37724    37736      +12     
  Branches     6370     6373       +3     
==========================================
  Hits        24075    24075              
- Misses      12265    12276      +11     
- Partials     1384     1385       +1     
Files with missing lines Coverage Δ
...ication/cie/screens/ItwCiePreparationNfcScreen.tsx 10.00% <ø> (ø)
...ication/cie/screens/ItwCiePreparationPinScreen.tsx 10.00% <ø> (ø)
...on/details/components/ItwPresentationPidDetail.tsx 83.33% <50.00%> (-4.17%) ⬇️
.../cie/components/ItwCiePreparationScreenContent.tsx 25.00% <10.00%> (-25.00%) ⬇️

... and 1 file with indirect coverage changes


Continue to review full report in Codecov by Harness.

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@MonicaRungi-EY
MonicaRungi-EY marked this pull request as ready for review August 13, 2026 13:54
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.

1 participant