Screen readers should not announce current time every time a new message is received

[pafcu]

Description

Currently Riot permanently shows the time of the last message in the timeline (for other messages this is only shown on hover). This is fairly annoying with a screen reader as it means that the current time is announced every time a new message arrives. We could probably hide this information from screen readers.

We may also need to figure out how to show timestamps on request using something else than hover (e.g. show on some specific keypress).

Steps to reproduce

• Start orca screen reader
• Create a new room
• Invite riot-bot
• Trigger the tutorial
• Observe that you now definitely know what time it is

Version information

Riot web c28d9e5-react-c002d3ff9967-js-36ff0ad0193e on FF57 and orca 3.26.0

[turt2live]

Brief research tells me this might be solvable with aria-live.

[pvagner]

I think the same thing would also fix #5697.
The thing is we do currently have aria-live set to polite on the outer time line div hoping screen readers would automagically anounce new events as they arrive.
However now with these two bug reports it's apparent this is not very nice strategy although some casual screen reader users like me might be fine overlooking this issue all the time.
With the current state screen readers do read all the changes to the time line if the place which has just been changed is visible.
I am thinking that the fix here might be

• Remove the aria-live from the outer div.
• Only set aria-live conditionally just when appending new messages.

This way aria-live won't be kicking in even when scrolling.

[pvagner]

I haven't yet tested this but now when looking at the ScrollPanel and TimelinePanel components I think we should use the same strategy these components are using for when to push content. They are only adding new events to the end if the ScrollPanel is stuck at bottom.

[Palid]

Related #5679

[Palid]

@pafcu @pvagner it seems matrix-org/matrix-react-sdk#1939 solved this, is this one still relevant?

[pvagner]

Unfortunatelly the proposed fix has been reverted because it was causing other severe issues when uhandling timeline content with a screen reader.
See this comment for my ideas matrix-org/matrix-react-sdk#3019 (comment) . Bits related to live region are still relevant today and this is still an issue.

[Palid]

Unfortunatelly the proposed fix has been reverted because it was causing other severe issues when uhandling timeline content with a screen reader.
See this comment for my ideas matrix-org/matrix-react-sdk#3019 (comment) . Bits related to live region are still relevant today and this is still an issue.

Thank you for your verification and suggested solution. @kittykat @novocaine can you look at that? I think we want to definitely have it in the next sprint, at least partially. It's been waiting way too long.

[novocaine]

I understand the timeline is still noisy for screen readers, but it's still not quite clear to me whether the problem referred to in this specific issue still exists: do screen readers still announce the current time every time a new message is received? Current EW doesn't show all timestamps by default - you need to enable "Always show message timestamps" - so I'm curious whether this is still happening and why it doesn't seem to match the visual UI

[pvagner]

Always show timestamps option has no effect to screen reader users as it's currently implemented.
Timestamp is a part of the permalink anchor. When the timestamp is shown that anchor includes the timestamp as its text. When the timestamp is not shown the permalink anchor has no textual content. For screen readers it's nice to label unlabeled controls. So to make sure the permalink is always labelled for accessibility purposes an aria-label with event timestamp has been added to the permalink anchor.
The issue we are discussing here is related to the fact screen reader announce the text when corresponding DOM node rerenders. The fact it's a timestamp which is being reported is just a coincidence and should hopefully not be important when fixing this.
If it's possible I'd start exploring if we can implement a check that would set aria-live="polite" on the parent div when the message being added is appended to the bottom of the timeline. When scrolling aria-live should definatelly be set to off.
If this turns out to be difficult, I would suggest removing aria-live from the timeline entirely and consider creating a live region that is only visible to screen reader users that would be used for notifying screen readers about important events happening in the app. Google docs, Github, facebook and other sites are doing this for example. It would work such a special status bar only visible to screen reader users and if we wanted something to get announced by the screen reader we'd placed it there.
See here for an article describing this paradigm https://webaim.org/techniques/css/invisiblecontent/

Perhaps we can discuss this in more details in the #element-accessibility:matrix.org room with @MarcoZehe, @t3chguy and other accessibility aware people.

[MadLittleMods]

Related to #10952