From 7e396b1ac0a4f86907113897d1df28af6d4c2d17 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Fri, 11 Jul 2025 16:13:42 -0400 Subject: [PATCH] Keep focus visible for menu buttons when menu is open and then closed The `[aria-expanded="true"]` keeps the button highlighted while the menu is open. The `:focus-visible` ensures the focus stays visible when the menu is closed. This is normally applied by the A11yController, but that gets removed when MUI programatically moves the focus back when the menu is closed. --- .../threading/global_threads/thread_item/thread_item.scss | 7 +++++++ .../threading/global_threads/thread_pane/thread_pane.scss | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss index a605bffdcc2..7d8e957fdad 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss +++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss @@ -156,4 +156,11 @@ .Avatars { margin-right: 10px; } + + // Remove the focus-visible case when MM-62778 is completed + .btn:focus-visible, + .btn[aria-expanded="true"] { + border-radius: 4px; + box-shadow: 0 0 1px 3px rgba(var(--link-color-rgb), 0.5), 0 0 0 1px var(--link-color); + } } diff --git a/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.scss b/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.scss index 875e8d33e5c..a1cd23849b9 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.scss +++ b/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.scss @@ -56,6 +56,13 @@ font-weight: 400; } } + + // Remove the focus-visible case when MM-62778 is completed + .btn:focus-visible, + .btn[aria-expanded="true"] { + border-radius: 4px; + box-shadow: 0 0 1px 3px rgba(var(--link-color-rgb), 0.5), 0 0 0 1px var(--link-color); + } } .ThreadViewer {