Some accessibility issues

[zhou-zhoukang]

Hi! I really enjoy the app timeto.me, its UI interface is very visually appealing, and I truly appreciate its design. Thank you for your hard work on this open source app. And I noticed a few accessibility improvements that could be made.

1. The Timer Image and Setting Image located at the bottom of the screen are not currently recognized as buttons. When a blind user navigates to these elements using screen reader, the software does not indicate that these components are interactive, which may lead to confusion. It would be helpful to add button semantics to the ZStack within the RowScope.TabButton method, such as Modifier.semantics { role = Role.Button }, to clearly convey their interactivity.

2. The TimerDataNoteText component sometimes contains a transparent space character. While this space does not affect the experience for sighted users, it may be recognized and announced as "Space" by screen reading software, causing unnecessary auditory information for blind users and adding to their cognitive load. One possible solution is to replace this component with a Spacer(), or to remove its semantic using api such as Modifier.clearAndSetSemantics {}.
3. The red boxes in the image below indicate all the UI elements that can be accessed by visually impaired users using screen readers. The components are quite fragmented, requiring blind users to swipe right multiple times to obtain information sequentially. If each Row item could be grouped into a single accessibility unit, it would be greatly helpful. A potential approach would be using Compose's semantic APIs to group the components together, as demonstrated in Compose's official accessibility documentation. Specifically, adding Modifier.semantics(mergeDescendants = true) to the VStack in LazyColumn in the WhatsNewFs function may be helpful.

4. When blind users focus on the plus button, they will only hear "New Timer Hint" but cannot understand what specific Timer Hint this button is "New". This requires them to perform additional left/right swipes to obtain contextual information about the button. This may creates unnecessary cognitive load. Adding an onClickLabel to the button might be a good practice. An example is provided in the code snippet below. For instance, when focusing the button, screen reader might announce "Double tap to activate" before a label is added. After adding an appropriate label, it would instead say "Double tap to new hobby timer hint", which can make the button's function more intuitive and clear to users.

Button(
	modifiler = Modifier.semantics {  
	   onClick(label = "new hobby timer hint") { }
	}
)

Please don’t feel any pressure — I completely understand if other things come first. I really appreciate all the work and effort you’ve already put in!

[Medvedev91]

Hello!

Thank you for the such detailed description.

Yes, accessibility is a big area I have to improve.