Page MenuHomePhabricator

Identify and bind relevant UI strings to DOM elements
Closed, ResolvedPublic2 Estimated Story Points

Description

Establishing how the UI strings can be programmatically accessed and linked to the DOM elements.

Steps:

  1. Determine where these strings originate: MediaWiki i18n system (message keys) or direct HTML
  2. Map each string to its corresponding DOM element (if applicable), so that it can be linked to user interaction (e.g. highlighting, clicking)

Event Timeline

If using the same system as for page content, this might involve adding a config variable to PlayerHooks::onBeforePageDisplay() and to extension.json, for example:

 "WikispeechInterfaceContentSelector": {
			"description": [
				"The selector for the element that contains the text of the interface. ",
			],
			"value": "#vector-main-menu"
		},

However, this may not be the most robust approach, since:

  • Interface elements are not always located within the same structure as the article content (e.g. #mw-content-text).
  • The DOM structure of menus, search fields and other interface-elements varies significantly and may change between different skins.
  • We might not want to include all UI elements, but only those that are semantically relevant or useful for speech playback.

If chosing: Main Menu, Contents, Tools and Appearance as mentioned in T402617 then for these menu section titles, we can rely on the skin's i18n-message system.
These messages are defined in the mediawiki/skins/Vector/i18n directory. For example:

"vector-main-menu-label": "Main menu"
"vector-toc-label": "Contents"
"vector-page-tools-label": "Tools"
"vector-appearance-label": "Appearance" 
    (list items beneath Appearance)
     "vector-feature-limited-width-name"
     "vector-feature-limited-width-0-label"
     "vector-feature-limited-width-1-label"
     "vector-feature-custom-font-size-name" ... etc

For the list items beneath Main Menu, Contents, and Tools, however, it's more complex:
the structure and content vary depending on the wiki and the page context. These are often generated dynamically or locally configured, and don’t have direct message keys in core or skin i18n.

Examples from the DOM:

Tools: <ul class="vector-menu-content-list"> with <li id="t-permalink" class="mw-list-item"> etc.
Contents: <ul id="mw-panel-toc-list"> with <li class="vector-toc-list-item"> etc.

i18n-based labels

These menu titles are defined in the skin's i18n files and can be accessed via mw.msg():

  • class="vector-pinnable-header-label":
    • "vector-main-menu-label" → "Main menu"
    • "vector-toc-label" → "Contents"
    • "vector-page-tools-label" → "Tools"
    • "vector-appearance-label" → "Appearance"
i18n-based options (under “Appearance”)

The individual options (font size, width, color theme) are also translatable via i18n messages. These are rendered inside:

  • class="cdx-label__label__text" or other internal label wrappers:
    • "vector-feature-limited-width-name"
    • "vector-feature-limited-width-0-label"
    • "vector-feature-limited-width-1-label"
    • "vector-feature-custom-font-size-name"
    • "vector-feature-custom-font-size-0-label"
    • "vector-feature-custom-font-size-1-label"
    • "vector-feature-custom-font-size-2-label"
    • "skin-theme-name", "skin-theme-day-label", etc.
DOM-only list items (no i18n messages)

The actual menu items under some sections are not based on i18n keys but rendered dynamically based on site config or wikitext (e.g MediaWiki:Sidebar). These can only be accessed via the DOM:

  • Under “Main menu” and “Tools”:
    • class="mw-list-item"
  • Under “Contents” (TOC):
    • class="vector-toc-list-item"

Note: These elements must be read based on their .innerText, since they don’t map to i18n keys directly?

Viktoria_Hillerud_WMSE changed the point value for this task from 4 to 2.Oct 15 2025, 8:35 AM

Was there anything I should review here?

Was there anything I should review here?

Yes or more if you have any objections to the comment I wrote above about the identified UI strings and where they come from. This will not be a gerrit patch, and I just wondered if you wanted to ok this :)