Highlight side panels toggles when expanded

Co-authored-by: Steven Steinwand <steven_ts@hotmail.com>

client/src/entrypoints/admin/comments.js

@@ -382,7 +382,7 @@ window.comments = (() => {
     commentCounter.className =
       '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-secondary-100 w-text-white w-border w-border-white w-rounded-[1rem]';
     commentToggle.className =
-      'w-h-slim-header w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary';
+      'w-h-slim-header w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary expanded:w-text-primary';
     commentToggle.appendChild(commentCounter);
 
     const updateCommentCount = () => {

client/tailwind.config.js

@@ -151,6 +151,10 @@ module.exports = {
         },
       });
     }),
+    /** Support for aria-expanded=true variant */
+    plugin(({ addVariant }) => {
+      addVariant('expanded', '&[aria-expanded=true]');
+    }),
   ],
   corePlugins: {
     ...vanillaRTL.disabledCorePlugins,

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

@@ -2,7 +2,7 @@
 
 {% for panel in side_panels %}
     <button type="button"
-        class="{{ nav_icon_button_classes }}"
+        class="{{ nav_icon_button_classes }} expanded:w-text-primary"
         aria-label="{{ panel.toggle_aria_label }}"
         data-tippy-content="{{ panel.title }}"
         data-tippy-offset="[0,0]"