STCOR-753: Accessibility Issues - core components - Include label text in element's accessible name

[UladzislauKutarkin]

Accessibility Issues - core components - Include label text in element's accessible name

Also icon Apps renamed to All applications to improve accessibility.

[github-actions]

Jest Unit Test Statistics

127 tests  ±0   127 ✔️ ±0   15s ⏱️ -6s
  15 suites ±0       0 💤 ±0 
    1 files   ±0       0 ❌ ±0 

Results for commit 663c56d. ± Comparison against base commit dd71819.

♻️ This comment has been updated with latest results.

[github-actions]

BigTest Unit Test Statistics

    1 files  ±0      1 suites  ±0   10s ⏱️ -1s
271 tests ±0  265 ✔️ ±0  6 💤 ±0  0 ❌ ±0 
274 runs  ±0  268 ✔️ ±0  6 💤 ±0  0 ❌ ±0 

Results for commit 663c56d. ± Comparison against base commit dd71819.

This pull request removes 5 and adds 3 tests. Note that renamed tests count towards both.

      equal to check email label in english translation
      equal to check email precautions label in english translation
      equal to sent email precautions label in english translation
Chrome_118_0_0_0_(Linux_x86_64).Forgot username form test ‑ Forgot username form test check email status page tests should have the header with an appropriate text content
Chrome_118_0_0_0_(Linux_x86_64).Forgot username form test ‑ Forgot username form test check email status page tests should have the paragraph with an appropriate text content

Chrome_118_0_0_0_(Linux_x86_64).Forgot username form test ‑ Forgot username form test check email status page tests should have the header with an appropriate text content
      equal to check email label in english translation
Chrome_118_0_0_0_(Linux_x86_64).Forgot username form test ‑ Forgot username form test check email status page tests should have the paragraph with an appropriate text content
      equal to check email precautions label in english translation
Chrome_118_0_0_0_(Linux_x86_64).Forgot username form test ‑ Forgot username form test check email status page tests should have the paragraph with an appropriate text content
      equal to sent email precautions label in english translation

♻️ This comment has been updated with latest results.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[zburke]

Before and after examples would help me here. Please provide screenshots or examples of old text/new text.

It looks like this PR removes a substantial amount of dynamic information (the tenant name, the service point name) from the label and replaces it with the static string (the translation corresponding to mainnav.myProfileAriaLabel). Is that really the intent? Has this ticket been OK'ed by the teams who originally added that information to the button?

Fix lint.

[JohnC-80]

Since this is a change to visible labels which affect button widths, this change really needs to be routed through appropriate design channels in order to resolve it in the best way that upholds accessibility and prioritizes the case for the current implementation.
While better accessibility is something we would always like to see, we need to think about these changes a little bit more, and hopefully we can end up with some more prescriptive direction for developer action.
The 'Apps' button is displayed in cases where there's not enough horizontal room for all of the app icons/buttons. Changing that text to 'All Applications' is a bit contrary to this functionality - and the button itself doesn't actually reveal 'all applications' - only those that overflow the space - so we need to decide on what is best there.
Changing the label of the profile dropdown is a major end-user-experience changing item - definitely has to be run by a designer - and probably a community of users before we can accept this change.

[UladzislauKutarkin]

Since this is a change to visible labels which affect button widths, this change really needs to be routed through appropriate design channels in order to resolve it in the best way that upholds accessibility and prioritizes the case for the current implementation. While better accessibility is something we would always like to see, we need to think about these changes a little bit more, and hopefully we can end up with some more prescriptive direction for developer action. The 'Apps' button is displayed in cases where there's not enough horizontal room for all of the app icons/buttons. Changing that text to 'All Applications' is a bit contrary to this functionality - and the button itself doesn't actually reveal 'all applications' - only those that overflow the space - so we need to decide on what is best there. Changing the label of the profile dropdown is a major end-user-experience changing item - definitely has to be run by a designer - and probably a community of users before we can accept this change.

Hi @JohnC-80 and @zburke . Let me discuss it with Magda (our PO). And I agree that we need to discuss it with design team. It sounds logical to me.