Module talk:Sidebar: Difference between revisions

Content deleted Content added
ARIA: Reply
 
(36 intermediate revisions by 10 users not shown)
Line 3:
| minthreadsleft = 4
| minthreadstoarchive = 1
| counter = 67
| algo = old(90d)
| archive = Module talk:Sidebar/Archive %(counter)d
Line 16:
{{Lua sidebar}}
 
== AddHow supportget for"alt" Vtext for Tthe Eimage ==
 
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)
Can you add support for V T E <code><nowiki>{{navbar|Template Name|mini=y}}</nowiki></code> in the bottom right corner of this template like many other templates have? [[User:Qwerty284651|Qwerty284651]] ([[User talk:Qwerty284651|talk]]) 02:32, 5 June 2024 (UTC)
:{{replyto|Noleander}} [[Template:Nadir of American race relations]] has <syntaxhighlight lang=wikitext>{{Sidebar with collapsible lists
:{{replyto|Qwerty284651}} It's called a navbar, and it's already present. Why do you think that it isn't? --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] &#x1f339; ([[User talk:Redrose64|talk]]) 15:37, 5 June 2024 (UTC)
...
::I meant to add to the {{tl|sidebar}} template the ability display VTE i.e. the <code><nowiki>{{navbar|Template Name|mini=y}}</nowiki></code>. [[User:Qwerty284651|Qwerty284651]] ([[User talk:Qwerty284651|talk]]) 16:28, 5 June 2024 (UTC)
| image = [[File:Le Petit Journal 7 Oct 1906 (cropped).jpg|232px|class=notpageimage]]
:::Same answer, same question. It's already present in [[Template:Sidebar]], so, why do you think that it isn't? If something isn't working as expected. you ''need'' to provide examples. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] &#x1f339; ([[User talk:Redrose64|talk]]) 18:16, 5 June 2024 (UTC)
...
::::I don't see VTE in {{tl|Tennis tournaments}}. [[User:Qwerty284651|Qwerty284651]] ([[User talk:Qwerty284651|talk]]) 18:22, 5 June 2024 (UTC)
:::::You}}</syntaxhighlight> needand ayou {{para|name}}would parameter,add the alt text inside that image specification using {{diffpara|Template:Tennis tournaments|prev|1227452320|like thisalt}}. It is documented, atsee [[TemplateWP:SidebarEIS#Parameters]],Alt particularlytext inand the paragraph before the tablecaption]]. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] &#x1f339; ([[User talk:Redrose64|talk]]) 2012:1957, 510 JuneMay 20242025 (UTC)
::Great, thanks, that worked. [[User:Noleander|Noleander]] ([[User talk:Noleander|talk]]) 13:13, 10 May 2025 (UTC)
 
== Title always link-blue? ==
== Urgent: Please fix this template for printed content [[Module:Sidebar/styles.css]]. ==
 
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).
<div lang="en" dir="ltr">
Firstly, apologies for writing in English if this is not your first language (this is an automated message).
 
My Lua knowledge is limited at best so I have no idea what/who (and, by extension, why) caused this. Any thoughts?
This template has been detected as one of 436 pages using styles that break the page when printed when the user is using dark mode. The fix is very straightforward - all your styles relating to dark mode must be scoped to. Since there is a high risk of this templates being copied to other wikis it is important this notice is acted on ASAP.
 
&mdash;&hairsp;[[User:DaZyzzogetonsGotDaLastWord|Daℤyzzos]] ([[User_talk:DaZyzzogetonsGotDaLastWord|✉️]]&nbsp;•&nbsp;[[Special:Contributions/DaZyzzogetonsGotDaLastWord|📤]]) 20:18, 29 July 2025 (UTC)
To fix this:
:{{replyto|Qwerty284651DaZyzzogetonsGotDaLastWord}} It'sOn calledwhich a navbar, and it's already present. Whypage do you thinksee thatthis ithappening? Examples isn't?'always'' help. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] &#x1f339; ([[User talk:Redrose64|talk]]) 1521:3703, 529 JuneJuly 20242025 (UTC)
# Update `@media (prefers-color-scheme: dark` to `@media screen and (prefers-color-scheme: dark`
::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>
# Wrap any styles relating to `html.skin-theme-clientpref-night` in `@media screen`
:::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 ==
If this message has not been acted on in 7 days, this will be fixed by an automated script. Thank you for your help fixing this important issue.
 
(continuation of [[Module_talk:Sidebar/Archive_6#Removing_sidebar_images_as_page_image|Module talk:Sidebar/Archive 6#Removing sidebar images as page image]])
For any questions feel free to ask them at [[phab:T369874]].
 
@[[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:Jon (WMF)|Jon (WMF)]] ([[User talk:Jon (WMF)|talk]]) 18:22, 2 August 2024 (UTC) on behalf of the web team.
 
:@[[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.
</div>
:(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)
 
== Missing CSS variable?ARIA ==
 
{{edit request}}
On row 385 there is the line <code>:cssText('color: var(--color-base)')</code>, but the --color-base CSS variable doesn't seem to be defined anywhere? [[User:MKFI|MKFI]] ([[User talk:MKFI|talk]]) 13:18, 15 October 2024 (UTC)
 
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>.
:{{ping|Jdlrobson}} I see that you {{diff|Module:Sidebar|diff=1226521837|label=added}} this. Where is the CSS variable defined? And why is this an inline style declaration instead of a class? Now dependent templates have problems changing text colors without using !important CSS declarations. [[User:MKFI|MKFI]] ([[User talk:MKFI|talk]]) 11:20, 17 October 2024 (UTC)
::The variable is defined in [https://doc.wikimedia.org/codex/latest/design-tokens/color.html the mediawiki design system]. It is active on the default skins of Vector 2022 and Minerva and is essential to make this template work in dark mode. It is not defined on opt in skins such as Monobook and Vector and there it will be ignored (we can add a fallback if that is useful and less confusing).
::[https://m.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis this link] should have lots of helpful context. Let me know if you have any follow up questions. <span style="background:white; color: black;">🐸</span>&nbsp;[[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 18:00, 18 October 2024 (UTC)
:::{{ping|Jdlrobson}} this module is used a base for multiple other templates. Your change overrides derived template style declarations and caused for example [[Template:Zoroastrianism sidebar]] to display black-on-red text which made it difficult to read instead of white-on-red as it should. This module has a [[Module:Sidebar/styles.css|stylesheet]]. Does the color variable really need to be an inline style declaration instead of a line in .sidebar-list-title class? [[User:MKFI|MKFI]] ([[User talk:MKFI|talk]]) 08:10, 19 October 2024 (UTC)
::::Presumably it could be added via a class. When dark mode was rolled out, for templates I was less familiar with I usually went with the most straightforward solution. I see this one uses [[Module:Sidebar/styles.css]] ?
::::You should be able to see the exact issue it fixes (unreadable black text on a black background) by visiting https://en.wikipedia.org/wiki/Template:Sidebar/testcases?useskin=vector-2022&vectornightmode=1
::::and undoing that inline style using this code: <syntaxhighlight lang=javascript>
$('.sidebar-list-title[style]').each((a,i)=>i.setAttribute('style',i.getAttribute('style').replace('color: var(--color-base)', '')))
</syntaxhighlight>
::::So you could likely move it to CSS, test if the issue is resolved and then undo my change. <span style="background:white; color: black;">🐸</span>&nbsp;[[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 16:21, 19 October 2024 (UTC)
:::::{{ping|Jdlrobson}} I can't do the change myself - the module and stylesheet are both template-protected. [[User:MKFI|MKFI]] ([[User talk:MKFI|talk]]) 08:33, 20 October 2024 (UTC)
 
@[[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>?
== Templatestyles parameter ==
 
(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)
{{re|Izno}} Are there [[Wikipedia_talk:TemplateStyles/Archive_1#c-Izno-2018-07-27T01:35:00.000Z-In_the_context_of_meta_templates|still]] benefits of the caller templates using the numerous parameters {{para|templatestyles}}, {{para|child templatestyles}}, and {{para|grandchild templatestyles}} over a simple {{xtag|templatestyles}} in each? [[Special:Contributions/172.97.141.219|172.97.141.219]] ([[User talk:172.97.141.219|talk]]) 10:39, 30 November 2024 (UTC)
 
:Yes.Sidebars Usingare theeither dedicatednav parameteror allowsaside, if youwe were to use theHTML cascading part of CSS, namelyelements that theI CSSdon't incurrent thehave childaccess will apply after, not before the core TemplateStylesto. This avoids the case where the childI'sll stylesmark areit potentiallyup overriddenas bynav stylesfor of the same specificitynow in the core styles. You should generally always use these parameterssandbox. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 0616:0357, 1 DecemberSeptember 20242025 (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.
== treating [[Module:Navbar/styles.css]] ==
::I guessed this, so please don't slate me:
 
::{{textdiff|<nowiki>:css('width', args.width or nil)
{{ping|Izno}} Is it right not to treat [[Module:Navbar/styles.css]] in add_list_styles() whether sidebar has a navbar or not? If an article page transcludes a sidebar (with a navbar) and another navbar in this order, the styles doesn't seem to be applied on mobile view. [[User:本日晴天|本日晴天]] ([[User talk:本日晴天|talk]]) 15:42, 24 December 2024 (UTC)
: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)