Align thinking pill with greenlines when walkthrough is closed

Bug: 496838810
Change-Id: I071c82693e8210c65306f17cb7811a65a7f4f918
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7736551
Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

Author: Kateryna Prokopenko

front_end/panels/ai_assistance/components/ChatMessage.test.ts

@@ -344,6 +344,72 @@ describeWithEnvironment('ChatMessage', () => {
       assert.strictEqual(button.innerText, 'Investigating XYZ');
     });
 
+    it('accessible label appends "Show thinking" when showing step title', async () => {
+      const loadingMessage: AiAssistance.ChatMessage.ModelChatMessage = {
+        entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
+        parts: [{
+          type: 'step',
+          step: {
+            isLoading: true,
+            title: 'Investigating XYZ',
+            code: 'console.log("test")',
+          },
+        }],
+        rpcId: 99,
+      };
+      const target = renderView({
+        isLoading: true,
+        message: loadingMessage,
+        walkthrough: {
+          ...DEFAULT_WALKTHROUGH,
+          isInlined: false,
+        }
+      });
+      const button = querySelectorErrorOnMissing(target, '[data-show-walkthrough]');
+      assert.strictEqual(button.getAttribute('accessibleLabel'), 'Investigating XYZ Show thinking');
+    });
+
+    it('accessible label appends "Show thinking" when showing paused state', async () => {
+      const pausedMessage: AiAssistance.ChatMessage.ModelChatMessage = {
+        entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
+        parts: [{
+          type: 'step',
+          step: {
+            isLoading: false,
+            title: 'Set background color to red',
+            requestApproval: {
+              description: 'Confirm!',
+              onAnswer: () => {},
+            },
+          },
+        }],
+        rpcId: 99,
+      };
+      const target = renderView({
+        isLoading: false,
+        message: pausedMessage,
+        walkthrough: {
+          ...DEFAULT_WALKTHROUGH,
+          isInlined: false,
+        }
+      });
+      const button = querySelectorErrorOnMissing(target, '[data-show-walkthrough]');
+      assert.strictEqual(button.getAttribute('accessibleLabel'), 'Set background color to red Show thinking');
+    });
+
+    it('accessible label defaults to visible text when generic', async () => {
+      const target = renderView({
+        isLoading: false,
+        message: stepMessage,
+        walkthrough: {
+          ...DEFAULT_WALKTHROUGH,
+          isInlined: false,
+        }
+      });
+      const button = querySelectorErrorOnMissing(target, '[data-show-walkthrough]');
+      assert.strictEqual(button.getAttribute('accessibleLabel'), 'Show thinking');
+    });
+
     it('does not render "Show thinking" button when inline', () => {
       const target = renderView({
         message: stepMessage,

front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -204,6 +204,10 @@ const UIStringsNotTranslate = {
    * @description Title for the bottom up thread activity widget.
    */
   bottomUpTree: 'Bottom-up thread activity',
+  /**
+   * @description Accessilility label for the button that shows the walkthrough when there are no widgets in the walkthrough.
+   */
+  showThinking: 'Show thinking',
 } as const;
 
 export interface Step {
@@ -571,6 +575,14 @@ function renderWalkthroughSidebarButton(
     // We only apply the widget styling when loading is complete
     'has-widgets': hasOneStepWithWidget && !input.isLoading,
   });
+
+  let accessibleLabel = title;
+  if (!isExpanded) {
+    if (input.isLoading || lastStep.requestApproval) {
+      accessibleLabel = `${titleForStep(lastStep)} ${i18n.i18n.lockedString(UIStringsNotTranslate.showThinking)}`;
+    }
+  }
+
   // clang-format off
   return html`
     <div class=${toggleContainerClasses}>
@@ -581,6 +593,7 @@ function renderWalkthroughSidebarButton(
         .variant=${variant}
         .size=${Buttons.Button.Size.SMALL}
         .title=${lastStep.isLoading ? titleForStep(lastStep) : title}
+        .accessibleLabel=${accessibleLabel}
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {