Readers/Web/Dev notes/Codex buttons in Minerva

Challenges

During the effort to implement Codex button and icons in mobile, Jon and Bernard discussed different ways to implement icon only buttons in Minerva. Because Codex doesn't yet support icon only buttons with text (they recommend using `aria-label` instead), we needed to add CSS to visually hide the text. Because these Codex buttons are used across different skins/extensions, currently there is duplicate CSS in multiple codebases (Vector, Popups, Minerva) handling this.

Minerva also has the additional use case of `mw-ui-icon-with-label-desktop` in the page actions buttons, where the label is shown on larger viewports, but the button is icon only on smaller viewports. Jon and Bernard came up with different approaches to handling this behavior with the Codex icon only button classes, which are recorded below. Ultimately they agreed to go with Jon's solution 1 for the sake of getting the work completed, but the discussion is recorded here for future reference.

Solution 1 - Treat `mw-ui-icon-with-label-desktop` behavior as an inconsistency with how different skins handle icon only buttons

Apply the `mw-ui-icon-with-label-desktop` behavior to all icon only buttons by default in Minerva, and manually override this behavior for all other instances of icon buttons in Minerva and MobileFrontend via a specific selectors (see here). Jon's intention with this approach is to later unify the inconsistencies between Vector and Minerva's handling of these buttons by later upstreaming the `mw-ui-icon-with-label-desktop` behavior to Codex and also applying it to Vector.

Per Jon: "I think it’s better for skins to decide how to display these holistically given there is currently an inconsistency between Minerva and Vector in that Minerva displays labels in addition to buttons where space allows. In future we should seek to apply rules consistently across the 2 skins and upstream the rules in Minerva and Vector into Codex. There could be benefits in applying the Minerva approach to Vector 2022 given the complaints from some editors around “mystery meat navigation”"

Solution 2 - Treat `mw-ui-icon-with-label-desktop` as a separate button case

Treat the `mw-ui-icon-with-label-desktop` behavior in Minerva as an exception and as a separate case from the Codex icon only buttons. This approach applies CSS to hides the text inside all icon only buttons across all skins/extensions, under the assumption that the styles are safe to apply globally and will be upstreamed in T342910 because "icon only" means that text should always be hidden. The `mw-ui-icon-with-label-desktop` behavior in Minerva would then be upstreamed to Codex at a later date as a separate use case, similar to how "responsive" button styles are being considered in Codex with a separate prop.