Should be relatively straightforward.

Reading the limited width toggle button on a screenreader should read out text

I'm guessing this will be done with an extra element that is only visible to screenreaders. If so, I'm wondering if it makes sense to refactor the button to be server rendered instead of client-side rendered? Because the button is rendered inside the viewport, possible benefits include "last visual change", speed index, and perceived load time improvements

@bwang do screenreaders need this to be accessible?

Change 875426 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Add label and title attribute/tooltip to full-screen toggle button

https://gerrit.wikimedia.org/r/875426

In T323625#8500058, @Jdlrobson wrote:

@bwang do screenreaders need this to be accessible?

I do not think this should be accessible to screenreaders. Is toggling the limited width toggle have any influence on the DOM structure or accessibility tree. If not (what I suppose) it would be better to fully hide (aria-hidden) the toggle.

Thanks for confirming. That was what I was thinking.

Change 875426 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add label and title attribute/tooltip to full-screen toggle button

https://gerrit.wikimedia.org/r/875426

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Reading the limited width toggle button on a screenreader should read out text

✅ AC2: Hovering over the limited width toggle button should show a tooltip with text

In T323625#8500395, @Volker_E wrote:

In T323625#8500058, @Jdlrobson wrote:

@bwang do screenreaders need this to be accessible?

I do not think this should be accessible to screenreaders. Is toggling the limited width toggle have any influence on the DOM structure or accessibility tree. If not (what I suppose) it would be better to fully hide (aria-hidden) the toggle.

@Volker_E @Jdlrobson
Sorry I didnt see this comment before, and I think this passed QA when it shouldn't have. AC1: Reading the limited width toggle button on a screenreader should read out text isnt possible if the toggle has aria-hidden.

I dont think the limited width toggle has much utility to screenreader users, but I dont think it should be excluded from the DOM either. I believe this violates guidelines about using 'aria-hidden' on an interactive/focusable element (https://www.w3.org/TR/aria-in-html/#4thrule).
I think of this similarly to the pinnable elements or any other feature relating to UI customization, the feature doesnt primarily benefit screenreader users, but should be usable by them if they choose. For example, its possible to have a use case (albeit extremely unlikely) where a person with poor vision (not blind) using a screenreader that wants to use the toggle. We do hide features in certain cases like the sticky header, where all the content is repeated and already otherwise accessible, but that doesnt apply here.

Shall we create a new ticket to follow up?

In T323625#8670128, @Jdlrobson wrote:

Shall we create a new ticket to follow up?

Done https://phabricator.wikimedia.org/T331564