Hi there,
Using VoiceOver, I am trying to read the contents of a horizontal UICollectionView from right to left.
More specifically, when I reach the collection view when swiping through all accessibility elements on the screen, I want to swipe right and have the rightmost cell in the entire collection view focused. Then, swipe right to traverse backward (right-to-left), swipe left to traverse forward.
I've mostly managed to find a way to make this work, by:
- Setting the semantic of the collection view to 'Force Right-to-Left'. This achieves the behavior of swiping right to traverse backwards, left to traverse forward.
- Reversing the contents of the data source array so that the cells are populated with data that matches the right-to-left order.
However, when I reach the collection view when swiping through elements on the screen, it does not select the cell at index 0 (all the way to the right) – VoiceOver focuses the first item on the first "page" in the collection.
Say that there are 3 "pages" of 7 cells. At the far right is Cell #1, and then each subsequent cell is numbered all the way to the leftmost #21. When I swipe onto the collection view, cell #15 is focused (the first item on the first page), rather than #1.
When scrolling through the "pages," VoiceOver still calls the page with index 0 (the far right) "Page 3 of 3."
I've attached pictures below for reference, and I have a demo Xcode project I would be happy to send or attach if it would help.
Any advice on how to go about accomplishing this would be deeply appreciated.
Thank you!
Picture #1: This first picture shows a mockup interface with a big box with the #3 highlighted – I want to highlight Cell #1 in the collection view after swiping right from this box.
Picture #2: The second picture shows what actually happens – Cell #15 is highlighted.
Picture #3: The third picture shows what I want to happen – Cell #1 is highlighted.
Hi zucchinisoup, you mentioned that you're using UICollectionViewFlowLayout and it does seem that the general flow of the cells should be right-to-left. I would recommend trying the following:
- Subclassing UICollectionViewFlowLayout
- In your subclass, override
flipsHorizontallyInOppositeLayoutDirectionto return YES - Try the app again with VoiceOver/Accessibility Inspector
As a sidenote, depending on the content and the reasoning for it to be displayed right-to-left, these cells may have to flow left-to-right in a right-to-left language. When setting the semanticContentAttribute to .forceRightToLeft, if your app supports other languages like Arabic or Hebrew, I would recommend doing the opposite when running in a right-to-left language, since the collection view cells may have to flow the other way.
However this does depend on the original reasoning behind showing these RTL in an LTR language; happy to help clarify that either here or in a separate thread with the Internationalization tag. Thanks!