chore: [IOBP-576] Payment manual input A11y and UX fixes

[forrest57]

Short description

Updated A11y and UX for inputNoticeNumberScreen and InputFiscalCodeScreen under WalletPayment

List of changes proposed in this pull request

those changes apply to both screens:

• removed disabled check for the footer CTA
• the same CTA now closes the keyboard, forcing a validity check and UI feedback on the textInput
• A11y focus is also brought back to the textInput in order to avoid A11y problems.

How to test

With the dev-server active, navigate to wallet>pay>manual input ("digita") and make sure that:

• the continue button is always enabled
• when pressing it after typing in the text field, it displays feedback based on the input's validity
• the code 0000000000000000000 (18x0, or any valid TRX code) navigates to the fiscal code input screen
• the same applies for the fiscal code input screen
• voiceOver/talkback correctly moves the a11y focus back to the text input on CTA press

[pagopa-github-bot]

Affected stories

• ⚙️ IOBP-576: Spostamento check validazione RptId sul bottone "Continua" subtask of
  • 🌟 IOBP-320: Recupero avviso di pagamento

Generated by :no_entry_sign: dangerJS against 51166a111e41e0c7c099a3b06cd6efd12c841f86

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 0% with 23 lines in your changes are missing coverage. Please review.

Project coverage is 48.16%. Comparing base (319706e) to head (51166a1).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5556      +/-   ##
==========================================
- Coverage   48.19%   48.16%   -0.04%     
==========================================
  Files        1453     1453              
  Lines       30935    30955      +20     
  Branches     7515     7517       +2     
==========================================
  Hits        14908    14908              
- Misses      15959    15979      +20     
  Partials       68       68              

Files	Coverage Δ
...ent/screens/WalletPaymentInputFiscalCodeScreen.tsx	4.34% <0.00%> (-3.35%)	:arrow_down:
...t/screens/WalletPaymentInputNoticeNumberScreen.tsx	5.55% <0.00%> (-6.95%)	:arrow_down:

---

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 319706e...51166a1. Read the comment docs.

[thisisjp]

What do you think?

cc: @thisisjp @dmnplb

@mastro993 you've just unlocked the Sr UX designer achievement 🏅

[forrest57]

after playing around for a while, I found the "only" -- or rather, the most logical, possibly cleanest -- way to select the input on first load in the UI, which is different to a11y-only focusing, to be the default textInput autoFocus prop.

The component we are using here, TextInputValidation, takes and spreads props from TextInputBase, which itself spreads its props to a TextInput. If we were to add this prop , possibly along most other TextInput props and a ForwardRef to the textInput base, it would in my opinion make this and a lot of future developments easier and/or possible without touching the DS or modifying the component's style. cc @thisisjp @dmnplb what do you think?