Roadmap to stabilize Claro

Adding #3080100: Assess accessibility of Claro in High Contrast AKA forced colors mode. Some problems found described there already.

Thanks @Andrewmacpherson!

Added #3082672: Form prefix/suffix redesign in Claro
#3082685: Action links on admin/appearance
#3082688: Excess space between details summary and details content does not match design.
#3082691: Excess space on tables with action links and "show row weights" toggle. Does not match design. to stable must-haves.

Added #3082694: Extra space between message and content when content has elements with margin-top to should-haves.

Updating the issue statuses.

Adding #3084069: Allow marking themes as experimental to the must-have list.

Tagging for FM and RM review once this is all filled out. (I believe @webchick indicated that the product team has already identified their must-haves above.)

One thing that's a must-have for me is that the roadmap include a longterm plan to deprecate and remove Seven. So, there should be a post-stable section that includes stuff like:

• Testing Claro for a minor or so once it's stable.
• Resolving should-haves that weren't resolved before stable, as well as major and critical bugs that come up in real-world testing.
• Any changes needed in core for Claro to be the default experience. (There are things like the Settings Tray, LB, etc. that are designed for Seven, and probably various other expectations.)
• Making Claro the default admin theme in Standard for new installs.
• A should-have/meta to gradually update screenshots to use Claro instead of Seven.
• Deprecating Seven for removal to contrib in D10.

The roadmap should also include any specific bugs, tasks, etc. that would be needed in terms of architecture, documentation, whatever to make Claro a Seven replacement.

Finally, the roadmap also needs an issue to decouple Claro from Classy, since that's a D9 must-have for our longterm theme architecture plans.

Document for theme regions in claro as compared to seven's. #3084388: Document for theme regions in claro as compared to seven's found this in one of the discussion in Add Claro administration theme to core. So created a issue for same. I am putting this as could be for stable release. Please edit if required.

I am addressing one of the issue #3080994: Spacing in Claro pushes content down, requiring much scrolling discussed in #3079738: Add Claro administration theme to core commments. which is not mentioned in road map

Addressing one more issue #2958282: Links inside surrounding text fail WCAG Use-of-Color as per comments in #3079738: Add Claro administration theme to core. Marking as Could-have issues for stable release

Moving #2958282: Links inside surrounding text fail WCAG Use-of-Color to must-have for stable release, because it relates to WCAG level A.

#19: A post-stable section is a good idea. For accessibility triage, it gives us some extra breathing space for high-impact should-haves.

@andrewmacpherson #24 thanks for moving the issue for correct release.

#3005403 also affects Claro. That's an example of an issue present in Seven that we should also add as a stable blocker for Claro, because it's borderline-critical (it'd be critical if LB were in Standard, for example). Addressing this issue in Claro Roadmap in must have stable release.

I think we should add at least some minimal test coverage to the must-have list. Even if it's just a single test function similar to what we have for BartikTest and ClassyTest. Or maybe a subclass of InstallUninstallTest that executes all of the same stuff but with Claro as the Admin theme.

An example of something a test like that would catch is that currently, claro.settings.yml includes a shortcut setting, but Claro does not have a dependency on shortcut module, so that's something that should fail config validation when shortcut isn't enabled.

Unfortunately, I don't think there's a way to easily test config validity outside of running a test. #2414951: Validate configuration schema before importing configuration is an issue to perform validation during import (in the UI, not only during tests), but that's not in core yet, and the latest patch on that issue isn't working correctly. But if we have an automated test, then that should catch it, since we automatically perform config validation during test runs.

Starting to add a list of things that we ought to review before marking Claro as beta stage. What I'd like to see is a more detailed level of review. We can spin off child issues to capture the reviews, and I'll clarify the WCAG aspects, and offer testing advice.

Chatted with @lauriii about this, and a lot of it can be done on screen shot evidence. For things like zoom, reflow, text resize, and text spacing.

For screenshots evidence, it will be a good idea to include browser UI, so we see things like evidence of browser zoom level.

More to come, will flesh out in the next few days.

#3057772: Ambiguous icons for collapsing/expanding menu items is already listed as a usability must-have.

It's also arguably an accessibility failure of WCAG success criterion 3.2.4 Consistent Identification (level AA). Explained in a comment on that issue.

Per #3079738: Add Claro administration theme to core comments #61 through #63, listing the accessibility testing issues as should-haves for beta, but re-listing them as must-haves for stable also. So the only must-haves are the minimum requirements for core inclusion, the MVP feature-set, and one bug that has been flagged as critical.

Thanks!

Oops, copied a couple issues too many.

Status summary:

• One last remaining blocker for Claro beta-1 release is being worked on by Zoltan, expected completion is EO this week: #3021092: Image field style update
• Claro Roadmap is updated based on review of issue queue
• 8.8.0-Alpha1 framework reviews are nearly complete
• Requirements for 8.8.0-Beta1 still need clarification

Risks related to the 8.8 release:

• We need clarity on Beta requirements and any work required to meet them asap or this won't get into the 8.8 release, see this issue for details: #3079738 comment #69

Next steps:

All dates are asipriational!

• Tag Claro Beta-1 when the last blocking issue is resolved (hopefully eo this week or early next week)
• Clarification on requirements for 8.8.0-Beta1, additional reviews and associated work (see #3079738 comment #69 for details)

Requirements for 8.8.0-Beta1 still need clarification

Again, what is unclear? I feel like the beta requirements are very clearly fleshed out in the IS here, and the release managers have already given feedback on what we need for Claro to be included in a tagged release.

Last night @webchick reluctantly agreed with me that under experimental policy, #3067386: AJAX rebuild of Views UI form re-renders parts of the form without using Form API, so additional hooks are needed in lieu of hook_form_view_edit_form_alter() could be committed during the theme's alpha phase, since the Views UI not being terrible could be considered part of the MVP and there's no specific requirements for horrible bugs to be fixed before alpha unless they affect security, data integrity, or the upgrade path. However, @webchick indicated that we would strongly prefer it be done before the theme is committed as an alpha module, because it will interfere with testing of the theme.

So based on that, we agreed to make it a should-have for alpha instead of a must-have, but it's still must-have before beta. The IS is accurate already since it lists the beta requirements, not the alpha require,ents.

That said, again, this issue is a priority to fix sooner rather than later compared to the other beta requirements, and having it in before 8.8.0-alpha1 would be ideal.

Adding #3087189: Resolve or work around claro.settings.yml implicit dependency on Shortcut to the must-have list, because it's a potential data integrity issue.

Fleshed out a manual test plan for #3087225: [META] Assess Claro's conformance with WCAG Text spacing, Text resize, and Reflow.. More to follow for the Resize text and Reflow criteria.

Re. #45
For these WCAG resize/adaptation robustness criteria, I'm attempting to find achievable approaches for a first-pass survey prior to beta.

A good beta-stage assessment for these would be full-page captures from the Styleguide and Error style modules with a variety of browser/OS settings, or CSS bookmarklets applied.

Those can give us a good overview, before making a more detailed assessment prior to stable. We can approach the various layout and colour adaptation (high contrast) surveys this way.

Untagging as per #3079738-80: Add Claro administration theme to core comments #80 and #81. The roadmap is really clear. Be sure to keep adding new issues that are identified to it (e.g. the JavaScript should-haves that were identified by @justafish).

We'll re-review the roadmap when we're targeting a stable release.

The roadmap in the IS looks great to me, and I agree that Claro is ready to be considered beta once #3067386: AJAX rebuild of Views UI form re-renders parts of the form without using Form API, so additional hooks are needed in lieu of hook_form_view_edit_form_alter() and #3067085: Views top dropbutton breaks when editing a view are complete.

All the beta must-haves are done, so #3088437: Cherry pick Claro to Drupal 8.8.!!!

Update on some of the accessibility reviews which were marked should-have for beta.

• #3087225: [META] Assess Claro's conformance with WCAG Text spacing, Text resize, and Reflow.. Good progress on this one! Screenshot coverage from the Styleguide and Errorstyle modules shows a good baseline for generic components. For stable assessment, we have a list of special pages which warrant a further survey. As a bonus, we found a good workflow with JS bookmarklets to stress-test the spacing.
• WCAG SC 1.4.4 "Resize text" and SC 1.4.10 "Reflow". I didn't get around to filing child issues for these, however we tested "Text spacing" at a variety of zoom and breakpoint scenarios. Some screenshots captured in #3087725: Fatal error on submitting a new message can also serve as a survey of "Resize text" and "Reflow". Since a workflow has emerged for this, I think it's going to be better to survey all 3 criteria in one issue.
• #3080100: Assess accessibility of Claro in High Contrast AKA forced colors mode. Not much extra review has been done yet. However the main issue of robust icons has had some experimentation in an issue of it's own. So that's encouraging.

Updatin the accessibility issues for stable. Moving remaining accessibility issues from beta.

QQ, don't know if this is the right issue to ask in—is 'dark mode support' something that's considered for the path to stability—or is that a feature addition that might be considered later? And in either case, is there an existing issue for dark mode support in Claro or not? My Drupal sites are one of a few places where things are nice and dark normally, but go to edit a page and wham-o, I get hit with a glaring bright white screen.

@geerlingguy something to consider for the future. We already did some exploration on the design side of things for a dark mode but it's still far away from being implemented at this point.

@geerlingguy I too would love a dark mode and have the same experience lately.

@Ambient.Impact @geerlingguy a lot happened since my last comment. You can already get a Darkmode if you install the Gin Admin Theme - which is based on Claro.

@saschaeggi That's pretty awesome, thanks!

Adding dependee issues to some items in roadmap for better visibility.

Hi, I don't know if it is the right place, but there is an important bug in /admin/config/content/formats when you create a new format, for example Custom, the tabs of CKEditor plugin settings are all hidden with display none.

Note: this is shown if I put display visibility and in teroria there must be 6 tabs

Discussed #3127466: Required fields are not identifiable on Internet Explorer 11 high contrast with @rainbreaw today. We'd like to bump it to major/must-have, because indicating required fields is a WCAG level-A need. Detailed remarks in comment #14 there.

If the variable names in the css files can be considered an API, then probably #3155531: Naming convention of color shades in the Drupal Design System (e.g. for Claro) should be on this list as a stable blocker otherwise it might never get fixed once the project become stable.

Removing #3085219: Installer is not very usable in Claro from Must-haves for stable release. This is a must have for making Claro the default theme, but not a must have for a stable release.

Hi.
Please see this problem. https://www.drupal.org/project/claro/issues/3168242

Adding #3169014: Semantic regression: Claro treats tableDragToggle as a link instead of a button.

Hi problem with Paragraph and File Entity Browser display corrupt
https://imgur.com/a/xKNhtsD

@Nelo_Drup #3092181: Nested Paragraphs create multiple drag handles

I think #3070558: Implement bulk operation designs should be moved from must-have to could-have. Surely it won't be a disaster if the bulk operation controls are arranged the same way as they are with Seven.

The patch in that issue has caused a lot of accessibility problems. Proposed workarounds are elaborate (and sometimes bizarre), and I'm not convinced they're safe. I'm unwilling to rush this one.

#3171726: Claro Shortcuts star fails WCAG Use of Color and Non-text contrast is a WCAG level-A failure, and wasn't added to this roadmap yet.

#3171726: Claro Shortcuts star fails WCAG Use of Color and Non-text contrast is a WCAG level-A failure, and wasn't added to this roadmap yet.

Moved completed stable-must-haves to a Completed section.

Missed one.

Has anyone seen issues between Claro and the Simple hierarchical select Module? We've been experiencing a problem where the select fields disappear and cache has to be cleared to restore them.

Moving #3062751: Media and media library and #3061042: Status Report Page Update to Completed.

I'm also experiencing the bug reported over here: #3183425: [backport] Google Chrome 87 renders fieldset with grey artefacts

Is this something that should be added to the list of bugs in this issue?

Adding #3194669: Misuse of explicit colour for active pager item in -ms-high-contrast media query as a must-have, because it involves a WCAG level-A failure. It's easily fixed.

Parenting to easy out of the box :)

Adding Easy Out of the Box tag.

Rearranging issues so the Beta ones already done stay at the end.

Olá GALERA da comunidade DRUPAL, essa minha primeira interação com você!
Uma obervação não domino o idioma inglês vou google tradutor.

Gostaria de propor um link de atralho para a pagina de [novo tipo de conteúdo].
Dentro da pagina novo tipo de conteudo navegue até a [aba configurações do menu],
na imagem eu tentei ilustrar minha ideia, no titulo da lista de menus já existentes ao lado colocar ou criar um link de atalho para a pagina [../admin/structure/menu/add] coloquei o icone do lapis veja os prints para ilustrar.
Olivero 9.1.8 (Tema padrão, experimental theme)
Seven 9.1.8 (Tema padão seven)

Disponibilizo o link do meu figma:
https://www.figma.com/file/IgiaaWPcIiien0xoHDF0s9/Theme-Claro-end-Olivero

ENGLISH VERSION

Hello GUYS from the DRUPAL community, this is my first interaction with you!
An observation I do not master the English language I will google translator.

I would like to propose a link to the [new type of content] page.
Within the new content type page, navigate to the [menu settings tab],
in the image I tried to illustrate my idea, in the title of the list of existing menus next to place or create a shortcut link to the page [../admin/structure/menu/add] I put the pencil icon see the prints to illustrate .
Olivero 9.1.8 (Standard theme, experimental theme)
Seven 9.1.8 (Standard seven theme)

I provide the link of my figma:
https://www.figma.com/file/IgiaaWPcIiien0xoHDF0s9/Theme-Claro-end-Olivero

Welcome GuilhermePuentes! I like your idea of linking to menu settings page from the content type config page (although I can't seem to access the Figma link you included).

I think you should probably create a separate issue for this, because this would mean adding a feature/improvement to Claro.

You can also collaborate on UX improvements in the #UX channel on the Drupal Slack (https://www.drupal.org/join-slack).

Thanks for the @pixelite reception, I’m happy with your comment, I hope to contribute much more.
I will update the figma link for public beginner failure.

For your guidance on creating a new issue (create a separate issue) I have not yet learned how to create a new resource.

Regarding the slack group, I managed to get in. Thanks for sharing! See you soon!

Thanks for the @pixelite reception, I’m happy with your comment, I hope to contribute much more.
I will update the figma link for public beginner failure.

For your guidance on creating a new issue (create a separate issue) I have not yet learned how to create a new resource.

Regarding the slack group, I managed to get in. Thanks for sharing! See you soon!

Added bug that we almost have a working test for... #3177415: Vertical Tabs CSS classes applying to non-vertical tab detail element groups

Adding #3222995: Implement chips based autocomplete designs as a could have so it gets referenced.

Referencing #3251278: [META] Designs for dark background layers and its color palette as post-stable work.

Cleaning up summary from completed tasks.

Referencing #3254202: Remove IE11 Support from Claro as post-stable work.

We also ran out of time to triage the vertical tabs issues.

Not sure if this is the right place to say this, but we should consider descoping the the vertical tabs issues out of Claro so the the fixes can be used by all other themes (including contrib, and custom themes). There's no reason why the accessibility features and UX improvements should be Claro-only.

#3169014: Semantic regression: Claro treats tableDragToggle as a link instead of a button was closed in favour of #3083051: Refactor tabledrag when core issues are resolved which was fixed, so removing from issue summary.

Moving #3123811: Grey text in Claro theme failed accessibility and #3248239: Links in the tour tip body are visually the same as the rest of the text - Claro theme to Completed section.

Removing #3068696: Tables overflow on mobile as stable blocker.

Adding child a11y issues as must-have/stable blokers:

#3080100: Assess accessibility of Claro in High Contrast AKA forced colors mode

• #3171728: Claro Select form element needs Windows High Contrast mode improvements
• #3130305: Ensure all of Claro's background images are visible in forced colors mode.
• #3269341: Claro <details> element not rendering properly in forced colors
• #3271305: Claro's radio buttons and checkboxes are unusable in high-contrast / forced colors mode

Update fixed issues.

Moving the following to completed:

• #3130305: Ensure all of Claro's background images are visible in forced colors mode.
• #3269341: Claro <details> element not rendering properly in forced colors
• #3271305: Claro's radio buttons and checkboxes are unusable in high-contrast / forced colors mode

Remove some unneeded criteria for stable.

Updated roadmap with should-haves surfaced by the recently closed #3088562: [META] Assess Claro for WCAG colour contrast AA conformance

Removing #3081489: Remove duplicate code from veritcal-tabs.js in Claro and #3088562: [META] Assess Claro for WCAG colour contrast AA conformance from the stable criteria list since they're already fixed.

Also #3087225: [META] Assess Claro's conformance with WCAG Text spacing, Text resize, and Reflow..

Removing #3163810: [META] Assess conformance with WCAG SC 2.4.7 "Focus Visible". Just one more to go!

Last one #3080100: Assess accessibility of Claro in High Contrast AKA forced colors mode!! Not yet, I was too fast...

Let's continue in #3277053: Mark Claro as Stable.

Can this be closed now since Claro is stable?

Finally closing this issue because Claro became stable in #3277053: Mark Claro as Stable. Let's continue improving Claro on the issue queue. Thanks everybody involved by all your work!!

🙌🎉