Update Accessibility view's section title focus background

Before/After screenshots: https://g-issues.chromium.org/issues/433379039#comment3

Fixed: 433379039
Change-Id: Ic999f49da2cfbc39a05dd7bda492fc3de45e1b8d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6845662
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Changhao Han <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: hanselfmu-chromium

front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -26,6 +26,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
   private readonly sourceOrderSubPane: SourceOrderPane;
   private constructor(throttlingTimeout?: number) {
     super(false /* useShadowDom */, throttlingTimeout);
+    this.element.classList.add('accessibility-sidebar-view');
     this.nodeInternal = null;
     this.axNodeInternal = null;
     this.skipNextPullNode = false;

front_end/ui/legacy/viewContainers.css

@@ -1,3 +1,7 @@
+/* Copyright 2025 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. */
+
 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <[email protected]>
@@ -65,6 +69,10 @@
 
 .expandable-view-title:focus-visible {
   background-color: var(--sys-color-state-focus-highlight);
+
+  :host-context(.accessibility-sidebar-view) & {
+    background-color: var(--sys-color-tonal-container);
+  }
 }
 
 @media (forced-colors: active) {