Merge 93eef88ff0 into 196cb02d10

client/scss/components/_userbar.scss

@@ -36,6 +36,9 @@ $positions: (
   ),
 );
 
+// Possible positions for the accessibilty checker dialog.
+$directions: left right;
+
 // =============================================================================
 // Wagtail userbar proper
 // =============================================================================
@@ -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;
 
-  .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');
-  }
+    @if $direction == 'left' {
+      inset-inline-end: auto;
+      padding-inline-start: 2rem;
+    } @else {
+      inset-inline-start: auto;
+      padding-inline-end: 2rem;
+    }
 
-  .w-dialog__close-icon {
-    color: theme('colors.text-context');
-  }
+    .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__content {
-    padding: 0;
-    min-height: unset;
-    max-height: 60vh;
-  }
+    .w-dialog__close-icon {
+      color: theme('colors.text-context');
+    }
 
-  .w-dialog__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
+    .w-dialog__content {
+      padding: 0;
+      min-height: unset;
+      max-height: 60vh;
+    }
 
-  .w-dialog__title {
-    @apply w-h3;
-    padding: theme('spacing.4') theme('spacing.5');
-    margin-bottom: 0;
-  }
+    .w-dialog__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
 
-  .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__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;
+    }
   }
 }
 

wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html

@@ -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">

wagtail/admin/templatetags/wagtailuserbar.py

@@ -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()):
@@ -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:
@@ -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
@@ -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"):

wagtail/admin/tests/test_userbar.py

@@ -165,6 +165,18 @@ class TestUserbarTag(WagtailTestUtils, TestCase):
 
         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):

wagtail/admin/userbar.py

@@ -28,6 +28,22 @@ class AdminItem(BaseItem):
 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"
 
@@ -149,6 +165,7 @@ class AccessibilityItem(BaseItem):
     def get_context_data(self, request):
         return {
             **super().get_context_data(request),
+            "dialog_position": self.dialog_position,
             "axe_configuration": self.get_axe_configuration(request),
         }