Wikipedia>Isaacl: /* Change background color for .fmbox-warning */ APCA tries to adjust for differences in how humans perceive luminance in different colours and which colour is foreground versus background; some concerns with WCAG 3 is that a replacement standard should have more hard data behind it

2025-10-07T21:52:17Z

Change background color for .fmbox-warning: APCA tries to adjust for differences in how humans perceive luminance in different colours and which colour is foreground versus background; some concerns with WCAG 3 is that a replacement standard should have more hard data behind it

New page

{{oldtfdfull|date= 2020 February 15 |result=keep |disc=Module:Message box}}
<noinclude>{{permprot}}</noinclude>
{{Archives|bot=lowercase sigmabot III|age=30}}
{{User:MiszaBot/config
| algo = old(30d)
| archive = Module talk:Message box/Archive %(counter)d
| counter = 1
| maxarchivesize = 150K
| archiveheader = {{Automatic archive navigator}}
| minthreadstoarchive = 1
| minthreadsleft = 4
}}

==CSS instead of tables==
{{moved discussion from|Template talk:Ambox#CSS instead of tables|[[User:Sapphaline|Sapphaline]] ([[User talk:Sapphaline|talk]]) 10:25, 20 August 2025 (UTC)}}
Could this thing use <code><nowiki><div style="display:table;"></nowiki></code> and <code><nowiki><div style="display:table-cell;"></nowiki></code> instead of literal tables and table cells (<code><nowiki><table></nowiki></code>, <code><nowiki><td></nowiki></code>)?

Were the any previous attempts to remake this using <code><nowiki><div></nowiki></code>? If so, what was the consensus? [[User:Sapphaline|Sapphaline]] ([[User talk:Sapphaline|talk]]) 09:46, 20 August 2025 (UTC)

:A long time ago this would have been converted to divs but apparently IE sucked (this should not be news).
:Today, I have [[User:Izno/Sandbox/Ambox]] with what are some skimmings and started a sandbox at [[Module:Message box/div]]. I have just done a very bad job of finishing this work. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 22:09, 24 August 2025 (UTC)
::Which might be closer to done than not, honestly. I think what it currently needs is to
::# Double check the ambox work
::# Add "soft" support for the other kinds of boxes (where soft is defined as module-supports but config disabled)
::# Merge tested /div version but not CSS into main
::# Enable boxes of each kind one by one.
::#* Leave ambox for penultimate as the most likely to cause some mass noise in a way
::#* Probably somewhere around here do ombox, [https://en.wikipedia.org/w/index.php?search=insource%3A%2FMessage%5B%20_%5Dbox%5C%2Fombox%5C.css%2F%20-intitle%3A%2F(%5BSs%5Dandbox%7C%5C%2Fdoc)%2F&title=Special%3ASearch&profile=advanced&fulltext=1&ns10=1&ns828=1 that has some needed coordination]
::#* Leave tmbox for ultimate, there is work to [https://en.wikipedia.org/w/index.php?search=insource%3A%2FMessage%5B%20_%5Dbox%5C%2Ftmbox%5C.css%2F%20-intitle%3A%2F(%5BSs%5Dandbox%7C%5C%2Fdoc)%2F&title=Special%3ASearch&profile=advanced&fulltext=1&ns10=1&ns828=1 coordinate]
::# Fix bugs that are identified
::# Move CSS over to better-named stylesheet
::# Delete the /div CSS (I won't be too sad)
::# Remove main support for table versions, possibly rename some things
::[[User:Izno|Izno]] ([[User talk:Izno|talk]]) 22:42, 24 August 2025 (UTC)
::I have now put this plan in a publicly editable place at [[Module:Message box/div/doc]]. [[User:Izno|Izno]][[User:IznoPublic|Public]] ([[User talk:Izno#top|talk]]) 00:26, 26 August 2025 (UTC)
::Hi! I didn't know you were doing this, so I made something similar. It seems to work:
::* Module: [https://en.wikipedia.org/w/index.php?title=Module%3AMessage_box%2Fsandbox&diff=1310791170&oldid=1300331049]
::* Styles: [https://en.wikipedia.org/w/index.php?title=Module%3AMessage_box%2Fsandbox%2Fambox.css&diff=1310791252&oldid=1305438959]
:: [[User:Iniquity|Iniquity]] ([[User talk:Iniquity|talk]]) 16:57, 11 September 2025 (UTC)
:::Yes, I did it in its own sandbox because it's a longterm enough project not to be done in the main sandbox, which should generally be releasable ad hoc for trivial issues. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 17:03, 11 September 2025 (UTC)
:::And also, there are enough other dependencies that "just change the two or three places" isn't going to fly. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 17:06, 11 September 2025 (UTC)
::::Where else do you think this will affect? It seems that only the mobile version is oriented towards <syntaxhighlight inline lang="css">table.ambox</syntaxhighlight>, which can also be corrected by CSS [[User:Iniquity|Iniquity]] ([[User talk:Iniquity|talk]]) 17:09, 11 September 2025 (UTC)
:::::I have already documented in [[Module:Message box/div/doc]] multiple places that will need careful work, ambox among them. Please feel free to peruse and ask questions about what's there and why. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 17:41, 11 September 2025 (UTC)
::::::Thanks! [[User:Iniquity|Iniquity]] ([[User talk:Iniquity|talk]]) 17:47, 11 September 2025 (UTC)
:What's broken here? I've probably wrong but AFAIK for accessibility the existing role="presentation" should suffice. [[User:Aaron Liu|Aaron Liu]] ([[User talk:Aaron Liu#top|talk]]) 23:21, 28 August 2025 (UTC)
::You should always endeavor to use the default aria role element. In this case, that's not a table. Ignoring that, tables are shit for doing other presentation with. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 03:20, 29 August 2025 (UTC)
:::This /div work is great work, thanks for this [[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 19:49, 8 September 2025 (UTC)
:Ok, I think we can do {{tl|cmbox}} now. Based on what I wrote down before, the process of a rollout is:
:# Alert some key pages. Has to include some verbiage like <blockquote>A change is occurring to how {{tl|cmbox}} is implemented to support mobile resolutions better. It may cause some temporary display weirdness. Further information is available at [[Module talk:Message box#cmbox migration]].</blockquote> with some text at the specific section <blockquote>A change is planned to occur in how {{tl|cmbox}} is implemented. It should help improve display at mobile resolutions now, and accessibility later. cmbox was chosen because it has lower reader-facing impact than most other message box types and it's fairly self-contained. The change to cmbox will likely pave the way for other message boxes ({{tl|fmbox}} is probably next).You can expect some difference in styling from previous for a small period due to the [[WP:Job queue|job queue]], after which it should return to "normal". You should be able to correct it manually if you want with one of the usual steps ([[WP:PURGE|purge]], [[WP:NULL|null edit]], or [[Help:Dummy edit|dummy edit]]). If an issue with display persists, leave a comment here (this scenario may be possible with some unexpected setup cmboxes).</blockquote>
:#* Here (here, here is the warning)
:#* [[WP:VPT]]
:#* [[MediaWiki talk:Common.css]]
:#* Maybe [[WT:CAT]] and [[WT:CFD]]
:# Sync [[Module:Message box/sandbox]] to [[Module:Message box]] (first time only)
:# Within quick succession to next step, sync [[Module:Message box/configuration/sandbox]] to [[Module:Message box/configuration]]
:# Within quick succession to previous step, sync [[Module:Message box/div/cmbox.css]] to [[Module:Message box/cmbox.css]]
:[[User:Izno|Izno]] ([[User talk:Izno|talk]]) 17:08, 1 October 2025 (UTC)
:: The /div main and config modules have got some other adjustments that now make it different from what will end up going live, so they shouldn't generally be synced directly. For future me. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 21:59, 1 October 2025 (UTC)
::Also messages now posted to VPT and Common.css. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 22:00, 1 October 2025 (UTC)
::cmbox is deployed. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 20:30, 2 October 2025 (UTC)
:::Ok, cmbox has been basically quiet besides notes from the below. I will now work on fmbox, which should also be relatively low impact. I'm also starting to sketch out imbox which may need to interact with template content from Commons as well as [[:c:MediaWiki:Filepage.css]]. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 20:44, 7 October 2025 (UTC)

== Aria roles ==
{{archive top|status=SUMMARISED BELOW|outcome=[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 19:14, 2 September 2025 (UTC)}}

The elements with <code>role=none</code> (synonym for <code>presentation</code> which is not recommended for use) is not be hidden from the accessibility API ''but'' their ''implicit'' semantics are hidden. Meaning the contents of an Ambox for instance will not have the implicit semantics of a HTML data <code><table<nowiki/>></code>. So the content given in {{para|text}} will simply be presented to the accessibility API technology as {{tag|div|content=Content}} instead of {{tag|table|content=Content}} which is what we want, yes. However, the accessibility technology, i.e. screen reader, etc., will not have any idea what this text is or what it represents since the {{tag|div|o}} element that it 'sees' has no implicit <code>role</code>, such as with {{tag|p|content=Content}} for instance, and there is no <code>aria-label</code> given... So I suggest we give it these values, especially since:
{{tq2|<nowiki>If presentation or none is applied to a <table> element, the descendant <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> elements inherit the role and are thus not exposed to assistive technologies.</nowiki>'''<nowiki>But, elements inside of the <th> and <td> elements, including nested tables, are exposed to assistive technologies.</nowiki>'''}} — taken from [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/presentation_role].
I interpret this as meaning that the {{tag|img|o}} element inside the first {{tag|td|o}} element will be exposed, and it is simply an image/icon with no benefit to the screen reader or the visually impaired... so give the image {{tag|td|o}} element with class <code>mbox-image</code> the HTML attribute: <code>aria-hidden="true"</code>; so that it is '''completely''' hidden from the accessibility technology.

The next {{tag|td|o}} nests our <code>mbox-text</code> class with the actual stuff we want to expose. But we want to give it meaning too. The role should be: <code>role="note"</code> as it's a note semantically speaking and does not fit any other ARIA <code>role</code>, and the child elements of that will all be exposed to the API as whatever has placed in the text parameter anyway (as confirmed in the quote above). Finally I suggest giving it an <code>aria-label="Notice"</code> if {{para|type|notice}} or <code>style</code> or <code>content</code>, and possibly <code>aria-label="Warning"</code> if <code>delete</code> or <code>speedy</code>. So it'll read out with a screen reader for example as: {{kbd|Note. Notice. Content...}}

Option 2... the parent element may actually be what we need to expose because it's nesting the whole dang thing? I don't think it matters since the parent elements of the text element are hidden from the API but another solution possibility could be setting the entire {{tag|table|o}}'s role to <code>role="note"</code> and giving it an <code>aria-label="Notice"</code>, and then still hiding the image, and then leaving the text element alone, however I'm unsure if the note role is inherited by child elements like the none/presentation role is.

[[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 00:19, 29 August 2025 (UTC)
:How about we wait to suss out how we want to deal with any accessibility questions here after I've got everything in divs, as in the section just above. Anyway, I think the last time I looked at this, the most similar was role=note for what message boxes represent. I am pretty sure I am not a fan of adding labels here, which should be when the content needs naming, and this does not. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 03:24, 29 August 2025 (UTC)
:(In fact, the div version already removes the presentation role.) [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 05:18, 29 August 2025 (UTC)
::Cool. Please do ping me in discussions when this is revived. I've read extensively for many hours for something else and I'm quite well versed in it now. Yes, <code>role="note"</code> is the most appropriate role. Also, after testing it in the enwiki context using a few different screenreaders I tend to agree with you that an <code>aria-label</code> in this case is unnecessary "fluff" to the accessibility tree for the mbox, since as you stated the text describes itself. 👍 [[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 14:56, 29 August 2025 (UTC)
::Awesome. Can it give the image the HTML attr <code>aria-hidden="true"</code> too? Please 🙏 [[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 14:59, 29 August 2025 (UTC)
{{archive bottom}}
::Wow, thought I'd summarise:
::#Change the ARIA role given to the parent {{tag|table|o}} element to {{code|role{{=}}none|lang=html}}. Synonymous to <code>presentation</code>, i.e. identical function of removing all semantic meaning of table element and its direct children, but the latter is soon-to-be deprecated HTML.

::#Hide the images please: wrap the default image, and especially the custom left and right images (since the default at least has a null {{para|alt}}) with <syntaxhighlight inline lang=wikitext>...</syntaxhighlight>.
::Sorry, I'd edit the module in sandbox and give diffs but I have no idea how to code in Lua. Thank you! [[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 19:14, 2 September 2025 (UTC)
:::I think Izno suggested waiting until the div conversion was done, and then looking to see if anything like this is needed? — Martin ([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]]) 14:33, 4 September 2025 (UTC)
::::Yes apologies. I see that now. [[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 23:44, 4 September 2025 (UTC)
==Change background color for .fmbox-warning==

{{edit fully-protected|Module:Message box/fmbox.css|answered=yes}}
Current background color doesn't meet WCAG AA contrast requirements with links color used in Vector-2022, Timeless and Minerva, so I request to change it from <code>#ffdbdb</code> to <code>#ffe6de</code>.

More specifically, edit the 14th line so that
<pre>
background-color: #ffdbdb; /* Pink */
</pre>
becomes
<pre>
background-color: #ffe6de; /* Pink */
</pre>. [[User:Sapphaline|Sapphaline]] ([[User talk:Sapphaline|talk]]) 18:02, 10 September 2025 (UTC)
:Hmm why not change it to <code>var(--background-color-destructive-subtle, #ffe6de);</code>? [[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 18:05, 11 September 2025 (UTC)
::Then it'll be dynamic, adaptive for CSS themes, and change in dark mode [[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 18:07, 11 September 2025 (UTC)
:Why did the WMF feel the need to mess with link colors again? (Sent from the REAL vector skin) —[[User:pythoncoder|pythoncoder]] ([[User talk:pythoncoder|talk]] | [[Special:Contribs/pythoncoder|contribs]]) 17:57, 16 September 2025 (UTC)
::Hahaa I {{+1}} this. [[User:Waddie96|waddie96]] ★ ([[User talk:Waddie96|talk]]) 18:30, 16 September 2025 (UTC)
:{{not done for now}}''':''' This is also the background used for cmbox speedy and delete. I'd be fine making this change for all or none. I also think it's a reasonable question whether to consider the token directly for this case. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 23:37, 30 September 2025 (UTC)
::As for the token, the actual token is #ffe9e5 in use with background-color-error-subtle, which is probably the preferable token to reference rather than destructive-subtle.
::My issue with lightening the color is indeed that the original color is used in the context of at least one deletion mbox, and we want those to be annoying enough to be annoying.
::WCAG 2 AA should be taken a little less interestingly these days with the development of WCAG 3.0 which uses Accessible Perceptual Contrast Algorithm (APCA) to decide whether some content is too much or too little contrast. I expect blue/dark purple on pink to do better with the APCA than it does with WCAG 2 computation. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 03:13, 1 October 2025 (UTC)
:::Thanks for the interesting pointer to a new contrast metric! Based on a quick reading of some sites that came up in search, it seems that the WCAG working group is still considering if it will include APCA in the new release of its standards. Nonetheless, it does seem that improved ways of measuring contrast are under consideration. [[User:Isaacl|isaacl]] ([[User talk:Isaacl|talk]]) 04:55, 1 October 2025 (UTC)
::::Yeah, APCA takes into account some of the factors that have been recommended (but rarely considered) for consideration while looking at WCAG 2.0 contrast checking (notably, [relative] font size and boldness), but the contrast checking algo itself has also changed AIUI. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 15:36, 1 October 2025 (UTC)
:::::My understanding is that APCA tries to adjust the luminance contrast ratio to account for differences in how humans perceive luminance in different colours, as well as which colour is foreground and which is background. The threshold values in WCAG 2.0 were always known to be arbitrarily chosen; there seems to be some concerns that a new replacement in WCAG 3 should have more hard data behind it. [[User:Isaacl|isaacl]] ([[User talk:Isaacl|talk]]) 21:52, 7 October 2025 (UTC)

== cmbox migration ==
A change is planned to occur sometime starting in the next day or two in how {{tl|cmbox}} is implemented. It should help improve display at mobile resolutions now, and accessibility later. cmbox was chosen because it has lower reader-facing impact than most other message box types and it's fairly self-contained. The change to cmbox will likely pave the way for other message boxes ({{tl|fmbox}} or {{tl|imbox}} is probably next). (There is some other planning information in [[#CSS instead of tables]].)

You can expect some difference in styling from previous for a small period due to the [[WP:Job queue|job queue]], after which it should return to "normal". You should be able to correct it manually if you want with one of the usual steps ([[WP:PURGE|purge]], [[WP:NULL|null edit]], or [[Help:Dummy edit|dummy edit]]). If an issue with display persists, leave a comment here (this scenario may be possible with some unexpected setup cmboxes). [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 21:22, 1 October 2025 (UTC)

:Ok, this is now deployed. I await the lions and bears (oh my!). [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 20:30, 2 October 2025 (UTC)
::I think this is not working too well with minerva's JavaScript.
::On[[Trolleybuses in Tours|https://en.m.wikipedia.org/wiki/Trolleybuses_in_Tours#Lines]] for example learn more link appears before rather than after the text (and is kind of useless since it just repeats the expanded text).
::Page issues on mobile expect a certain markup outlined on [[mw:Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis|Mw.org]]. Hopefully an easy fix? 🐸 [[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 21:31, 3 October 2025 (UTC)
:::@[[User:Jdlrobson|Jdlrobson]] {{tl|cmbox}} is not (supposed to be) used in mainspace (the c stands for category). If there are issues, they are pre-existing there. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 21:51, 3 October 2025 (UTC)
::::Ok, this was a mis-translation use of {{tl|images}} from French Wikipedia which is apparently something closer to {{tl|multiple images}} there. IDK how you stumbled onto this use. It's the only use of cmbox in mainspace. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 21:58, 3 October 2025 (UTC)
:::::Thanks for looking! I just looked at WhatLinksHere and picked the top article. I didn't realize it was the only one! I must confess I didn't look closely at your changes to determine if it was preexisting. 🐸 [[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 00:56, 4 October 2025 (UTC)
::: {{ec}} The change made here is bringing it ''more'' into compliance with your [[mw:Recommendations for mobile friendly articles on Wikimedia wikis#Avoid tables for anything except data]]. 🙄 [[User:Anomie|Anomie]][[User talk:Anomie|⚔]] 21:52, 3 October 2025 (UTC)
:::And as for certain markup, {{tl|ambox}} which is supposed to be used in articles already has one task upstream about it. I suppose I'm glad you ran into this because it mostly firms up my feeling that what MF/Minerva/WikimediaMessages does with what it does desperately needs an overhaul even above the task or two out there. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 21:52, 3 October 2025 (UTC)
::::And specifically I had noted this issue with ambox though I hadn't yet written it down as being an issue. I'll go do at least that much. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 22:13, 3 October 2025 (UTC)
::::Now at [[Module:Message box/div/doc#Written]]. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 22:18, 3 October 2025 (UTC)

Message box - Revision history

Aki: 1 revision imported

← Older revision	Revision as of 10:16, 8 October 2025
(No difference)