Focus styles should meet accessibility guidelines in Umami theme

marked it major, I think this is a must-have

Contact form:
----------------
The borders around the buttons are thick, but the borders on the text inputs only get a colour change. These would be clearer with a thick border, as the flashing caret isn't a prominent style.

Header search box:
-------------------------------------
The search box has an unusual focus style. I like the way the focus goes around the whole component (text input + submit button), then seems to "narrow down" to the submit button - that's pretty cool.

Two things that I don't like about it though:
1. When focus is on the text input, it uses a red colour, but around the submit button it's green. I don't understand that - it seems to sugest that red and green have different meanings, and nothing else uses a red focus outline.
2. When focus is on the text input, an existing border changes colour (grey to red) but stays the same thickness. When focus moves to the submit button, the border thickness changes.

How about making the text input focus style a thick green border? That would avoid any confusion about the meaning of red outline vs green outline, and make it convey focus better by shape instead of colour.
So we'd have:
search textbox focus => thick green border around entire component, textbox + button
search submit button focus => thick green border around button only

Banner block, pink button-style link:
----------------------------------
The focus style for this is a bit weak. The dotted outline is lost a bit with the background image. The underline is used, but is a bit out of place; we've made a link into a big rectangle, but the focus style isn't rectangular. Compare with real buttons.
Suggestion: outline: 2px solid currentColour; outline-offset: -2px; will bring the outline INSIDE the button where it will stand out more. We know it passes 4.5:1 contrast ratio against the pink.

Main menu:
-----------
When focused, link text becomes #ff6138-on-white. with contrast ratio 3:1. This is in the special exception range for large scale text, but the text isn't large scale. Computed size is only 20.25px, regular 400 weight. Large-scale text needs to be bold or 24px.

WCAG 2.0 only says focus should be visible, doesn't really offer any advice about making it clear. WCAG 2.1 brings in level AA "graphics contrast" to tighten this up. Normally I'd say level AA means a normal priority issue, but clear focus styles have a HUGE impact for users who need them, so I'd call this one major.

Not sure whether to call this a beta blocker. It would be good to address this while the original design team are still active on the theme, rather than retro-fit them later.

Cool. great progress. Can we get screenshots of them all?

Re: #9 - I'm inclined to say this is NOT an umami beta blocker for the current window of opportunity for an 8.5.x backport, because...

1. Focus styles have a huge impact for some users, and that counts as major if you're looking at it as a big plan. But as we get more clear focus styles, the issue shifts to looking for GAPS in our coverage. That's a good time to start using follow-ups for specific components.
2. WCAG 2.1 has just reached Candidate Recommendation, on schedule. They're aiming for a final Recommendation in the summer, so 8.6.0 is an excellent target for follow-up issues to give us really good focus style coverage.
3. The OOTB team are making great progress with a11y issues in general, especially on ones that have a smaller scope. Several contributions by first-time a11y contributors :-)
4. (Update) Plus, the focus styles already in Umami are way more clear and consistent than Bartik and Seven ;-)

Screenshots, screenshots, screenshots!

Also, it would be good have a list of focus styles we might want to improve in follow-ups:

• Unusual, one-of-a-kind focus styles - should we keep them as nice quirks, or harmonise them like #11 does with the search box? Either way, so longs as they are clear....
• Focus styles that just don't look as smart as the rest
• Focus styles which aren't as clear as the rest, e.g. the main menu links turinng 3:1 orange
• Focus styles that look great in some browsers but not in others. Default focus styles vary between browsers.

If I get time I'll have a go at such a list, but anyone can start it.

About screenshots for focus styles....

The default focus styles vary considerably between browsers, and fall into two camps:
1. The WebKit/Blink "blue ring"
2. The 1px dotted outline of IE/Firefox.

It's a good idea to look at a browser from both of these groups when doing screenshots.

Some elements to appraise and gets screenshots for. Helps to decide which ones we're saying are done, versus needing a follow-up.

• pink-button link from banner
• mobile search link
• mobile menu button
• links in paragraph text
• links in the tile teaser view mode
• footer links
• logo home link
• skip-to-main content when visible
• main menu links at desktop
• main menu links inside an open mobile menu
• textbox
• text area
• form buttons
• user menu links

Thanks Mark, I'll take the focus styles patch for a manual spin soon.

On the whole I'm not keen on having treating links vs buttons/inpouts differently, where we have appearing-dissappearing underlines for links but 4-sides outline for buttons/inputs. The default browser focus styles differ a lot, but they all agree on having some kind of 4-sides outline for everything.

These screenshots are about identifying follow-ups though, rather than go/no-go

Should technically count as a bug - missing focus styles would be a failure of WCAG 2.4.7 Focus Visible at level AA.

Text boxes and buttons are RTBC worthy. Likewise the mobile menu button and desktop search box.

The underline cam be removed from the banner button now that is has an outline, do that here as a quick win for RTBC here.

The mobile search icon focus style is a bit of a pale background too. Use an outline like the menu button for RTBC here.

Follow-ups:

The main menu links are poor. The underline is a bit pale looking. What contrast is that? Also the focus style is only distinguished from the current page by colour alone. That's a level A failure so make it a major follow-up.

I think links which get underline on focus is a weak style. Let's have follow-up issues for improving these, with an outline style. (I'd like to follow that up in Bartik and Seven too in good time.)

Underlines are best for indicating the presence of a link at all, in their resting style, especially inside sentences. The footer links would be better with an underline to distinguish them from nearby text, so they'll need an outline focus style.

The coloured background of link focus in a sentence is a bit weak, and will not survive in Windows high contrast mode. An outline is preferable. outline-offset:1px can make it look a bit less crowded.

Screenshots in #21 are good - RTBC worthy, covers all the things #20 says to fix in this issue.

Follow-up issues are files correctly.

Patch in #21 is needs a re-roll because it has lots of unrelated changes...
- stuff outside demo_umami profile folder - mostly content_moderation and migrate modules, and an installer file.
- some changes of Umami profile installation config, and installation helper classes.
- a renamed image in umami demo content
- umami test classes
- umami twig files - relevant here?

details....

andrew@quinx:~/local-websites/docksal-projects/umami/docroot$ git status
On branch 8.6.x
Your branch is up-to-date with 'origin/8.6.x'.

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        modified:   core/lib/Drupal/Core/Installer/Form/SelectProfileForm.php
        modified:   core/modules/content_moderation/content_moderation.module
        deleted:    core/modules/content_moderation/content_moderation.post_update.php
        modified:   core/modules/content_moderation/src/Entity/ContentModerationState.php
        modified:   core/modules/content_moderation/src/Entity/Handler/ModerationHandler.php
        modified:   core/modules/content_moderation/src/EntityOperations.php
        modified:   core/modules/content_moderation/src/EntityTypeInfo.php
        modified:   core/modules/content_moderation/src/Form/EntityModerationForm.php
        modified:   core/modules/content_moderation/src/ModerationInformation.php
        modified:   core/modules/content_moderation/src/ModerationInformationInterface.php
        modified:   core/modules/content_moderation/src/Plugin/Field/ModerationStateFieldItemList.php
        modified:   core/modules/content_moderation/src/Plugin/views/filter/ModerationStateFilter.php
        deleted:    core/modules/content_moderation/tests/fixtures/update/drupal-8.4.0-content_moderation_installed.php
        deleted:    core/modules/content_moderation/tests/fixtures/update/drupal-8.default-cms-entity-id-2941736.php
        deleted:    core/modules/content_moderation/tests/src/Functional/DefaultContentModerationStateRevisionUpdateTest.php
        modified:   core/modules/content_moderation/tests/src/Functional/ModerationFormTest.php
        modified:   core/modules/content_moderation/tests/src/Functional/ModerationLocaleTest.php
        modified:   core/modules/content_moderation/tests/src/Kernel/ContentModerationStateTest.php
        modified:   core/modules/content_moderation/tests/src/Kernel/ViewsDataIntegrationTest.php
        modified:   core/modules/content_moderation/tests/src/Kernel/ViewsModerationStateFilterTest.php
        modified:   core/modules/content_translation/src/ContentTranslationManager.php
        modified:   core/modules/content_translation/src/Controller/ContentTranslationController.php
        modified:   core/modules/content_translation/src/Routing/ContentTranslationRouteSubscriber.php
        renamed:    core/modules/migrate/tests/modules/migrate_external_translated_test/migrations/external_translated_test_node.yml -> core/modules/migrate/tests/modules/migrate_external_translated_test/migrations/migrate.migration.external_translated_test_node.yml
        renamed:    core/modules/migrate/tests/modules/migrate_external_translated_test/migrations/external_translated_test_node_translation.yml -> core/modules/migrate/tests/modules/migrate_external_translated_test/migrations/migrate.migration.external_translated_test_node_translation.yml
        renamed:    core/modules/migrate/tests/modules/migrate_high_water_test/migrations/high_water_test.yml -> core/modules/migrate/tests/modules/migrate_high_water_test/migrations/migrate.migration.high_water_test.yml
        modified:   core/modules/migrate_drupal/tests/fixtures/drupal6.php
        modified:   core/modules/migrate_drupal_ui/src/Form/MigrateUpgradeForm.php
        modified:   core/modules/path/migrations/d6_url_alias.yml
        modified:   core/modules/path/tests/src/Kernel/Migrate/d6/MigrateUrlAliasTest.php
        modified:   core/profiles/demo_umami/config/install/core.entity_form_display.block_content.footer_promo_block.default.yml
        modified:   core/profiles/demo_umami/config/install/core.entity_view_display.block_content.footer_promo_block.default.yml
        deleted:    core/profiles/demo_umami/config/install/field.field.block_content.footer_promo_block.field_promo_image.yml
        deleted:    core/profiles/demo_umami/config/install/field.storage.block_content.field_promo_image.yml
        deleted:    core/profiles/demo_umami/config/install/image.style.medium_8_7.yml
        modified:   core/profiles/demo_umami/demo_umami.info.yml
        modified:   core/profiles/demo_umami/modules/demo_umami_content/src/InstallHelper.php
        modified:   core/profiles/demo_umami/modules/demo_umami_content/tests/src/Functional/UninstallDefaultContentTest.php
        modified:   core/profiles/demo_umami/themes/umami/css/base.css
        modified:   core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
        modified:   core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css
        modified:   core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
        modified:   core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
        renamed:    core/profiles/demo_umami/modules/demo_umami_content/default_content/images/umami-bundle.png -> core/profiles/demo_umami/themes/umami/images/png/umami-bundle.png
        modified:   core/profiles/demo_umami/themes/umami/templates/components/footer-promo-block/block--bundle--footer-promo-block.html.twig
        modified:   core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
        deleted:    core/tests/Drupal/FunctionalJavascriptTests/Core/Installer/Form/SelectProfileFormTest.php

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        sites/default/files/
        sites/default/settings.php
        vendor/

andrew@quinx:~/local-websites/docksal-projects/umami/docroot$ 

RTBC.

- patch re-roll looks good
- manual testing (firefox + chrome) confirmed screenshots from #17 and #21

Many focus styles still have the default browser outline in addition to our custom style, so some browser inconsistencies exist. The existing follow-ups can address these.

filed another follow-up. #2942506: Better focus style for image links in Umami

BTW, all the follow-ups are things which have focus styles which technically pass WCAG SC 2.4.7 Focus Visible, but are various levels of mediocre. WCAG 2.0 just wants focus styles to be present, but says nothing about their contrast or clarity. WCAG 2.1 introduces a graphics contrast criterion, so that's why I want them to be improved later.

sorry I broke the tag in #26