Update privacy-switch class toggle targets to use ZoneController

- Refactor styles for status tag to be more easily used across multiple elements
- Fixes #12611 (accessibility issue with the live link not reflecting update title/tooltips)

client/scss/components/_status-tag.scss

@@ -56,8 +56,10 @@ button.w-status:hover {
   color: theme('colors.text-button-outline-hover');
 }
 
-// Special case for text-transform: uppercase.
 .page-status-tag {
+  @apply w-inline-flex w-items-center w-justify-center w-whitespace-nowrap w-px-1 w-ml-3 w-text-11 w-rounded-sm w-bg-transparent w-text-text-meta w-border w-border-border-furniture w-no-underline w-font-semibold hover:w-border-surface-menus hover:w-text-text-label w-transition more-contrast:w-border more-contrast:w-border-border-interactive-more-contrast hover:more-contrast:w-border-border-interactive-more-contrast-hover;
+
+  // Special case for text-transform: uppercase.
   // stylelint-disable-next-line property-disallowed-list
   text-transform: uppercase;
 }

wagtail/admin/templates/wagtailadmin/collections/_privacy_switch.html

@@ -7,7 +7,14 @@
     {% dialog icon_name='view' id='set-privacy' data_url=privacy_url title=_("Change privacy") message_status='info' message_heading=_("Privacy settings determine who is able to view documents in this collection.") %}
     {% enddialog %}
 
-    <div class="privacy-indicator {% if is_public %}public{% else %}private{% endif %}">
+    <div
+        class="privacy-indicator {% if is_public %}public{% else %}private{% endif %}"
+        data-controller="w-zone"
+        data-action="w-privacy:changed@document->w-zone#switch"
+        data-w-zone-active-class="public"
+        data-w-zone-inactive-class="private"
+        data-w-zone-switch-key-value="isPublic"
+    >
         {% trans "Privacy" %}
         <button type="button" data-a11y-dialog-show="set-privacy" class="button button-small button-secondary">
             {# labels are shown/hidden in CSS according to the 'private' / 'public' class on view-permission-indicator #}

wagtail/admin/templates/wagtailadmin/shared/page_status_tag_new.html

@@ -10,45 +10,38 @@
 {% comment %} Unable to use pageurl template tag here due to issues in unit tests where request is not yet available - see #10157 {% endcomment %}
 {% if page.live and page.url is not None %}
     {% test_page_is_public page as is_public %}
-
-    <a href="{{ page.url }}" target="_blank" rel="noreferrer"
-       class="
-              page-status-tag
-              u-text-uppercase
-              w-inline-flex
-              w-items-center
-              w-justify-center
-              w-whitespace-nowrap
-              w-px-1
-              w-ml-3
-              w-text-11
-              w-rounded-sm
-              w-bg-transparent
-              w-text-text-meta
-              w-border
-              w-border-border-furniture
-              w-no-underline
-              w-font-semibold
-              hover:w-border-surface-menus
-              hover:w-text-text-label
-              w-transition
-              more-contrast:w-border
-              more-contrast:w-border-border-interactive-more-contrast
-              hover:more-contrast:w-border-border-interactive-more-contrast-hover"
-       aria-label="{% if is_public %}{% trans 'Visible to all. Visit the live page' %}{% else %}{% trans 'Private. Visit the live page' %}{% endif %}"
-       data-controller="w-tooltip"
-       data-w-tooltip-content-value="{% if is_public %}{% trans 'Visible to all' %}{% else %}{% trans 'Private' %}{% endif %}"
-       data-w-tooltip-offset-value="[0, 13]"
+    {% trans 'Live' as live_label %}
+    {% comment %} Two copies of the tag, visibility is toggled by the privacy switch JS {% endcomment %}
+    <a
+        href="{{ page.url }}"
+        target="_blank"
+        rel="noreferrer"
+        class="{% classnames 'page-status-tag' is_public|yesno:',w-hidden' %}"
+        aria-label="{% trans 'Visible to all. Visit the live page' %}"
+        data-controller="w-tooltip w-zone"
+        data-action="w-privacy:changed@document->w-zone#switch"
+        data-w-tooltip-content-value="{% trans 'Visible to all' %}"
+        data-w-tooltip-offset-value="[0, 13]"
+        data-w-zone-inactive-class="w-hidden"
+        data-w-zone-switch-key-value="isPublic"
     >
-
-        {% with icon_classes='privacy-indicator-icon w-w-4 w-h-4 w-mr-1' %}
-            {% if is_public %}
-                {% icon name="view" classname=icon_classes %}
-            {% else %}
-                {% icon name="no-view" classname=icon_classes %}
-            {% endif %}
-        {% endwith %}
-
-        {% trans 'Live' %}
+        {% icon classname='w-w-4 w-h-4 w-mr-1' name="view" %}
+        {{ live_label }}
+    </a>
+    <a
+        href="{{ page.url }}"
+        target="_blank"
+        rel="noreferrer"
+        class="{% classnames 'page-status-tag' is_public|yesno:'w-hidden,' %}"
+        aria-label="{% trans 'Private. Visit the live page' %}"
+        data-controller="w-tooltip w-zone"
+        data-action="w-privacy:changed@document->w-zone#switch"
+        data-w-tooltip-content-value="{% trans 'Private' %}"
+        data-w-tooltip-offset-value="[0, 13]"
+        data-w-zone-inactive-class="w-hidden"
+        data-w-zone-switch-key-value="!isPublic"
+    >
+        {% icon classname='w-w-4 w-h-4 w-mr-1' name="no-view" %}
+        {{ live_label }}
     </a>
 {% endif %}

wagtail/admin/templates/wagtailadmin/shared/side_panels/includes/status/privacy.html

@@ -5,7 +5,13 @@
     {% if page.id %}{% test_page_is_public page as is_public %}{% else %}{% test_page_is_public parent_page as is_public %}{% endif %}
 
     {# The swap between public and private text is done using JS inside of privacy-switch.js when the response from the modal comes back #}
-    <div class="{% if not is_public %}w-hidden{% endif %}" data-privacy-sidebar-public>
+    <div
+        class="{% if not is_public %}w-hidden{% endif %}"
+        data-controller="w-zone"
+        data-action="w-privacy:changed@document->w-zone#switch"
+        data-w-zone-inactive-class="w-hidden"
+        data-w-zone-switch-key-value="isPublic"
+    >
         {% trans 'Page visibility: ' as screen_reader_title_prefix %}
         {% trans 'Visible to all' as title %}
         {% trans 'Once live anyone can view' as help_text %}
@@ -13,7 +19,13 @@
             {{ block.super }}
         {% endwith %}
     </div>
-    <div class="{% if is_public %}w-hidden{% endif %}" data-privacy-sidebar-private>
+    <div
+        class="!w-my-0 {% if is_public %}w-hidden{% endif %}"
+        data-controller="w-zone"
+        data-action="w-privacy:changed@document->w-zone#switch"
+        data-w-zone-inactive-class="w-hidden"
+        data-w-zone-switch-key-value="!isPublic"
+    >
         {% trans 'Private' as title %}
         {% trans 'Not visible to the public' as help_text %}
         {% with icon_name='no-view' %}

wagtail/admin/tests/pages/test_create_page.py

@@ -2037,11 +2037,14 @@ class TestCreateViewChildPagePrivacy(WagtailTestUtils, TestCase):
 
         self.assertEqual(response.status_code, 200)
 
-        self.assertContains(response, '<div class="" data-privacy-sidebar-private>')
+        soup = self.get_soup(response.content)
 
-        self.assertContains(
-            response, '<div class="w-hidden" data-privacy-sidebar-public>'
-        )
+        public_div = soup.select_one('[data-w-zone-switch-key-value="isPublic"]')
+        private_div = soup.select_one('[data-w-zone-switch-key-value="!isPublic"]')
+
+        self.assertEqual(private_div["class"], ["!w-my-0"])
+
+        self.assertEqual(public_div["class"], ["w-hidden"])
 
     def test_sidebar_public(self):
         response = self.client.get(
@@ -2053,8 +2056,11 @@ class TestCreateViewChildPagePrivacy(WagtailTestUtils, TestCase):
 
         self.assertEqual(response.status_code, 200)
 
-        self.assertContains(
-            response, '<div class="w-hidden" data-privacy-sidebar-private>'
-        )
+        soup = self.get_soup(response.content)
 
-        self.assertContains(response, '<div class="" data-privacy-sidebar-public>')
+        public_div = soup.select_one('[data-w-zone-switch-key-value="isPublic"]')
+        private_div = soup.select_one('[data-w-zone-switch-key-value="!isPublic"]')
+
+        self.assertEqual(public_div["class"], [])
+
+        self.assertEqual(private_div["class"], ["!w-my-0", "w-hidden"])

wagtail/admin/tests/test_privacy.py

@@ -398,11 +398,16 @@ class TestPrivacyIndicators(WagtailTestUtils, TestCase):
         # Check the response
         self.assertEqual(response.status_code, 200)
 
+        soup = self.get_soup(response.content)
+
+        public_link = soup.select_one('[data-w-zone-switch-key-value="isPublic"]')
+        private_link = soup.select_one('[data-w-zone-switch-key-value="!isPublic"]')
+
         # Check the privacy indicator is public
-        self.assertContains(
-            response, '<div class="w-hidden" data-privacy-sidebar-private>'
-        )
-        self.assertContains(response, '<div class="" data-privacy-sidebar-public>')
+        self.assertEqual(private_link["class"], ["page-status-tag", "w-hidden"])
+
+        # Check the privacy indicator is private
+        self.assertEqual(public_link["class"], ["page-status-tag"])
 
     def test_explorer_private(self):
         """
@@ -417,14 +422,14 @@ class TestPrivacyIndicators(WagtailTestUtils, TestCase):
 
         soup = self.get_soup(response.content)
 
-        # Check the private privacy indicator is visible
-        private_indicator = soup.select_one("[data-privacy-sidebar-private]")
-        # There should not be any classes applied
-        self.assertEqual(private_indicator["class"], [])
+        public_link = soup.select_one('[data-w-zone-switch-key-value="isPublic"]')
+        private_link = soup.select_one('[data-w-zone-switch-key-value="!isPublic"]')
 
-        # Privacy indicator should be hidden
-        public_indicator = soup.select_one("[data-privacy-sidebar-public].w-hidden")
-        self.assertIsNotNone(public_indicator)
+        # Check the private privacy indicator is visible
+        self.assertEqual(private_link["class"], ["page-status-tag"])
+
+        # Check the public privacy indicator is hidden
+        self.assertEqual(public_link["class"], ["page-status-tag", "w-hidden"])
 
     def test_explorer_private_child(self):
         """
@@ -437,11 +442,16 @@ class TestPrivacyIndicators(WagtailTestUtils, TestCase):
         # Check the response
         self.assertEqual(response.status_code, 200)
 
+        soup = self.get_soup(response.content)
+
+        public_link = soup.select_one('[data-w-zone-switch-key-value="isPublic"]')
+        private_link = soup.select_one('[data-w-zone-switch-key-value="!isPublic"]')
+
         # Check the privacy indicator is private
-        self.assertContains(response, '<div class="" data-privacy-sidebar-private>')
-        self.assertContains(
-            response, '<div class="w-hidden" data-privacy-sidebar-public>'
-        )
+        self.assertEqual(private_link["class"], ["page-status-tag"])
+
+        # Check the public privacy indicator is hidden
+        self.assertEqual(public_link["class"], ["page-status-tag", "w-hidden"])
 
     def test_explorer_list_homepage(self):
         """
@@ -491,11 +501,15 @@ class TestPrivacyIndicators(WagtailTestUtils, TestCase):
         # Check the response
         self.assertEqual(response.status_code, 200)
 
+        soup = self.get_soup(response.content)
+
+        public_link = soup.select_one('[data-w-zone-switch-key-value="isPublic"]')
+        private_link = soup.select_one('[data-w-zone-switch-key-value="!isPublic"]')
+
         # Check the privacy indicator is public
-        self.assertContains(
-            response, '<div class="w-hidden" data-privacy-sidebar-private>'
-        )
-        self.assertContains(response, '<div class="" data-privacy-sidebar-public>')
+        self.assertEqual(public_link["class"], ["page-status-tag"])
+
+        self.assertEqual(private_link["class"], ["page-status-tag", "w-hidden"])
 
     def test_edit_private(self):
         """
@@ -508,11 +522,15 @@ class TestPrivacyIndicators(WagtailTestUtils, TestCase):
         # Check the response
         self.assertEqual(response.status_code, 200)
 
+        soup = self.get_soup(response.content)
+
+        public_link = soup.select_one('[data-w-zone-switch-key-value="isPublic"]')
+        private_link = soup.select_one('[data-w-zone-switch-key-value="!isPublic"]')
+
         # Check the privacy indicator is private
-        self.assertContains(response, '<div class="" data-privacy-sidebar-private>')
-        self.assertContains(
-            response, '<div class="w-hidden" data-privacy-sidebar-public>'
-        )
+        self.assertEqual(private_link["class"], ["page-status-tag"])
+
+        self.assertEqual(public_link["class"], ["page-status-tag", "w-hidden"])
 
     def test_edit_private_child(self):
         """
@@ -526,10 +544,15 @@ class TestPrivacyIndicators(WagtailTestUtils, TestCase):
         self.assertEqual(response.status_code, 200)
 
         # Check the privacy indicator is private
-        self.assertContains(response, '<div class="" data-privacy-sidebar-private>')
-        self.assertContains(
-            response, '<div class="w-hidden" data-privacy-sidebar-public>'
-        )
+        soup = self.get_soup(response.content)
+
+        public_link = soup.select_one('[data-w-zone-switch-key-value="isPublic"]')
+        private_link = soup.select_one('[data-w-zone-switch-key-value="!isPublic"]')
+
+        # Check the privacy indicator is private
+        self.assertEqual(private_link["class"], ["page-status-tag"])
+
+        self.assertEqual(public_link["class"], ["page-status-tag", "w-hidden"])
 
     def test_private_page_options_only_password_groups(self):
         # change the private_page_options to password and login