Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Render accessibility checker dialog on left or right edge depending on the userbar position #11819

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+95 −46
Open

Render accessibility checker dialog on left or right edge depending on the userbar position #11819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 55 additions & 41 deletions client/scss/components/_userbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ $positions: (
),
);

// Possible positions for the accessibilty checker dialog.
$directions: left right;

// =============================================================================
// Wagtail userbar proper
// =============================================================================
Expand Down Expand Up @@ -213,53 +216,64 @@ $positions: (
}
}

.w-dialog--userbar {
// Display off to the side of the page rather than in the middle.
inset-inline-start: auto;
font-family: theme('fontFamily.sans');
padding-inline-end: 2rem;
z-index: $userbar-z-index;
@each $direction in $directions {
.w-dialog--userbar-#{$direction} {
font-family: theme('fontFamily.sans');
z-index: $userbar-z-index;

@if $direction == 'left' {
inset-inline-end: auto;
padding-inline-start: 2rem;
} @else {
inset-inline-start: auto;
padding-inline-end: 2rem;
}

.w-dialog__close-button {
$size: theme('spacing.6');
width: $size;
height: $size;
top: calc(-1 * $size / 2);
inset-inline-end: calc(-1 * $size / 2);
border-radius: theme('borderRadius.full');
border: 2px solid theme('colors.icon-primary');
background: theme('colors.surface-page');
}
.w-dialog__close-button {
$size: theme('spacing.6');
width: $size;
height: $size;
top: calc(-1 * $size / 2);
@if $direction == 'left' {
inset-inline-start: calc(-1 * $size / 2);
} @else {
inset-inline-end: calc(-1 * $size / 2);
}
border-radius: theme('borderRadius.full');
border: 2px solid theme('colors.icon-primary');
background: theme('colors.surface-page');
}

.w-dialog__close-icon {
color: theme('colors.text-context');
}
.w-dialog__close-icon {
color: theme('colors.text-context');
}

.w-dialog__content {
padding: 0;
min-height: unset;
max-height: 60vh;
}
.w-dialog__content {
padding: 0;
min-height: unset;
max-height: 60vh;
}

.w-dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.w-dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
}

.w-dialog__title {
@apply w-h3;
padding: theme('spacing.4') theme('spacing.5');
margin-bottom: 0;
}
.w-dialog__title {
@apply w-h3;
padding: theme('spacing.4') theme('spacing.5');
margin-bottom: 0;
}

.w-dialog__subtitle {
@apply w-body-text;
padding-inline-end: theme('spacing.5');
display: flex;
align-items: center;
gap: theme('spacing.2');
margin-bottom: 0;
.w-dialog__subtitle {
@apply w-body-text;
padding-inline-end: theme('spacing.5');
display: flex;
align-items: center;
gap: theme('spacing.2');
margin-bottom: 0;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{% trans 'Issues found' %}
<span class="w-a11y-result__count" data-a11y-result-count></span>
{% endfragment %}
{% fragment as dialog_classname %}w-dialog--userbar {% admin_theme_classname %}{% endfragment %}
{% fragment as dialog_classname %}w-dialog--userbar-{{ dialog_position|default:'right' }} {% admin_theme_classname %}{% endfragment %}
{% dialog id="accessibility-results" theme="floating" classname=dialog_classname title=dialog_title subtitle=issues_found a11y_count="a11y_count" %}
{# Contents of the dialog created in JS based on these templates. #}
<template id="w-a11y-result-row-template">
Expand Down
14 changes: 10 additions & 4 deletions wagtail/admin/templatetags/wagtailuserbar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,12 @@ def wagtailuserbar(context, position="bottom-right"):
# Render the userbar differently within the preview panel.
in_preview_panel = getattr(request, "in_preview_panel", False)

# Render accessibility checker dialog on left or right side of the screen
if position in ["bottom-left", "top-left"]:
dialog_position = "left"
else:
dialog_position = "right"

# Render the userbar using the user's preferred admin language
userprofile = UserProfile.get_for_user(user)
with translation.override(userprofile.get_preferred_language()):
Expand All @@ -62,7 +68,7 @@ def wagtailuserbar(context, position="bottom-right"):

if in_preview_panel:
items = [
AccessibilityItem(),
AccessibilityItem(dialog_position),
]
elif page and page.id:
if revision_id:
Expand All @@ -71,7 +77,7 @@ def wagtailuserbar(context, position="bottom-right"):
AdminItem(),
ExplorePageItem(revision.content_object),
EditPageItem(revision.content_object),
AccessibilityItem(),
AccessibilityItem(dialog_position),
]
else:
# Not a revision
Expand All @@ -80,13 +86,13 @@ def wagtailuserbar(context, position="bottom-right"):
ExplorePageItem(page),
EditPageItem(page),
AddPageItem(page),
AccessibilityItem(),
AccessibilityItem(dialog_position),
]
else:
# Not a page.
items = [
AdminItem(),
AccessibilityItem(),
AccessibilityItem(dialog_position),
]

for fn in hooks.get_hooks("construct_wagtail_userbar"):
Expand Down
12 changes: 12 additions & 0 deletions wagtail/admin/tests/test_userbar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,18 @@ def test_userbar_hidden_in_preview_panel(self):

self.assertIn("<aside hidden>", content)

def test_userbar_dialog_position_left(self):
template = Template(
"{% load wagtailuserbar %}{% wagtailuserbar 'bottom-left' %}"
)
content = template.render(Context({"request": self.dummy_request(self.user)}))
self.assertIn("w-dialog--userbar-left", content)

def test_userbar_dialog_position_right(self):
template = Template("{% load wagtailuserbar %}{% wagtailuserbar 'top-right' %}")
content = template.render(Context({"request": self.dummy_request(self.user)}))
self.assertIn("w-dialog--userbar-right", content)


class TestAccessibilityCheckerConfig(WagtailTestUtils, TestCase):
def setUp(self):
Expand Down
17 changes: 17 additions & 0 deletions wagtail/admin/userbar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,22 @@ def render(self, request):
class AccessibilityItem(BaseItem):
"""A userbar item that runs the accessibility checker."""

# Behaves as a static class attribute
_dialog_position = "right"

def __init__(self, dialog_position=None):
# Overwrite dialog_position class attribute if new value is provided
if dialog_position:
self.dialog_position = dialog_position

@property
def dialog_position(self):
return type(self)._dialog_position

@dialog_position.setter
def dialog_position(self, val):
type(self)._dialog_position = val

#: The template to use for rendering the item.
template = "wagtailadmin/userbar/item_accessibility.html"

Expand Down Expand Up @@ -149,6 +165,7 @@ def get_axe_configuration(self, request):
def get_context_data(self, request):
return {
**super().get_context_data(request),
"dialog_position": self.dialog_position,
"axe_configuration": self.get_axe_configuration(request),
}

Expand Down
Loading