diff --git a/CHANGELOG.txt b/CHANGELOG.txt index c2410afe3a..50f3178def 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -24,7 +24,8 @@ Changelog * Add a system check to warn when a `django-storages` backend is configured to allow overwriting (Rishabh jain) * Update admin focus outline color to have higher contrast against white backgrounds (Thibaud Colas) * Implement latest design for the admin dashboard header (Thibaud Colas, Steven Steinwand) - * Add base Axe accessibility checker integration within userbar, with count and list of errors (Albina Starykova) + * Add Axe accessibility checker integration within userbar, with count and list of errors (Albina Starykova) + * Restyle the userbar to follow the visual design of the Wagtail admin (Albina Starykova) * Allow configuring Axe accessibility checker integration via `construct_wagtail_userbar` hook (Sage Abdullah) * Support pinning and un-pinning the rich text editor toolbar depending on user preference (Thibaud Colas) * Make the rich text block trigger and slash-commands always available regardless of where the cursor is (Thibaud Colas) diff --git a/client/scss/components/_userbar.scss b/client/scss/components/_userbar.scss index 78d80fdbe9..8dd9063a5c 100644 --- a/client/scss/components/_userbar.scss +++ b/client/scss/components/_userbar.scss @@ -101,11 +101,16 @@ $positions: ( border-radius: theme('borderRadius.full'); color: $color-white; font-size: theme('fontSize.14'); + line-height: theme('lineHeight.none'); height: theme('spacing.5'); width: theme('spacing.5'); position: absolute; inset-inline-end: -3px; top: -3px; + + @media (forced-colors: $media-forced-colours) { + border: theme('spacing.px') solid ButtonText; + } } &:focus { @@ -165,7 +170,7 @@ $positions: ( .w-userbar__item { margin: 0; - background-color: $color-grey-1; + background-color: theme('colors.primary.DEFAULT'); opacity: 0; overflow: hidden; transition-duration: 0.125s; @@ -278,6 +283,7 @@ $positions: ( .w-dialog__content { padding: 0; min-height: unset; + max-height: 60vh; } .w-dialog__title { @@ -305,14 +311,16 @@ $positions: ( justify-content: space-between; gap: theme('spacing.2'); font: inherit; + font-weight: theme('fontWeight.bold'); } .w-a11y-result__name { color: theme('colors.primary.200'); - font-weight: theme('fontWeight.bold'); } .w-a11y-result__container { + display: flex; + flex-wrap: wrap; padding: 0 theme('spacing.5') theme('spacing.5') theme('spacing.5'); } @@ -321,22 +329,48 @@ $positions: ( } .w-a11y-result__selector { + display: flex; + align-items: center; background: theme('colors.grey.50'); color: theme('colors.grey.600'); border-radius: theme('borderRadius.DEFAULT'); - margin-inline-end: 0.6rem; - margin-bottom: 0.6rem; - padding: 0.375rem; + margin-inline-end: theme('spacing.[2.5]'); + margin-bottom: theme('spacing.[2.5]'); + padding: theme('spacing.[1.5]'); + + &:hover, + &:focus { + background: theme('colors.secondary.DEFAULT'); + color: theme('colors.white.DEFAULT'); + + .w-a11y-result__icon { + fill: theme('colors.white.DEFAULT'); + } + } + + @media (forced-colors: $media-forced-colours) { + border: theme('spacing.px') solid ButtonText; + } + } + + .w-a11y-result__icon { + flex-shrink: 0; + fill: theme('colors.secondary.DEFAULT'); + height: theme('spacing.[3.5]'); + width: theme('spacing.[3.5]'); + margin-inline-end: theme('spacing.[2.5]'); } } .w-a11y-result__count { - margin-inline-end: 0.5em; + margin-inline-end: theme('spacing.2'); display: flex; justify-content: center; + align-items: center; background-color: theme('colors.positive.100'); border-radius: theme('borderRadius.full'); font-size: theme('fontSize.14'); + line-height: theme('lineHeight.none'); height: theme('spacing.5'); width: theme('spacing.5'); color: theme('colors.white.DEFAULT'); @@ -344,6 +378,10 @@ $positions: ( &.has-errors { background-color: theme('colors.critical.200'); } + + @media (forced-colors: $media-forced-colours) { + border: theme('spacing.px') solid ButtonText; + } } //Media for Windows High Contrast @@ -360,14 +398,6 @@ $positions: ( .w-userbar-items::after { border: $width-arrow solid Canvas; } - - .w-userbar-axe-count { - border: theme('spacing.px') solid ButtonText; - } - - .w-a11y-result__selector { - border: theme('spacing.px') solid ButtonText; - } } // ============================================================================= diff --git a/client/src/entrypoints/admin/userbar.js b/client/src/entrypoints/admin/userbar.js index 1950c1340e..73e2847396 100644 --- a/client/src/entrypoints/admin/userbar.js +++ b/client/src/entrypoints/admin/userbar.js @@ -362,6 +362,7 @@ class Userbar extends HTMLElement { const showAxeResults = () => { modal.show(); + // Reset modal contents to support multiple runs of Axe checks in the preview panel modalBody.innerHTML = ''; if (results.violations.length) { @@ -399,8 +400,11 @@ class Userbar extends HTMLElement { 'aria-describedby', a11yErrorName.id, ); + const currentA11ySelectorText = currentA11ySelector.querySelector( + '[data-a11y-result-selector-text]', + ); // Remove unnecessary details before displaying selectors to the user - currentA11ySelector.textContent = `${node.target}`.replace( + currentA11ySelectorText.textContent = `${node.target}`.replace( /\[data-block-key="\w{5}"\]/, '', ); diff --git a/docs/releases/4.2.md b/docs/releases/4.2.md index 46e45930ae..106cb70014 100644 --- a/docs/releases/4.2.md +++ b/docs/releases/4.2.md @@ -80,7 +80,8 @@ This feature was developed by Matt Westcott, and sponsored by [YouGov](https://y * Add a system check to warn when a `django-storages` backend is configured to allow overwriting (Rishabh jain) * Update admin focus outline color to have higher contrast against white backgrounds (Thibaud Colas) * Implement latest design for the admin dashboard header (Thibaud Colas, Steven Steinwand) - * Add base Axe accessibility checker integration within userbar, with count and list of errors (Albina Starykova) + * Add Axe accessibility checker integration within userbar, with count and list of errors (Albina Starykova) + * Restyle the userbar to follow the visual design of the Wagtail admin (Albina Starykova) * Allow configuring Axe accessibility checker integration via `construct_wagtail_userbar` hook (Sage Abdullah) * Adjust the size of panel labels on the "Account" form (Thibaud Colas) * Delay hiding the contents of the side panels when closing, so the animation is smoother (Thibaud Colas) diff --git a/wagtail/admin/templates/wagtailadmin/icons/crosshairs.svg b/wagtail/admin/templates/wagtailadmin/icons/crosshairs.svg new file mode 100644 index 0000000000..dbffefeb07 --- /dev/null +++ b/wagtail/admin/templates/wagtailadmin/icons/crosshairs.svg @@ -0,0 +1,3 @@ + + + diff --git a/wagtail/admin/templates/wagtailadmin/userbar/base.html b/wagtail/admin/templates/wagtailadmin/userbar/base.html index 2c000e9dc2..ee3629e736 100644 --- a/wagtail/admin/templates/wagtailadmin/userbar/base.html +++ b/wagtail/admin/templates/wagtailadmin/userbar/base.html @@ -15,6 +15,7 @@ {% include "wagtailadmin/icons/plus.svg" %} {% include "wagtailadmin/icons/tick.svg" %} {% include "wagtailadmin/icons/cross.svg" %} + {% include "wagtailadmin/icons/crosshairs.svg" %} @@ -50,6 +51,8 @@ {% enddialog %} diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py index 2cf097d696..0e2747f408 100644 --- a/wagtail/admin/wagtail_hooks.py +++ b/wagtail/admin/wagtail_hooks.py @@ -1045,6 +1045,7 @@ def register_icons(icons): "comment-add.svg", "comment-add-reversed.svg", "cross.svg", + "crosshairs.svg", "cut.svg", "date.svg", "desktop.svg",