See also https://gerrit.wikimedia.org/g/mediawiki/core/+/54b7fa9faf2d955ba84770957e0c90025e8880ac/resources/src/mediawiki.interface.helpers.styles.less#76

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly point to the codebase URL and provide clear steps to help a contributor get set up for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

It now works pretty widely, but this would probably need to be written as

.selector {
  content: '@{msg-parentheses-end}';
  content: '@{msg-parentheses-end}' / ''
}

Just to ensure you don't break Firefox and Safari older than about a year or so.

Change #1184495 had a related patch set uploaded (by Shadabgdg; author: L10n-bot):

[mediawiki/skins/Vector@master] Vector: Replace CSS-generated parentheses with empty content for accessibility

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

I have uploaded a patch for review:
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1184495

This patch replaces CSS-generated parentheses with empty content to improve accessibility and ensure screen readers do not announce extra characters.

Patch doesn't seem related? Did you push the correct patch?

Change #1185187 had a related patch set uploaded (by Shadabgdg; author: Shadabgdg):

[mediawiki/skins/Vector@master] Vector: Replace CSS-generated parentheses with empty content for accessibility

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

Change #1184495 abandoned by Shadabgdg:

[mediawiki/skins/Vector@master] Vector: Replace CSS-generated parentheses with empty content for accessibility

Reason:

Abandoning this change in favor of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1185187
, which contains the correct implementation.

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

Hi @Izno, are you sure about this?
From the MDN docs it's not entirely clear if content supporting browser, that have not yet implemented the alt fallback are ignoring the rule. The normal way were any invalid value the whole property is ignored, but there are some sequences where this is not true.

Also the alt text is normally aimed for image or emoji replacement and not for string replacements.

In T320996#11127262, @Izno wrote:

It now works pretty widely, but this would probably need to be written as

.selector {
  content: '@{msg-parentheses-end}';
  content: '@{msg-parentheses-end}' / ''
}

Just to ensure you don't break Firefox and Safari older than about a year or so.

OK, I've put this to test in Firefox 115/Win 8.1, and the content property with alt fallback is no exception. @Izno's recommendation is key for our basic support.

In T320996#11203873, @Volker_E wrote:

Hi @Izno, are you sure about this?

My intuition is generally that browsers are going to be fairly conservative in what they accept as valid CSS so as to prevent it becoming a threat vector in general and to save them the work of supporting CSS that isn't standard. Expanding content with the / 'abc' felt like a place where that conservatism was going to be relevant. Good to see that borne out in that case. :^)

Change #1185187 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Add alt text fallback for CSS-generated parentheses in user menu

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

I see several other places in core and elsewhere that could use this kind of change. search that has many false positives and maybe also some false negatives. mediawiki.hlist parentheses and middots, makeCollapsible brackets, skinStyles.less, and so on (and eyeballing, what look like a lot of clearfixes that given the number of less files appearing could potentially be a mixin).

@Volker_E I'm not clear if this is something I can/should be validating in prod.

@Edtadros With a screenreader and a modern browser (latest Safari & VoiceOver for example), you should be able to verify that the brackets are not read out/exposed, only the label itself.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sequoia 15.5
Browser: Safari
Device: MS
Emulated Device: NA

Test Case 1: Screenreader validation

1. Open a Vector 2022 page containing elements with msg-parentheses or msg-brackets.
2. Enable VoiceOver (macOS) or NVDA (Windows).
3. ✅ AC1: Screenreader reads only the label text.
4. ✅ AC2: Parentheses/brackets are not read aloud.

@Volker_E on beta it doesn't announce the brackets, but it does announce the pipe as a vertical line.

Test Result - Prod

Status: ✅ PASS
Environment: testwiki
OS: macOS Sequoia 15.5
Browser: Safari
Device: MS
Emulated Device: NA

Test Case 1: Screenreader validation

1. Open a Vector 2022 page containing elements with msg-parentheses or msg-brackets.
2. Enable VoiceOver (macOS) or NVDA (Windows).
3. ✅ AC1: Screenreader reads only the label text.
4. ✅ AC2: Parentheses/brackets are not read aloud.