fix: focus outlines

Author: OEvgeny

packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css

@@ -8,7 +8,6 @@
   font-weight: 400;
   max-width: var(--webchat__max-width--message-bubble);
   min-width: var(--webchat__min-width--message-bubble);
-  overflow: clip;
   position: relative;
 }
 
@@ -39,16 +38,14 @@
   flex-direction: column;
   height: 0;
   interpolate-size: allow-keywords;
+  margin: calc(var(--webchat__padding--regular) / -2);
+  overflow: clip;
+  padding: calc(var(--webchat__padding--regular) / 2);
   transition: visibility 0s, height 0.2s ease;
   visibility: hidden;
 }
 
 :global(.webchat) .collapsible-grouping__content--open {
   visibility: unset;
   height: auto;
-
-  .collapsible-grouping__header {
-    border-block-end: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble)
-      var(--webchat__border-color--bubble);
-  }
 }

packages/fluent-theme/src/components/activity/PartGroupingingDecorator.module.css

@@ -92,17 +92,14 @@
     }
   }
 
-  :global(.stacked-layout .collapsible-grouping__content) {
-    padding-inline: var(--webchat-spacingHorizontalNone);
-  }
-
   :global(.stacked-layout .collapsible-grouping__content .part-grouping-activity__activities) {
     gap: var(--webchat-spacingVerticalS);
     padding: var(--webchat-spacingVerticalL) var(--webchat-spacingHorizontalL);
   }
 
   :global(.stacked-layout .collapsible-grouping) {
     display: grid;
+
     &:global(.collapsible-grouping--open) {
       gap: var(--webchat-spacingVerticalM);
     }
@@ -409,11 +406,6 @@
     anchor-name: --webchat-flair;
     background: var(--webchat-colorNeutralBackground1);
     border-radius: var(--webchat-borderRadius2XLarge);
-    margin: calc(var(--webchat-spacingVerticalMNudge) * -1) var(--webchat-spacingHorizontalNone);
-
-    &:global(.collapsible-grouping__content--open) {
-      margin: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
-    }
   }
 
   :global(.stacked-layout .stacked-layout__message-status) {
@@ -443,16 +435,19 @@
       width: var(--webchat__bubble--max-width);
     }
 
-    &:not(.part-grouping-decorator--group) :global(.webchat__bubble__content) {
-      display: flex;
-      flex-direction: column;
-      gap: var(--webchat-spacingVerticalS);
+    :global(.webchat__bubble__content) {
       margin-block: calc(var(--webchat-spacingVerticalXS) * -1);
       margin-inline: calc(var(--webchat-spacingHorizontalS) * -1);
       padding-block: var(--webchat-spacingVerticalXS);
       padding-inline: var(--webchat-spacingHorizontalS);
     }
 
+    &:not(.part-grouping-decorator--group) :global(.webchat__bubble__content) {
+      display: flex;
+      flex-direction: column;
+      gap: var(--webchat-spacingVerticalS);
+    }
+
     :global(.webchat__bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment-list) {
       margin-block-start: var(--webchat-spacingVerticalS);
     }

packages/fluent-theme/src/components/theme/Theme.module.css

@@ -316,7 +316,7 @@
   }
 
   /* Transcript activity focused directly */
-  > :global(.webchat__focus-trap .webchat__bubble) {
+  > :global(.webchat__focus-trap > .webchat__basic-transcript__activity-body .webchat__bubble) {
     display: grid;
     grid-template-areas: 'focused-content';
     position: static;
@@ -334,17 +334,19 @@
     }
   }
 
-  &:has(:global(.collapsible-grouping)) > :global(.transcript-focus-area__indicator) {
-    border-radius: var(--webchat-borderRadiusXLarge);
+  &:has(:global(.collapsible-grouping)) > :global(.transcript-focus-area__content-overlay .transcript-focus-area__indicator) {
+    display: none;
+  }
+
+  :global(.collapsible-grouping)::after {
+    border-radius: var(--webchat__bubble--border-radius);
+    content: '';
     border: none;
-    box-sizing: content-box;
-    display: block;
-    height: calc(100% - var(--webchat-spacingVerticalXS));
-    margin: 0;
-    margin: var(--webchat-spacingVerticalXXS) calc(var(--webchat-spacingHorizontalSNudge) * -1);
     outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
-    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalSNudge);
-    width: 100%;
+    position: absolute;
+    pointer-events: none;
+    inset: 0;
+    isolation: isolate;
   }
 
   :global(.activity-decorator .webchat__bubble .webchat__bubble__nub-pad) {
@@ -373,6 +375,13 @@
   }
 }
 
+/* Transcript focused content copilot variant */
+:global(.webchat-fluent).theme.variant-copilot :global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) {
+  :global(.collapsible-grouping)::after {
+    inset: -2px -4px;
+  }
+}
+
 /* Transcript filer in copilot variant */
 :global(.webchat-fluent).theme.variant-copilot :global(.webchat__basic-transcript .webchat__basic-transcript__filler) {
   /* No filler unless pre-chat activity, see next rule */