Page MenuHomePhabricator

Vector 2022 should drop support for checkbox hack (IE11) for better accessibility
Open, Stalled, HighPublic

Description

Background

The checkbox hack is used in places where an interactive dropdown is needed but we don't want to require JavaScript, notably for header navigation tools in Vector and MinervaNeue. Here's an example from Vector:

Screenshot 2023-03-28 at 3.01.18 PM.png (792×1 px, 306 KB)

This is not fully compatible with Codex, and is most noticeable when you long press the language button resulting in accessible text.

The details element provides a more modern alternative: https://caniuse.com/?search=details

In short, at the moment accessibility of the site is coming at the cost of support for a small amount of users using outdated browsers.

User story

As a user of a modern browser (and majority of Wikimedia's audience) I want the best accessibility for all the ways I interact with the site.

Requirements

  • The details element should be used instead of the checkbox hack
  • Vector should not use checkbox hack

Per our commitment to grade C browsers, it is important that the user can login and view an article. With this in mind:

  • For IE11 and browsers that do not support the details element the table of contents should not be available (hidden)
  • For IE11 and browsers that do not support the details element, the page tools menu will not be available (hidden)

Design

If details/summary is used without consideration of IE11 this would be the outcome for IE11:
{F48694977}

To avoid this we should hide these menus given the requirements like so:

Screenshot 2024-04-25 at 5.02.11 PM.png (1×3 px, 1 MB)

Historic information

This information is provided for context, but should not be considered while implementing the ticket.

The <label> element is styled to look like a button, and styles based on states like hover, focus, and active are achieved by using a selector based on the sibling <input> element's state. See these styles in the medawiki.ui button.

Currently, there is no way to effectively apply Codex button styles to a label in this way.

Implementation ideas
  • As a first step, we could add selectors like the ones from mediawiki.ui linked above. This way, the CSS-only Button classes could be added to the <label> element and all necessary styles would apply, including for the different states
  • In the future, we may want to consider a ButtonMenu component whose CSS-only version is the checkbox hack

Related Objects

Event Timeline

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald Transcript

@AnneT I also wanted to point out that in addition to the state related styles, in my testing the button class doesnt style arbitrary elements correctly. I.e. this is what it looks like for a <label> element:

Screenshot 2023-04-26 at 4.02.41 PM.png (382×2 px, 173 KB)
.

Basically the same problem as https://phabricator.wikimedia.org/T284273 but for <label>

@bwang Good point - we make use of several native button pseudo-selectors (enabled/disabled, active/focus/hover...) which would not work with label, and I'm assuming we'd need to explicitly set display: inline-block to cover other elements. We would either need to use an explicit class-based approach in Button or write special styles to cover other elements.

@bwang suggested a way for us to do minimal updates in Codex to allow them to achieve the right styles in Vector:

  • In Codex, use :not( :disabled ) selectors instead of :enabled, which will allow enabled styles to apply to other elements. Disabled styles aren't needed at the moment, so we don't need to provide a path for that.
  • In the feature using these buttons, other styles will need to be applied to get the size and spacing right

See this patch.

@CCiufo-WMF revisiting this, I did originally set the acceptance criteria to just cover making this possible, not actually providing full support within Codex itself. So resolving T284273 will resolve this task too, although we may want to consider if we do want to provide documented, full support for the checkbox hack in Codex in the future.

Thanks @AnneT! Yeah let's keep this ticket as written and hold off on the "full support" until there is a clear need.

Change 922910 had a related patch set uploaded (by Anne Tomasevich; author: Bernard Wang):

[design/codex@main] Button: Add classes to support CSS-only non-button buttons

https://gerrit.wikimedia.org/r/922910

Change 922910 merged by jenkins-bot:

[design/codex@main] Button: Add classes to support CSS-only non-button buttons

https://gerrit.wikimedia.org/r/922910

Change 927786 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.11.0 to v0.12.0

https://gerrit.wikimedia.org/r/927786

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8ca78d2715/w

Change 927786 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.11.0 to v0.12.0

https://gerrit.wikimedia.org/r/927786

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8ca78d2715/w/

Jdlrobson subscribed.

This is high from web team's side. I've added it to agenda on next web/dst sync.

This is high from web team's side. I've added it to agenda on next web/dst sync.

The next scheduled sync is Jan 29 -- is that ok, or is it high enough to discuss sooner?

I think that's fine, but it would be good if DST could chat about it beforehand? Maybe it's something we can resolve asynchronously?

CCiufo-WMF claimed this task.
CCiufo-WMF moved this task from Backlog to Up Next on the Design-System-Team board.

Yes we can discuss it ahead of time.

oops, too many actions at once.

Do we really want to keep using/recommending this pattern in Codex? We were talking last week about starting to use the new <details> element more widely (and possibly adjusting our browser support requirements for basic support).

I would love to be able to leave such hacks behind in favor of clean, declarative, modern web standards.

CCiufo-WMF renamed this task from Button: Support the "checkbox hack" to Button: Consider supporting the "checkbox hack".Jan 22 2024, 6:34 PM

Change 997594 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] POC: Express dropdowns as details/summary elements

https://gerrit.wikimedia.org/r/997594

It's a good question. It looks like this would be straightforward so it would be a product call - these menus are important and we'd need to think carefully about how they degrade in older browsers (it might be better to make them disappear rather than to make them always show for example).

Support looks pretty good based on who we tend to build for: https://caniuse.com/?search=details

CCiufo-WMF changed the task status from Open to Stalled.Mar 7 2024, 8:40 PM

This is stalled pending dropping IE 11 from Basic Support

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/a50d75d75f/w

Jdlrobson renamed this task from Button: Consider supporting the "checkbox hack" to Vector 2022 should drop support for checkbox hack (IE11) for better accessibility.Fri, Apr 26, 12:02 AM
Jdlrobson updated the task description. (Show Details)