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 and the language button in Vector 2022. Here's an example from Vector:
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:
To avoid this we should hide these menus given the requirements like so:
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