The collapsible button is currently treated as linked text (anchor element). Meaning it doesn't inherit the (font) color property even if it is defined on the higher element (either table or div). The problem is that if the background color of the header which contains the collapsible button changed to a less contrasting color, it will make the button too difficult for reading. Also it is impossible to redeem it by changing a contrasting font color.
Version: 1.23.0
Severity: minor
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| jQuery.makeCollapsible: Font color of collapsible button set | mediawiki/core | master | +5 -0 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T167654 [Request] Feature parity between new collapsible buttons and NavFrames | |||
| Declined | None | T63018 jQuery.makeCollapsible: Font color of collapsible button cannot be set |
Which collapsible button? Could you please provide steps to reproduce? Also see https://www.mediawiki.org/wiki/How_to_report_a_bug . Thanks!
(In reply to comment #1)
Which collapsible button? Could you please provide steps to reproduce? Also
see
https://www.mediawiki.org/wiki/How_to_report_a_bug . Thanks!
Please check this topic:
https://www.mediawiki.org/wiki/Manual_talk:Collapsible_elements#Font_color_of_collapsible_button
This could be fixed by setting:
.mw-collapsible-toggle a {
color: inherit;
}I think it would be a worthy change to make.
Change 262937 had a related patch set uploaded (by D3r1ck01):
jQuery.makeCollapsible: Font color of collapsible button set
Oh right, forgot that in the "default", we still want to prentend this is a link.... That makes everything difficult, since inherit will overwrite the link color....
Yeah, I'm afraid we can't really do this now. It would make the button not look clickable by default.
You can just use custom toggles for these cases.
Change 262937 abandoned by D3r1ck01:
jQuery.makeCollapsible: Font color of collapsible button set
Reason:
Still to be decided upon.
For english Wikipedia, I have now added the following workaround for this problem:
That keeps the core code slightly cleaner, while preserving things that Wikipedians are used to. Long term TemplateStyles could be a better solution, or more advanced custom toggles.
As mentioned by @TheDJ, this use case is already supported. The only change needed is for the template to use a custom-collapsible rather than a plain collapsible, which means makeCollapsible will allow full freedom over the styling of the toggle, including its color.
Important to keep in mind that for usability and accessibility, it is recommended that, when using custom collapsible toggles, to make sure the button stands out as clickable and interactive. For example by ensuring it has focus and hover styles, and things like cursor: pointer; for desktop. These can be provided via TemplateStyles where needed.