matrix-react-sdk
matrix-react-sdk copied to clipboard
Accessibility: Improve Voiceover
Improves Voiceover through a dedicated aria-label:
Checklist
- [ ] Tests written for new code (and old code if feasible)
- [x] Linter and other CI checks pass
- [x] Sign-off given on the changes (see CONTRIBUTING.md)
Signed-off-by: Alex Kirk <[email protected]>
Here's what your changelog entry will look like:
✨ Features
- Accessibility: Improve Voiceover (#12189). Contributed by @akirk.
Hi!
Thanks for the contribution. Can you fix the typescript, lint and tests errors to make the CI happy?
@akirk Hello! The CI is in failure. Do you still want to work on this PR? Thanks
@akirk any chance of splitting out the improve voiceover changes into a separate PR to simplify concerns for review?
I tried to address the lint problems, I am not sure it worked, npm run lint:fix
started to work on code that I didn't touch so I tried to omit it.
For types npm run lint:types
complains about lots of files that I didn't touch either. Could you give me a few pointers in how I could address these issues?
I tried to address the lint problems, I am not sure it worked, npm run lint:fix started to work on code that I didn't touch so I tried to omit it. For types npm run lint:types complains about lots of files that I didn't touch either. Could you give me a few pointers in how I could address these issues?
Could you share examples of changes and errors respectively
any chance of splitting out the improve voiceover changes into a separate PR to simplify concerns for review?
Ok, I'll create a new PR and remove the keyboard nav changes from this PR.
The new PR for the keyboard navigation is #12328.
I don't think this approach is viable:
- Not sure if we should worry about the intrinsic behavior of screen readers i.e when and how much they pause. Testing with orca, I don't even get a pause.
- An event can be rendered twice - once in the main timeline and then again in the thread panel. Assigning an id in this fashion would mean multiple elements have the same id.
- Some message bodies already render with an id eg: MLocationBody
I think something like https://github.com/matrix-org/matrix-react-sdk/pull/12189/commits/e30354b57f7d4688401540c01b8ec585b3d758f6 is probably what we want but we'd have a function that takes an event and spits out some accessible text:
"aria-label": this.props.mxEvent.sender.name + '. ' + getAccessibleTextForEvent(this.props.mxEvent),
I'm inclined to close this PR for now.
Closing for the reasons mentioned in https://github.com/matrix-org/matrix-react-sdk/pull/12189#issuecomment-2124168056