Telefonica
ANDROID-15075 ListRowItem Switch & CheckBox a11y compose
:goal_net: What's the goal?
Align ListRowItem accessibility for Compose according to new Figma definition: https://www.figma.com/design/Be8QB9onmHunKCCAkIBAVr/%F0%9F%94%B8-Lists-Specs?node-id=4977-5442&t=iqE1tr998GXqKVZ4-4
:construction: How do we do it?
- Creating ListRowItemWithSwitch and ListRowItemWithCheckBox.
- Letting developers to pass a contentDescription for badges.
- Adding info to the compose list README file.
- Fixing a bug in the catalog in compose as it was saying "Clickable Asset in Clickable Row" even if the row was not clickable.
- Scouting (unrelated task): Adding MisticaTheme to the PasswordInput so the previews in that file work again.
- Fixing links of README in https://github.com/Telefonica/mistica-android/pull/376 as lint was complaining that links are not found.
☑️ Checks
- [x] I updated the documentation, including readmes and wikis. If this is a breaking change, tag the PR with "Breaking Change" label and remember to include breaking change migration guide in release notes where this version is released.
- [x] Tested with dark mode.
- [x] Tested with API 24. The two new components work well in 24 but I had to use talkback on a device with api level 28, I couldn't manage to run talkback on 24-27 devices.
- [x] Sync done with iOS team for this feature to ensure alignment, if applies.
:test_tube: How can I test this?
- [x] 🖼️ Screenshots/Videos
| Change | Before | After |
|---|---|---|
| Ordering | ||
| Toggleables | - |
- [x] Mistica App download link
- [x] Reviewed by Mistica design team (PR reviewer from design team)
Interactive lists in compose
According to spec, the interactive lists should be like one element to the talkback focus, in classic this is working as expected, but in compose seems that no matter the list is informative or interactive (navigation) the elements are focused individually.
Video of the behaviour:
https://github.com/user-attachments/assets/a7e6a8ad-6bb2-4944-80ed-eed41dc54afc
(Some texts are not announced, but this is an issue with my phone not able to handle talkback and screen recording at the same time
The version where I'm seeing this issue is: https://install.appcenter.ms/orgs/tuenti-organization/apps/mistica-catalog/distribution_groups/public/releases/592
(Just in case I'm not testing in the latest version)
Interactive lists in compose
According to spec, the interactive lists should be like one element to the talkback focus, in classic this is working as expected, but in compose seems that no matter the list is informative or interactive (navigation) the elements are focused individually.
Video of the behaviour:
Record_2024-09-04-11-36-33.mp4 (Some texts are not announced, but this is an issue with my phone not able to handle talkback and screen recording at the same time
The version where I'm seeing this issue is: https://install.appcenter.ms/orgs/tuenti-organization/apps/mistica-catalog/distribution_groups/public/releases/592
(Just in case I'm not testing in the latest version)
It was agreed in the Teams channel
This is compose and information cells, so the focus is individual with specific order as it is in iOS (not as in classic views). Many of the rows in the catalog are not clickable despite having the chevron.
https://github.com/Telefonica/mistica-android/pull/377#issuecomment-2328421664
Resolved offline, I was assuming that all list w/chevron were interactive, but the cases tested didn't have onClick.
The behaviour of the interactive list in compose works as expected
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Badges behaviour in list with onClick
The badge should no have an independent focus of the list, currently it seems that:
- Classic: the badge is included in the concatenated content (expected behaviour)
- Compose: the badge is not included and has an independent focus after the list has been focused
Read badges content
I see value in allow to provide a contentDescription for the badge component i would keep that change in the badge for other uses.
In the list component we decided to remove the content of the badges of the concatenated content and make them in all cases invisible to screen readers (so the should not be focusable content even if the list is informative).
Why this?
- If a content description is not provided, the numeric content of the badge is not giving the user a lot of information about what that number means, that depends of the context and we can't control the context.
- If a content description is provided, we cannot anticipated in which position the badge should be ordered when concatenating the text.
The option we concluded that was the best experience for users is to delegate that responsibility in the product implementation phase, where the context can be controlled, allowing to provide a custom accesibilityLabel to the whole list where this information can be included in the right way.
Revisiting the specs I detected that this behaviour is not as well explained as should be, so i updated the section.
I think this can be closed, too much time idle and it's going to be finally done in https://github.com/Telefonica/mistica-android/pull/439