View source for Module talk:Sidebar

{{ user:MiszaBot/config
| maxarchivesize      = 31K
| minthreadsleft      = 4
| minthreadstoarchive = 1
| counter             = 7
| algo                = old(90d)
| archive             = Module talk:Sidebar/Archive %(counter)d
}}
{{copied|from=Module:Sidebar|from_oldid=816157517|to=:incubator:Module:Wp/nod/Sidebar|to_diff=4304026}}
{{to do |inner=
* [[/Archive 5#Nomobile use]]
* [[/Archive 5#Make tables into divs instead|#Make tables into divs instead]]
* [[/Archive 5#Width auto and similar sidebars]]
}}
{{archives|search=yes|bot=MiszaBot II|age=90}}
{{Lua sidebar}}

== How get "alt" text for the image ==

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.  [[User:Noleander|Noleander]] ([[User talk:Noleander|talk]]) 01:39, 10 May 2025 (UTC)
:{{replyto|Noleander}} [[Template:Nadir of American race relations]] has <syntaxhighlight lang=wikitext>{{Sidebar with collapsible lists
...
| image = [[File:Le Petit Journal 7 Oct 1906 (cropped).jpg|232px|class=notpageimage]]
...
}}</syntaxhighlight> and you would add the alt text inside that image specification using {{para|alt}}, see [[WP:EIS#Alt text and caption]]. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] &#x1f339; ([[User talk:Redrose64|talk]]) 12:57, 10 May 2025 (UTC)
::Great, thanks, that worked. [[User:Noleander|Noleander]] ([[User talk:Noleander|talk]]) 13:13, 10 May 2025 (UTC)

== Title always link-blue? ==

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.: [[{{FULLPAGENAME}}]]) 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 {{tq|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?

&mdash;&hairsp;[[User:DaZyzzogetonsGotDaLastWord|Daℤyzzos]] ([[User_talk:DaZyzzogetonsGotDaLastWord|✉️]]&nbsp;•&nbsp;[[Special:Contributions/DaZyzzogetonsGotDaLastWord|📤]]) 20:18, 29 July 2025 (UTC)
:{{replyto|DaZyzzogetonsGotDaLastWord}} On which page do you see this happening? Examples ''always'' help. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] &#x1f339; ([[User talk:Redrose64|talk]]) 21:03, 29 July 2025 (UTC)
::First noticed it on [[Mathematics]].{{snd}}[[User:DaZyzzogetonsGotDaLastWord|Daℤyzzos]] ([[User_talk:DaZyzzogetonsGotDaLastWord|✉️]]&nbsp;•&nbsp;[[Special:Contributions/DaZyzzogetonsGotDaLastWord|📤]]) 23:22, 29 July 2025 (UTC) <ins>P.S. Just realized this&mdash;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).{{snd}}[[User:DaZyzzogetonsGotDaLastWord|Daℤyzzos]] ([[User_talk:DaZyzzogetonsGotDaLastWord|✉️]]&nbsp;•&nbsp;[[Special:Contributions/DaZyzzogetonsGotDaLastWord|📤]]) 23:28, 29 July 2025 (UTC)</ins>
:::This also occurs using Firefox, again dark mode only. The HTML that is served has <syntaxhighlight lang=html><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></syntaxhighlight> In both dark and light mode, this comes with the following CSS: <syntaxhighlight lang=css>@media screen {
  a.mw-selflink {
    color: inherit;
    font-weight: bold;
    text-decoration: inherit;
  }
}</syntaxhighlight> 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: <syntaxhighlight lang=css>@media screen {
  html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a {
    color: var(--color-progressive) !important;
  }
}</syntaxhighlight> The last three simple selectors (<code>.sidebar:not(.notheme) .sidebar-title-with-pretitle a</code>) are what's causing the color to be overridden. The color value (<code>var(--color-progressive)</code>) is read from a variable that is set elsewhere. Why it's written that way, I don't know. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] &#x1f339; ([[User talk:Redrose64|talk]]) 07:10, 30 July 2025 (UTC)
::::I did some [[WP:WikiBlame|WikiBlame]]-ing and discovered that  the last bit of CSS in your comment (the <code>@media screen</code> one) was added in [[Special:Diff/1234103998|this edit]] to the style page by @[[User:Jdlrobson|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).{{snd}}[[User:DaZyzzogetonsGotDaLastWord|Daℤyzzos]] ([[User_talk:DaZyzzogetonsGotDaLastWord|✉️]]&nbsp;•&nbsp;[[Special:Contributions/DaZyzzogetonsGotDaLastWord|📤]]) 13:20, 30 July 2025 (UTC)

== Removing sidebar images as page image ==

(continuation of [[Module_talk:Sidebar/Archive_6#Removing_sidebar_images_as_page_image|Module talk:Sidebar/Archive 6#Removing sidebar images as page image]])

@[[User:Izno|Izno]]: I've added <code>notpageimage</code> to the [[Template:Sidebar/sandbox|sandbox]] and [[Module:Sidebar/configuration/sandbox|its configuration]]. [[User:The RedBurn|The RedBurn]] <small>([[User Talk:The RedBurn|ϕ]])</small> 06:36, 30 August 2025 (UTC)

:@[[User:The RedBurn|The RedBurn]] Unfortunately, the class needs to be on the <code>[[File:</code> syntax and not on a container of that item.
:(NB make sure the ping is attempted in the same edit as you sign.) [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 16:53, 1 September 2025 (UTC)
::@[[User:Izno|Izno]]: I've updated the [[Module:Sidebar/sandbox|sandbox]] to add the class to the <code>[[File:</code> part. [[User:The RedBurn|The RedBurn]] <small>([[User Talk:The RedBurn|ϕ]])</small> 14:54, 2 September 2025 (UTC)
:::Good start. In the else case, what about when there is arbitrary HTML in the parameter? [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 15:55, 2 September 2025 (UTC)
:::Or a link (or links) in the if branch. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 15:56, 2 September 2025 (UTC)
::::Per [[Template:Sidebar#Parameters]] it's supposed to be full wiki syntax (<code>[[File:</code>).
::::I'm not sure what you mean by "a link (or links) in the if branch". [[User:The RedBurn|The RedBurn]] <small>([[User Talk:The RedBurn|ϕ]])</small> 18:17, 2 September 2025 (UTC)
:::::{{tq|it's supposed to be full wiki syntax}} Assuming without evidence that people follow the documentation or any expectations at all is a bad idea. :) That's how we got a failed "divification" of this template (and I'm sure many other failed rollouts of other software over the years).
:::::{{tq|a link (or links) in the if branch}} I realize I read this wrong in hindsight, but I think it rolls back around to the first comment about assuming the documentation is king.
:::::We need/want to substantiate your claim that the documentation reflects reality about the use of the image arguments {{em|or}} make something a bit more resilient to all the fun things users do. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 18:57, 2 September 2025 (UTC)
::::::I've just checked it out on [[Template:Greek mythology sidebar]].
::::::With <code><nowiki>[[Greek mythology|class=notopimage]]</nowiki></code> the "image" is shown as [[Greek mythology|class=notopimage]] instead of [[Greek mythology]].
::::::With <code><nowiki><img src="Kylix Theseus Aison MNA Inv11365 n1.jpg">class=notopimage]]</nowiki></code> it shows up as <img src="Kylix Theseus Aison MNA Inv11365 n1.jpg">class=notopimage]] which isn't much worse than without the "class=notopimage]]" bit. I seriously doubt that's actually used for that parameter.
::::::I don't see the point in making the code more complex for these two cases. [[User:The RedBurn|The RedBurn]] <small>([[User Talk:The RedBurn|ϕ]])</small> 21:22, 2 September 2025 (UTC)
:::::::Why would we expect raw image HTML, which is distinctly {{em|not}} a possibility in this environment?
:::::::I'm talking the basic <code>&lt;div class=""></code> or <code><nowiki>{| class=""</nowiki></code>, either of which one might find in this element (possibly by transcluded content - as a particular example, {{tl|Politics sidebar title}}, which is supposed to be put in {{para|title}} but that doesn't stop people).
:::::::And I think the former case is precisely something to concern oneself with. Users on this wiki if nowhere else don't like anything breaking, whether or not their understanding is calibrated correctly.
:::::::NB I am not trying to make your life difficult. I am pointing out that the masses will come for anyone who didn't consider factors like the above and account for them directly in what is deployed. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 21:47, 2 September 2025 (UTC)
::::::::That specific example <nowiki>{{</nowiki>[[Template:Politics sidebar title|Politics sidebar title]]<nowiki>}}</nowiki> wouldn't matter because it doesn't use the image arg, but I get your point.
::::::::I've added a sanity check for <code>[[File:</code> or <code>[[Image:</code>.
::::::::Incidentally, I've fixed it to use the correct <code>notpageimage</code> class. [[User:The RedBurn|The RedBurn]] <small>([[User Talk:The RedBurn|ϕ]])</small> 06:36, 3 September 2025 (UTC)
:::::::::{{replyto|The RedBurn}} Please see [[Module talk:Sidebar#c-Redrose64-20250510125700-Noleander-20250510013900|my post of 12:57, 10 May 2025 (UTC)]] for the method of adding a class to an image. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] &#x1f339; ([[User talk:Redrose64|talk]]) 19:33, 3 September 2025 (UTC)
::::::::::The modification proposed for the module is intended to add that class automatically to the templates that use this module. [[User:The RedBurn|The RedBurn]] <small>([[User Talk:The RedBurn|ϕ]])</small> 20:35, 3 September 2025 (UTC)

== ARIA ==

{{edit template-protected|answered=yes}}
Hi, per WIA-ARIA, can the parent {{tag|table|o}} HTML element with classes <code>sidebar sidebar-collapse nomobile nowraplinks</code> please get an ARIA role. Like the Mbox templates (see [[Module:Message box]], I was thinking <code>role="none"</code> 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 <code>role="navigation"</code>. 

@[[User:Izno|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 <code>role="none"</code> and a boolean argument to switch this to <code>role="navigation"</code>?

(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 {{tag|ul|o}}, {{tag|li|o}}, 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...) <span style="color:#CD0000">[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]])</span> 02:47, 1 September 2025 (UTC)

: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. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 16:57, 1 September 2025 (UTC)
::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 <code>role="navigation"</code> to the parent {{tag|table|o}} 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 {{tag|nav|o}}) to accessibility technology. 
::I guessed this, so please don't slate me:
{{textdiff|<nowiki>:css('width', args.width or nil)
:cssText(args.bodystyle or args.style)</nowiki>
|<nowiki>:css('width', args.width or nil)
:cssText(args.bodystyle or args.style)
:attr("role", "navigation")</nowiki>}}
::or is it <code>setAttribute("role", "navigation")</code>? I feel like the former.<span style="color:#CD0000">[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]])</span> 17:39, 1 September 2025 (UTC)
:::Or you can just say sync to the sandbox. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 19:13, 1 September 2025 (UTC)
:{{not done for now}}''':'''<!-- Template:ETp --> Going to wait until RedBurn finishes their work. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 15:56, 2 September 2025 (UTC)
::Good day @[[User:Izno|Izno]]. Please can you just insert the code I posted below for now. There's no timeline how long it may take the sandbox editing/testing to finish, and this edit won't need much testing beyond me checking ten or so use-cases that it actually shows up... At line 156, insert the highlighted code: <syntaxhighlight lang=lua line start="144" highlight="13" style="width:100%;font-size:small;">
	root = root:tag('table')
	if not child then
		root 
			:addClass(cfg.i18n.class.sidebar)
			-- force collapsibleclass to be sidebar-collapse otherwise output nothing
			:addClass(collapsibleClass == cfg.i18n.class.collapse and cfg.i18n.class.collapse or nil)
			:addClass('nomobile')
			:addClass(args.float == cfg.i18n.float_none and cfg.i18n.class.float_none or nil)
			:addClass(args.float == cfg.i18n.float_left and cfg.i18n.class.float_left or nil)
			:addClass(args.wraplinks ~= cfg.i18n.wrap_true and cfg.i18n.class.wraplinks or nil)
			:addClass(args.bodyclass or args.class)
			:css('width', args.width or nil)
			:attr('role', 'presentation')
			:cssText(args.bodystyle or args.style)
</syntaxhighlight> Thank you <span class="fn nickname" style="color:#CD0000">[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]])</span> 16:19, 7 September 2025 (UTC)
:::The reason I have not done so is because we expect to have two changes and I'm preventing the [[WP:Job queue]] from having to swallow two in some relatively quick procession (editing highly used modules has been observed by the WMF before). Users have lived with the change for many many years and is relatively minor at the end of the day. There is also 0 reason to test it any further. You should move on to more productive activities.  And lastly, setting role to presentation is already what we're not doing. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 16:29, 7 September 2025 (UTC)
::::Ah ok got you. Thanks for the education 😄. Observed meaning it was able to cause enough performance issues that WMF was able to track the cause all the way down to a module? Insane.
::::{{tq| You should move on to more productive activities.}} Please watch your tone though. <span class="fn nickname" style="color:#CD0000">[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]])</span> 20:19, 7 September 2025 (UTC)
::::If it’s in retaliation because I came across with tone I do apologise, the web doesn’t come with emotion semantics unless you use an emoticon 😅 <span class="fn nickname" style="color:#CD0000">[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]])</span> 20:21, 7 September 2025 (UTC)

{{edit request|ans=yes}}

Please adjust line-height to be in keeping with the increase at {{tl|infobox}}.
<syntaxhighlight lang=css>
.sidebar {
    line-height: 1.5em;
}
</syntaxhighlight> <span class="fn nickname" style="color:#CD0000">[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]])</span> 04:49, 14 September 2025 (UTC)

:Reason being: Currently, links etc. will be too bunched together, and it actually makes it 'harder' to read from an usability perspective since it appears busy/cluttered and 'a lot'. <span class="fn nickname" style="color:#CD0000">[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]])</span> 04:49, 14 September 2025 (UTC)
::As always with this editor: Where are the links to test cases? This module is used in 400K+ pages. Also, please link to the relevant "increase at {{tl|infobox}}". – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 14:57, 18 September 2025 (UTC)