[PatchWidget] Use a div for rendering saved-to-disk state

We need to use a non-interactive element
for the status state.

Fixed: 406080319
Change-Id: I4d3659e710d2f351cefc06fc0398af7772ee6364
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6440432
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/panels/ai_assistance/PatchWidget.ts

@@ -26,8 +26,6 @@ import * as PanelCommon from '../common/common.js';
 
 import {SelectWorkspaceDialog} from './SelectWorkspaceDialog.js';
 
-const {classMap} = Directives;
-
 /*
 * Strings that don't need to be translated at this time.
 */
@@ -383,22 +381,26 @@ export class PatchWidget extends UI.Widget.Widget {
         </div>`;
       }
 
-      render(
-        html`
-          <details class=${classMap({
-            'change-summary': true,
-            'saved-to-disk': Boolean(input.savedToDisk)
-          })}>
-            <summary>
+      // Use a simple div for the "Saved to disk" state as it's not expandable,
+      // otherwise use the interactive <details> element.
+      const template = input.savedToDisk
+        ? html`
+          <div class="change-summary saved-to-disk" role="status" aria-live="polite">
+            <div class="header-container">
+             ${renderHeader()}
+             </div>
+          </div>`
+        : html`
+          <details class="change-summary">
+            <summary class="header-container">
               ${renderHeader()}
             </summary>
             ${renderContent()}
             ${renderFooter()}
           </details>
-        `,
-        target,
-        {host: target}
-      );
+        `;
+
+      render(template, target, {host: target});
     });
     // clang-format on
     this.requestUpdate();

front_end/panels/ai_assistance/components/chatView.css

@@ -763,7 +763,7 @@ main {
     pointer-events: none;
   }
 
-  summary {
+  & .header-container {
     display: flex;
     align-items: center;
     gap: var(--sys-size-3);
@@ -807,7 +807,7 @@ main {
     }
   }
 
-  &:not(&[open]):hover::after {
+  &:not(.saved-to-disk, &[open]):hover::after {
     content: '';
     height: 100%;
     width: 100%;