Module talk:Sidebar

In article Atlanta Compromise, it is using an InfoBox Template:Nadir of American race relations .. that infobox has an image in it. How can I add "alt" text for the image, to assist visually impaired users of the encyclopedia? I couldn't find instructions for alt text in this module page. Noleander (talk) 01:39, 10 May 2025 (UTC)Reply

@Noleander: Template:Nadir of American race relations has

{{Sidebar with collapsible lists
...
| image = [[File:Le Petit Journal 7 Oct 1906 (cropped).jpg|232px|class=notpageimage]]
...
}}

and you would add the alt text inside that image specification using |alt=, see WP:EIS#Alt text and caption. --Redrose64 🌹 (talk) 12:57, 10 May 2025 (UTC)Reply

Great, thanks, that worked. Noleander (talk) 13:13, 10 May 2025 (UTC)Reply

I noticed that when a wrapper of this template is called on the page the title parameter links to, the title renders as the link color despite not actually being a link. This doesn't align with the default behavior when a page links to itself (e.g.: Module talk:Sidebar) or the behavior when a non-title link in a sidebar links to the page it's placed on. It's also possible that this violates the Links should be clearly identifiable as links for readers clause of MOS:COLOR (it doesn't conform to the inverse, i.e. that non-links shouldn't appear as links).

My Lua knowledge is limited at best so I have no idea what/who (and, by extension, why) caused this. Any thoughts?

— Daℤyzzos (✉️ • 📤) 20:18, 29 July 2025 (UTC)Reply

@DaZyzzogetonsGotDaLastWord: On which page do you see this happening? Examples always help. --Redrose64 🌹 (talk) 21:03, 29 July 2025 (UTC)Reply

First noticed it on Mathematics. – Daℤyzzos (✉️ • 📤) 23:22, 29 July 2025 (UTC) P.S. Just realized this—only happens on dark mode (probably should've checked that earlier, but oh well.) Also: using Chrome but also shows up in Safari on my phone (again only in dark mode). – Daℤyzzos (✉️ • 📤) 23:28, 29 July 2025 (UTC)Reply

This also occurs using Firefox, again dark mode only. The HTML that is served has

<table class="sidebar nomobile nowraplinks hlist">
  <tbody>
    <tr>
      <td class="sidebar-pretitle">Part of a series on</td>
    </tr>
    <tr>
      <th class="sidebar-title-with-pretitle">
        <a class="mw-selflink selflink">Mathematics</a>
      </th>
    </tr>
    ...
  </tbody>
</table>

In both dark and light mode, this comes with the following CSS:

@media screen {
  a.mw-selflink {
    color: inherit;
    font-weight: bold;
    text-decoration: inherit;
  }
}

which is what makes the word "Mathematics" appear black and boldface. But in dark mode only, the following CSS (found in Module:Sidebar/styles.css) is used in addition:

@media screen {
  html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a {
    color: var(--color-progressive) !important;
  }
}

The last three simple selectors (.sidebar:not(.notheme) .sidebar-title-with-pretitle a) are what's causing the color to be overridden. The color value (var(--color-progressive)) is read from a variable that is set elsewhere. Why it's written that way, I don't know. --Redrose64 🌹 (talk) 07:10, 30 July 2025 (UTC)Reply

I did some WikiBlame-ing and discovered that the last bit of CSS in your comment (the @media screen one) was added in this edit to the style page by @Jdlrobson (pinging to find the reasons for the addition as the link in the edit summary is broken and a search for "Fall of Constantinople dark mode error" on talk pages turned up blank). – Daℤyzzos (✉️ • 📤) 13:20, 30 July 2025 (UTC)Reply

(continuation of Module talk:Sidebar/Archive 6#Removing sidebar images as page image)

@Izno: I've added notpageimage to the sandbox and its configuration. The RedBurn (ϕ) 06:36, 30 August 2025 (UTC)Reply

@The RedBurn Unfortunately, the class needs to be on the [[File: syntax and not on a container of that item.

(NB make sure the ping is attempted in the same edit as you sign.) Izno (talk) 16:53, 1 September 2025 (UTC)Reply

@Izno: I've updated the sandbox to add the class to the [[File: part. The RedBurn (ϕ) 14:54, 2 September 2025 (UTC)Reply

Good start. In the else case, what about when there is arbitrary HTML in the parameter? Izno (talk) 15:55, 2 September 2025 (UTC)Reply

Or a link (or links) in the if branch. Izno (talk) 15:56, 2 September 2025 (UTC)Reply

Hi, per WIA-ARIA, can the parent <table> HTML element with classes sidebar sidebar-collapse nomobile nowraplinks please get an ARIA role. Like the Mbox templates (see Module:Message box, I was thinking role="none" is most appropriate. Although, in this case since most sidebars are navigation boxes it may be helpful to able to pass a boolean parameter to change the ARIA role given to role="navigation".

@Izno What do you think? Sorry, I'm browsing around with my screenreader and noticed the sidebar also uses HTML tables still... Are you also on-board with role="none" and a boolean argument to switch this to role="navigation"?

(P.S. future me or someone else kind enough I can proof it—will have to also explain clearly and succinctly in sidebar and sidebar with collapsible lists template docs how to use lists (that expose <ul>, <li>, etc.) and be ARIA-friendly i.e. grouping them so they're read out usefully, labelling (!!) so important as otherwise a long babelling electronic voice of hyperlinks is all the visually impaired has for reference etc. if this is even possible to achieve on WP...) waddie96 ★ (talk) 02:47, 1 September 2025 (UTC)Reply

Sidebars are either nav or aside, if we were to use HTML elements that I don't current have access to. I'll mark it up as nav for now in the sandbox. Izno (talk) 16:57, 1 September 2025 (UTC)Reply

Thanks. I'm pretty confident that this particular WIA-ARIA work such as assigning roles to HTML elements whose semantics are incongruent to their use-case is an uncontroversial edit despite it being such a high-use page. Placing edit request.

Kindly at the HTML attribute role="navigation" to the parent <table> element please. This will replace the implicit semantics of a data table with the explicit semantics of a navigation group/group of links (the identical semantics as <nav>) to accessibility technology.

I guessed this, so please don't slate me:

−

:css('width', args.width or nil) :cssText(args.bodystyle or args.style)

+

:css('width', args.width or nil) :cssText(args.bodystyle or args.style) :attr("role", "navigation")

or is it setAttribute("role", "navigation")? I feel like the former.waddie96 ★ (talk) 17:39, 1 September 2025 (UTC)Reply

Or you can just say sync to the sandbox. Izno (talk) 19:13, 1 September 2025 (UTC)Reply

  Not done for now: Going to wait until RedBurn finishes their work. Izno (talk) 15:56, 2 September 2025 (UTC)Reply