Switch row should support its use as an accordion header

[brtbrt]

Goal

Row with switch value is sometimes used as an accordion header. When switch is on, further content is presented below (expanded), which should be announced in some way. The best way would be announcing the new "on" status and an "expanded" state.

A first attempt is here:

https://mistica-web.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AlGBnADhAduglgG4wAyAhgJ4QCuALgHwA6OABC0gMq1lgDWLWHjAC8wAIwA2AL5NWbdgDkYAczK0iMAEIQAHrPnzgAegBU7FBADuzdbQA2IxiFoZaLGDsxkcUJ83SW%2BLRgABaiwMyEZHbUMPAsyjC0XGowABROHl4%2BML4gADQsAGbR6DAAlPnMuADCId6J8WnlLML0LBF4SSkuGSBZ3rB5hQCEicncvZmeg7lOhSV2ZeXlANzMUlU4UlLMZABO%2BGQAtAM5UMJOtPuxfjgHR8eQONcQS5cggVDjYndG7SYjLs5AYkAAjOi0XDMAwGfZvRwgAJBUJ3WHyB4nUIwPi5UTjHrpabZIbzYqlCrA9FsTGnGbnfHdSZE-r00kFclLSkw6m056vd5OL4-NHU2p2fB8UTNVrtTrU%2BRlCapPpndmjAnM1VsuYcxbLNY89E7I3yfTUgAqrncbI6mpVxNmw05yxYAH4WFcbjAnCx4k59T6QFTYUgjBDaFCcOa2GGlKp1MRtHpTcB7VNWSTdQsKS0AGR5lgZHBIKBEFj4C5CysikAseEOD7KeHUTBOWRIK06WgAZhYZHQHxCACZ2xwYA4wG5vCwIJh1Lgw13ex342oNMmOygyGWIABxFuYLdWEj4dAMHmoKwsWyNpxzhc4X51-Y7-AQABq0ViojEUhY-yXhYlg3kEd4gA%2B744KOL5vp%2B34iMAw7-oBJZGMBp7nh26FwQeNBHswcYqOuSa6NhZaELI5QhmGKR8NhaBYLgBDEOQVB0LIBTOCEMAALYYAgADaIAAPLDgA%2BkolggAAuvknyVrQIToEJPYSAADDJUhAA

but by adding switch role + aria-expanded and aria-controls is making voice over on iOS not working correctly. neither does it on macOS, in a different way.

Find the smoothest way to convey the user it's switch button, acting like an accordion header, in order to avoid workarounds.

A solution it could work is waiting some little time to change the expanded state, so as to let the ATs read the new switch status:

https://mistica-web.vercel.app/playroom#?code=N4Igxg9gJgpiBcJgApkEoAEBeAfB4AOgHYYYDuAlkVBGQHQBmATgIYC2MAwhAK5EAu2DAAYA3MVKVqtOrAA2LAJ4BJKEKI85c8SXJUa9JjACOAERgLFQ5AGcY-AMr8W-GABoMAc3tOXMTLj4EqQYFAwYyFIGjKwc3HyCeMKYhLohetL0zOxcvAJCYsHpRvw8TEQ66QC%2BRRiQRDaC8tYBeKnpkvoy2XF5-ADU-ZUdYRE9uQkYOFgYAGzJQWkdUd2xE-kzhUvpdo7OrsgEIDAAHgAOLNQwUAC08kpHHt57fofH55ewUI8YDCxydjQaGG1QwFjsiw6ISMxh4MEaAEEiBQ2C4KBAiAAxNbIeTA2qkGpLKogjAAejJGEaLCYgn4AAsYBh7opajC4Yjkaj%2BOisTi8cMScQqmh0ETiAAeABK8LOGJsFAAbjAADJKXj8HDBCW%2BMAAaypFzAMCwwAAjLMqlqlhKAHIwTxo5UAIQgJ2tUIlACMePx%2BBiCdCIHITUcbJR%2BGB6UdA6QaRQWDcozB9ddTc9fAcjqcLldviAPH8Af4iVC40wEzcc5808AM-sYG9q3m7hYHgXfv9AaWy-HE-V%2BExgzYsEdKFBnmaY9sQhjOHIKPrTehsG1YyFdpnG9mPnmfgBCeuvHe5r4-IuA-FEdedTJ0GHmSy2HwNp4vvxXsshUaRLr0FmqBg%2B5YDMGhaCkN4hCs9BgCGNIACoojAGq-neAFQJ%2BX5QX%2BshtioaigZo2iQT2X4Uhk0ToUI0F0LsiEcChK6BO0WHkTRVGEVopJQuRm4Nk2u5fK2lg-EeWbvKe1znl2-iYWRlJVB4ZrCCpckdFUpEhB6ZbwfCgjNmodbvuJBlSR2F7%2BBgAD8GBHIOcJHBg8C2SAFlHJppASmSPp%2Bhi2meWS9qOjyLpuv5%2BBiduEk1vmhYyZgABkCURIGEpQEqoRQKOIDjpOjlDiG2WeEOPBnEc4XpBKuknPwADMGAsCORz0gATOVDgWCmgiXBgEBnDyGJedVdUVSEdoOk6MCuu6kHSiw6UQAA4iVZyjZ6Uq0CqFCNGtZbSrQGA8vwhVHH1A1EFOIAYKwC0AGr-HCppmlU5K7etB1HSdIBnbybVXTd6L3XIj3AC1L1km9Y1khtZBbTts3Q-N6LLbwq3rl5QWTdNo1eelirhWgPZebqerWl5Mo2HKDRKqq6q%2BtaBYgAyMAcDYCAANogAA8i1AD69pkCAAC6bg5RQUAMmz8Ds7V8xC1UQA

some workaround that could be useful is:

• using an aria-label that suffixes "options available below". this is the way google handles it, apparently
• let the switch button announce its state, and if it's on, prompt message via aria to say that something has appeared. this should be announced just once when switch transitions to its on state

Context

The lack of a reusable option for this could result in several teams using their own custom workaround, leading to inconsistency and degrading the UX.

as a reference and starting point: we currently have some workaround on webapp to fix some a11y issues we used to suffer https://github.com/Telefonica/webapp/blob/ec245b9e536eebd073dea288da351441e18a2810/web/src/pages/call-forwarding/components/switch-row.tsx#L22-L21

Impact

• The best effort about usability could be achieved with a standardized solution
• Avoid workarounds means less time spent on this issue to tackle, and less potential errors and accidental complexity: workaround could be easily broken with future changes etc

Discussion Questions

• should the accordion have the switch power, or should the switch row have the expanded one?

• Can we convey the switch status + expanded state at the same time?

Additional considerations

No response

Do you have a visual proposal?

No response

[aweell]

Hi @brtbrt thank you so much for your initial research and the examples provided ❤️

We have created #2256 in order to update the component specs to handle this scenario.

[brtbrt]

great! lemme know if you need any further help