[META] Make Olivero stable

Just tying up a loose end here @Lauriii's comment #215 in #3111409-215: Add new Olivero frontend theme to Drupal 9.1 core as beta.

I added #3117698: Allow PostCSS Plugin “Px to Rem” in core for Olivero theme to a beta blocker for now because of it's impact to accessibility. Alternative solution would be to convert the source to use rem values where applicable.

From an accessibility viewpoint I wouldn't have regarded that issue as a beta-blocker. The problem of resizing is well understood, and there are several paths to success. The PostCSS plugin itself is just a maintenance workflow detail.

Rather, the ability for the user to scale text using the browser/OS settings and controls is a must-have stable blocker. (Along with other items essential for understanding the content; such as icons, and focus outlines.) Adding a task to assess Olivero for WCAG Resize Text and Reflow success criteria.

#3117698: Allow PostCSS Plugin “Px to Rem” in core for Olivero theme wasn't copied to the IS here yet, so I've added it as a stable must-have technical debt. Revise that triage if needed.

New WCAG level-AA issue. #3177345: Powered by Drupal block fails WCAG contrast (minimum).

(bump to get the issue statuses updated)

The National Federation of the Blind (NFB) has returned their screen reader accessibility test results which you can watch in a video at http://t.ly/AMj8

Here is my summary of what the tester said in the video:

Karl first navigated to the contact form through the main navigation without any issue. Once he clicked the Contact menu item, he was able to reach the “Website feedback” heading, and tab into the form fields while being notified of each field’s label and whether or not it was required. He mentioned that both form buttons were nicely labeled. Overall he thinks that Oliver is a “very nice and accessible contact form and website” theme.

And here is a breakdown of what I heard in the video:

TESTED WITH
OS/Browser: NVDA 2020 Chrome
Tested: Contact Form

OVERALL RESULT

• Required form fields properly say “required"
• Keyboard tabbing works as expected
• Buttons nicely labelled
• Alert read aloud properly
• Headings used well
• Content is good

Added #3117698: Allow PostCSS Plugin “Px to Rem” in core for Olivero theme to the stable blockers.

- #3117698: Allow PostCSS Plugin “Px to Rem” in core for Olivero theme was listed twice
- Removing #3172957: Olivero: Media library within Layout Builder modal is unstyled, as that was thrown over the wall to the media team.
- Moving #3153260: Standardize Olivero's focus states across all non-form controls to stable blocker (pretty sure it should have been here all along).

Adding #3156207: [META] Olivero Coding standards review and fix - CSS files

Removing the following as they're covered in the issue above:

• #3173007: [Code Review] Provide a BEM methodology to comments.pcss.css partial
• #3173008: [Code Review] wide image within article template a reusable component/class
• #3173010: Class clean up and add #0c0d0e and #171e23 as variables in Olivero's footer.pcss.css
• #3173012: Olivero header-search-wide.pcss.css and header-search-narrow.pcss.css adjustments
• #3173014: Address code feedback for Olivero's header.pcss.css partials
• #3173016: Address code feedback for Olivero's node.pcss.css partials
• #3173018: [Code Review] Remove .form-type as this prefix block element doesn't exist
• #3173022: Figure out a clean way to manage the style of Olivero's menu block in the sidebar region
• #3173019: [Code Review] Remove padding from .vertical-tabs__menu element

Adding #3177918: Holistically refactor use of Olivero's z-index rules to play nice with Core

Removing #3158585: z-index issue when using webform wizard pages

Just modified the "Design/Usability improvements" section to include some issues that came out from our first round of feedback from the design team.

Add #3182242: [Olivero Theme]: Theme 404 "Page not found" and 403 "Forbidden/Access denied" pages to the "Design/Usability improvements" section.

Adding

• #3182134: Resolve Olivero config differences after install
• #3182711: Help block is placed into help region, but that doesn’t exist

Added a new must-have accessibility bug - #3191077: Olivero narrow/mobile menu constrains tabbing in one direction only.

Note this might overlap with #3190242: Nav should use core/drupal.tabbingmanager instead of custom focus manager. However that's a task (not a bug), and non-urgent.

I've triaged the child issues at #3177260: [META] Accessibility of Olivero header/menu region and put them in the stable must/should sections here.

Can somebody explain what the "post-stable" stage means, and whether these need to be done before using Olivero as the default theme for Standard profile. Previous experience tells me this is where the must/should horse-trading happens :-)

Add #3191692: Have secondary menus close on blur to the stable blocker roadmap.

Adding #3191725: Ensure that tabledrag user interface is usable within Olivero as stable blocker.

Demoting #3191680: Figure out focus state for search form in Olivero from must-have to should-have. The current focus style satisfies WCAG; it just doesn't match the others proposed in #3153260: Standardize Olivero's focus states across all non-form controls.

Adding #3193364: Menu Link Attributes contrib module does not work with Olivero theme

Added #3194350: Implement new form element designs for Olivero

Removing #3193364: Menu Link Attributes contrib module does not work with Olivero theme

Just filed #3194718: Plan for Olivero theme regions and landmark regions.

I've put it in here as a stable must-have, but I'm somewhat flexible on that. It's a golden opportunity to dial down Drupal's over-use of ARIA landmark regions. There's a bit of an art to arranging landmark regions well, but achieving a sensible baseline in a template-driven CMS is compromise-laden PITA. It needs a plan, and currently it's a bit open-ended.

So triage-wise, I'd say we MUST have some idea of where we're going with it before marking Olivero as stable; but exact implementation could perhaps wait until the Standard profile milestone.

As I noted in #3155358: [policy, no patch] Drop IE11 support from Drupal 10.0.x, Olivero may need to retain IE11 workarounds in Drupal 9 even if Drupal 10 drops support for IE11. What is the current status of IE11 support for the theme?

What is the current status of IE11 support for the theme?

We currently fully support IE11 (with some known bugs).

Olivero may need to retain IE11 workarounds in Drupal 9 even if Drupal 10 drops support for IE11.

This is a topic for another discussion, but I'm wondering why. Drupal 10 core (of which Olivero is a part) is a major version, and should be able to break backwards compatibility.

Edit: I think i understand. As long as the D10 version can drop support, we'll be fine. I expect D9 to support IE11 for forever.

Adding #3191716: Opening desktop dropdown menu using pointer device requires two taps/clicks

Updating issue statuses

Adding #3191806: Only close Olivero sub-menus when resize results in a different menu format as a should-have, and #3192903: Mouseout event should not close navigation sub-menu if focus is inside the sub-menu a stable blocker, so I can close #3177260: [META] Accessibility of Olivero header/menu region

Adding some issues from #3173898: [meta] Olivero JavaScript coding standards fixes, so we can close that as outdated.

• #3191806: Only close Olivero sub-menus when resize results in a different menu format
• #3208372: Olivero: Refactor comments.es6.js

Moving in the following issues from #3156207: [META] Olivero Coding standards review and fix - CSS files

• #3173008: [Code Review] wide image within article template a reusable component/class
• #3173010: Class clean up and add #0c0d0e and #171e23 as variables in Olivero's footer.pcss.css
• #3173012: Olivero header-search-wide.pcss.css and header-search-narrow.pcss.css adjustments
• #3173016: Address code feedback for Olivero's node.pcss.css partials
• #3173022: Figure out a clean way to manage the style of Olivero's menu block in the sidebar region
• #3182200: Follow proper BEM syntax within secondary navigation menu
• #3196874: BEMifying Olivero's book pager

Replacing #3194718: Plan for Olivero theme regions and landmark regions with #3210199: Olivero: Adjustments to landmark regions

Removing #3129257: Olivero: Mobile tabs can become out of order if browser is resized as a stable blocker per the accessibility and UX teams.

See the note in the issue.

Added #3210443: Olivero: Focus after submenu close via ESC key (sorry!, should be simple to fix?)

adding #3153234: [Meta] Olivero JavaScript should be selecting [data-drupal-selector] attributes where possible

Updating issue statuses

Updating issue statuses

From @zenimagine:

Hi, thank you for this great theme. I currently have a Bootstrap theme and it's chaos with all the bootstrap themes that are created for Drupal. I would like to replace my current theme with Olivero and I would like to know what I risk if I use the Olivero theme on a production site? Thank you

Olivero is still labelled an experimental theme, but in my opinion is a pretty stable choice. That said, if you're currently using a theme that you've customized at all, you'll need to put some work in to moving your blocks back where you want them.

In the future, be sure to put comments in the comment box and to not replace the issue summary/description.

@andy-blum This is for a new site on Drupal 9.1

Has anyone managed to change the colors from the interface? I am not going to subtopic when I browse the code.

Yes sorry, I didn't care.

I have a question regarding the documentation of the Olivero theme.

With Bootstrap there is a documentation with the "class" to apply colors, font size, margins, ...

https://getbootstrap.com/docs/5.0/content/typography/

Is there a documentation for Olivero with the details of the different "class"?

Thank you

Bootstrap is a front-end framework, meaning it's built with the intention of you customizing it. The drupal bootstrap theme, is just a drupal implementation of that, and is designed to be sub-themed

Olivero is just a theme. It's much more locked-in. You can certainly still sub-theme it, but it does not have all the utility classes that bootstrap would.

@andy-blum Olivero is still in its infancy.

When I look at the possibilities on this site, it looks more and more like a highly customizable theme, much like Bootstrap, but much better integrated with Drupal :

https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/

I think a lot of contrib modules will add functionality to this theme.

Where can I find the class details ?

Where can I find the class details ?

@zenimagine At some point I want to add tailwind-esque CSS classes. However the current focus is to resolve the issues above to make this theme stable and the default. Feel free to create an issue though.

Has anyone managed to change the colors from the interface? I am not going to subtopic when I browse the code.

As far as changing colors, this likely won't happen until Drupal 10. See #3086514: Investigate use of the changing color themes for Olivero

In the meantime, lets move any off-topic discussion into other issues.

@mherchel OK, thanks. I found the link below to create a subtopic. I will test to modify the colors:

https://github.com/mherchel/olivero-subtheme

@zenimagine you can also move olivero-related discussions to the #d9-theme slack channel

The slack channel has been renamed to #olivero

The stable version is planned for Drupal 9.2 or 9.3 ?

• Removing the Olivero “Post-stable” criteria section from the summary
• Re-titling Should-have issues for stable release: to Should-have issues for stable release / default theme:

@Gábor Hojtsy What is the version of the Olivero theme on Drupal 9.1 ? Because I use it.

I will update Drupal 9.1 to Drupal 9.2

Should I desinstall Olivero theme and reinstall it ? Where can I update without risking the theme ?

I did not create under theme, I simply added blocks and change the configuration.

@zenimagine This issue thread is only to document the issues to make Olivero stable. Please open up a separate issue for your support request (or ask in the #olivero channel in Drupal slack).

Splitting off the work to make Olivero the default theme to #3219958: [META] Make Olivero the default theme

Updating issue statuses

Started splitting issues in the issue summary into todo and done sections so it's a bit easier to see what's remaining.

Shouldn't #3190262 be in a "done" section as it hasn't been committed yet? Or are you consider it "done" when it has been worked on and has reached RTBC?

Removing #3177260: [META] Accessibility of Olivero header/menu region, as there's only one active issue within it (which is classified as a "should have"), which is also listed directly within the should-haves within this issue.

Moving items into the done group :D

Moving #3212975: Olivero: Normalize JavaScript selectors in messages.es6.js directly into the summary and closing out #3153234: [Meta] Olivero JavaScript should be selecting [data-drupal-selector] attributes where possible

Moving #3173832: Ensure Olivero's JS documentation matches standards to done

Adding #3225188: Olivero: Ensure proper visual hierarchy between headings as a should have

Adding #3224750: Figure out how to handle views grid in Olivero as related

Adding #3227427: Olivero: <summary> focus state is invisible in Windows high contrast as a stable blocker.

Adding the following issues to should have

Accessibility

• #3227431: Tabledrag icon doesn't adapt to forced-colors mode
• #3227429: Olivero: Autocomplete icon doesn't have proper contrast in high contrast mode
• #3223271: Olivero: Select dropdown icons need more contrast in Windows High Contrast mode
• #3223332: Olivero primary search button should be initialized with aria-expanded="false" by JS
• #3223281: Olivero: Primary nav search icon invisible in forced-colors mode in MS Edge
• #3226785: Olivero: Wide search form should close on blur

Design

• #3226704: Olivero's top-level primary menu's hover states are not correct
• #3212120: Blockquote's content font size should be decreased when it is placed into the sidebar in the Olivero theme.
• #3194560: Style maintenance page for Olivero

Bugs

• #3214191: Olivero: Header obscures jQueryUI overlay
• #3221871: Olivero: Mobile menu prevents scroll & obscures page after click if menu item contains link to anchor on same page
• #3225241: Olivero primary menu JS completely breaks if site-builder specifies over 2 levels deep
• #3224958: Olivero should style Views exposed filters as inline (currently are stacked)
• #3223264: Olivero: Messages can be malformed when JS creates messages and PHP messages already exist

Features

• #3217924: Olivero: Convert all colors (blues and grays) to HSL and normalize hues and saturations.

Bumping #3223332: Olivero primary search button should be initialized with aria-expanded="false" by JS to must-have, because it pertains to WCAG level-A.

Adding #3228140: Remove misleading "toggle" phrase from Olivero's main-menu disclosure button. A quick win, not a blocker.

Bumping #3223281: Olivero: Primary nav search icon invisible in forced-colors mode in MS Edge to must-have.

While the icon is invisible in forced colours mode, a user will not know what the purpose of the button is, and may not know that a button is there at all (depending on what specific colour scheme they have chosen) because it doesn't have a visible border or text.

Adding #3228145: Remove misleading "toggle" phrase from Olivero's wide search form disclosure button as a should-have.

We committed 7 issues today including 3 stable blockers. Made a lot of progress on many other issues, too.

Updating summary to reflect current status.

Moving #3191682: Ensure that Olivero's focus states are visible and accessible in Windows High Contrast mode and #3225188: Olivero: Ensure proper visual hierarchy between headings to done.

Adding #3228938: Olivero: Ensure long words break properly when zoomed in to provide proper reflow as an accessibility stable blocker.

Replacing duplicate issue #3228938: Olivero: Ensure long words break properly when zoomed in to provide proper reflow with #3177475: Olivero: Ensure long words break properly when zoomed in to provide proper reflow

Descoping #3177475: Olivero: Ensure long words break properly when zoomed in to provide proper reflow as an accessibility stable blocker per accessibility maintainers in comment 96

Moving #3190262: [META] Assess Olivero for WCAG Resize Text and Reflow success criteria. to done, and adding #3229094: Olivero: Titles should wrap around images in teaser when necessary as a stable blocker.

Adding #3190537: Mobile search input on tablet width in IE11 does not visually respond to keypress as a stable blocker.

Re-saving to update issue statuses.

So just to check, are we down to two stable blockers (#3223281: Olivero: Primary nav search icon invisible in forced-colors mode in MS Edge and #3173877: [meta] QA testing of Olivero across multiple browsers)?

Moving fixed issues to done sections.

So just to check, are we down to two stable blockers

Just seeing this comment now, but yes.

Last stable blocker committed! Moving around issues into "done" sections :D

Adding #3243041: Mark Olivero stable to a new "git r dun" section :D

Just to say from a release management perspective I'm happy to see Olivero marked stable as soon as the last blocker here is done.

It looks like things are in good shape for #3219958: [META] Make Olivero the default theme too given most of the 'should haves' here are either done or in progress too, but it could probably use another once over the Olivero queue for anything that's escaped the meta-issue, and anything that comes out of cross-browser testing that might not be stable blocking but might be default blocking - so I've tagged that issue for the various sign-offs.

I think we might need to fix #3244621: Olivero: JS error when secondary tabs are present before marking it stable. A JS error when secondary tabs are present seems pretty significant.

@lauriii agrees - added to the issue summary.

#3244621: Olivero: JS error when secondary tabs are present is fixed.

With #3219958: [META] Make Olivero the default theme there's been significant cross-browser testing, both informally and now formally as part of that issue. I think the last remaining couple of browsers could be default rather than stable blocking - testing so far has caught some blocking and non blocking issues, showing that it was done quite comprehensively.

Adding issue credit for everyone who helped develop and refine this roadmap. We can mark this fixed now that #3243041: Mark Olivero stable is in.

The next work is happening in #3219958: [META] Make Olivero the default theme.

Thanks everyone!