MWPW-162027 Catalog action menu A11Y collapsed expanded

[bozojovicic]

The screen reader should announce the expand/collapse state when the keyboard focus moves to the Action Menu button.

Test page : https://main--cc--adobecom.hlx.live/products/catalog?milolibs=mwpw162027a11y--milo--bozojovicic

Resolves: MWPW-162027

Test URLs:

• Before: https://main--milo--adobecom.aem.live/drafts/bozo/price-cta?martech=off
• After: https://mwpw162027a11y--milo--bozojovicic.aem.live/drafts/bozo/price-cta?martech=off

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/drafts/bozo/price-cta?martech=off
🖥️	/drafts/bozo/price-cta?martech=off

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.50%. Comparing base (f5205a6) to head (716d234).
Report is 2 commits behind head on stage.

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #3473      +/-   ##
==========================================
+ Coverage   96.49%   96.50%   +0.01%     
==========================================
  Files         260      260              
  Lines       60730    60735       +5     
==========================================
+ Hits        58599    58611      +12     
+ Misses       2131     2124       -7     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jpratt2]

@bozojovicic
Regarding the failed nala tests, could you try this: pull the recent changes from stage into your branch and then re-push your branch
cc: @skumar09

[github-actions]

This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR.

[bozojovicic]

15 times I tried to rebuild this PR and always some random test fails : unit tests, coverage, nala or psi-check
I give up for today

[3ch023]

not sure the fix will work as expected, maybe @Roycethan can do a pre-test on NVDA.
If it works we can merge as is.

But on mac voiceover it didn't work for me, maybe because it ticket request was to swith to actionable element like button before adding aria-expanded attribute.
In https://main--cc--adobecom.hlx.page/products/catalog?milolibs=mwpw162027a11y--milo--bozojovicic however it is still a div

[bozojovicic]

@3ch023 AC says

The screen reader should announce the expand/collapse state when the keyboard focus moves to the button.

And that's what I did. And it works when I try it with VoiceOver. It doesn't say that the screen reader should announce the expand/collapse state every time when user opens/closes it. Maybe that's what you tried to do.

[Roycethan]

not sure the fix will work as expected, maybe @Roycethan can do a pre-test on NVDA. If it works we can merge as is.

But on mac voiceover it didn't work for me, maybe because it ticket request was to swith to actionable element like button before adding aria-expanded attribute. In https://main--cc--adobecom.hlx.page/products/catalog?milolibs=mwpw162027a11y--milo--bozojovicic however it is still a div

@3ch023 Checked on NVDA - windows fix looks good ... screen reader announces collapsed/expanded based on action performed on the button. May be a Vocice over bug in Mac for Safari, but as i checked it also works for Mac+Chrome combination. Post 2 approvals will do regression around.

cc @bozojovicic

[milo-pr-merge]

Skipped 3473: "MWPW-162027 Catalog action menu A11Y collapsed expanded" due to file "libs/deps/mas/mas.js" overlap. Merging will be attempted in the next batch

[milo-pr-merge]

Skipped 3473: "MWPW-162027 Catalog action menu A11Y collapsed expanded" due to file "libs/deps/mas/mas.js" overlap. Merging will be attempted in the next batch

[Roycethan]

Skipped 3473: "MWPW-162027 Catalog action menu A11Y collapsed expanded" due to file "libs/deps/mas/mas.js" overlap. Merging will be attempted in the next batch

@bozojovicic You might need to resolve the conflicts here or pull latest for merge to happen...

[milo-pr-merge]

Skipped 3473: "MWPW-162027 Catalog action menu A11Y collapsed expanded" due to file "libs/deps/mas/mas.js" overlap. Merging will be attempted in the next batch

[milo-pr-merge]

Skipped 3473: "MWPW-162027 Catalog action menu A11Y collapsed expanded" due to file "libs/deps/mas/mas.js" overlap. Merging will be attempted in the next batch