kopia lustrzana https://github.com/wagtail/wagtail
Userbar & accessibility checker UI improvements (#9913)
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>pull/9908/head
Albina
GitHub
rodzic
ad3ef5875d
commit
a3f10acae1
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
|
|
|
|||
|
|
@ -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}"\]/,
|
||||
'',
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" id="icon-crosshairs" viewBox="0 0 512 512">
|
||||
<path d="M500 224h-30.364C455.724 130.325 381.675 56.276 288 42.364V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v30.364C130.325 56.276 56.276 130.325 42.364 224H12c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h30.364C56.276 381.675 130.325 455.724 224 469.636V500c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-30.364C381.675 455.724 455.724 381.675 469.636 288H500c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12zM288 404.634V364c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40.634C165.826 392.232 119.783 346.243 107.366 288H148c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40.634C119.768 165.826 165.757 119.783 224 107.366V148c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-40.634C346.174 119.768 392.217 165.757 404.634 224H364c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40.634C392.232 346.174 346.243 392.217 288 404.634zM288 256c0 17.673-14.327 32-32 32s-32-14.327-32-32c0-17.673 14.327-32 32-32s32 14.327 32 32z"/>
|
||||
</svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 1.0 KiB |
|
|
@ -15,6 +15,7 @@
|
|||
{% include "wagtailadmin/icons/plus.svg" %}
|
||||
{% include "wagtailadmin/icons/tick.svg" %}
|
||||
{% include "wagtailadmin/icons/cross.svg" %}
|
||||
{% include "wagtailadmin/icons/crosshairs.svg" %}
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
|
@ -50,6 +51,8 @@
|
|||
</template>
|
||||
<template id="w-a11y-result-selector-template">
|
||||
<button class="w-a11y-result__selector" data-a11y-result-selector type="button">
|
||||
{% icon name="crosshairs" class_name="w-a11y-result__icon" %}
|
||||
<span data-a11y-result-selector-text></span>
|
||||
</button>
|
||||
</template>
|
||||
{% enddialog %}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue