Fix scrolling to older messages with screen reader

[gnprice]

This was found in #535 (comment) when investigating the app's behavior with a screen reader:

Navigating backwards (to older messages) does not work smoothly. Sometimes the focus can get moved to the sticky header instead of the previous message; sometimes the focus moves off-screen or behind the sticky header, instead of automatically scrolled. For reference on the correct behavior, see what happens when you are about to navigate to a channel item on the channels page off-screen.

We should fix this.

A required part of any PR to address this issue will be to try it out with a screen reader and confirm how it behaves. See the description of #535 for instructions.

[khanak0509]

Hii @gnprice I'd like to work on #1965 (screen reader navigation issue). Here's my proposed approach:
lib/widgets/message_list.dart – Add scroll controller, keyboard navigation handler, and auto-scroll on focus
lib/widgets/sticky_header.dart – Mark as non-focusable to prevent focus stealing
lib/widgets/scrolling.dart – Add helper to calculate scroll offset accounting for sticky header
Does this approach make sense ? Any suggestions or improvements?

[chrisbobbe]

I don't have the bandwidth to evaluate that right now (I notice this issue isn't in the current milestone), but you're welcome to test your approach proactively; see the issue description:

A required part of any PR to address this issue will be to try it out with a screen reader and confirm how it behaves. See the description of #535 for instructions.

[khanak0509]

@gnprice @chrisbobbe Hii , I've been working on fixing the screen reader navigation issue where navigating backwards to older messages stops at sticky headers instead of going directly from message to message.
What I've tried so far:

(1) I wrapped all header widgets with ExcludeSemantics to remove them from the accessibility tree:

  return ExcludeSemantics(
    child: StickyHeaderItem(...),
  );
case MessageListDateSeparatorItem():
  return ExcludeSemantics(
    child: StickyHeaderItem(...),
  );

(2) Header parameter in MessageItem

return StickyHeaderItem(
  allowOverflow: !item.isLastInBlock,
  header: ExcludeSemantics(child: header),
  child: child,
);

3. StreamMessageRecipientHeader

return ExcludeSemantics(
  child: GestureDetector(...),
);

4. DmRecipientHeader

return ExcludeSemantics(
  child: GestureDetector(...),
);

The issue is partially solved, but screen reader navigation still shows: Message → Header → Message instead of Message → Message.
The channel list works correctly because it uses simple SliverList without sticky headers
Could you please help me how to proceed? Should I approach this differently with the sticky header system?

[gnprice]

@khanak0509 Please take the time to read our contributing guide. For requests for help on solving issues, the right venue is in Zulip:
https://zulip.readthedocs.io/en/latest/contributing/contributing.html#getting-help

That's because otherwise the GitHub issue thread gets cluttered with things that didn't work.

[khanak0509]

Thanks,I’ll ask this question on Zulip instead.