Improve screen reader announcement of bfcache test result

Issue:
After the test bfcache button is invoked, the re-renders and so focus is lost from the button to the devtools window resulting in incorrect and missing screenreader announcements.

Fix:
After rendering the results, we announce the tests were completed and keep focus on the results section view where the announcement happens.

Bug: 455905510
Change-Id: I15674c8291a703317dccad7dd42d57d23e231a62
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7090941
Reviewed-by: Wolfgang Beyer <[email protected]>
Commit-Queue: Sylvester Elorm Coch <[email protected]>

Author: ElormCoch

front_end/panels/application/components/BackForwardCacheView.ts

@@ -20,6 +20,7 @@ import * as RenderCoordinator from '../../../ui/components/render_coordinator/re
 import type * as ReportView from '../../../ui/components/report_view/report_view.js';
 import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -66,6 +67,10 @@ const UIStrings = {
    * page eligible for back/forward cache.
    */
   pageSupportNeeded: 'Actionable',
+  /**
+   * @description Label for the completion of the back/forward cache test
+   */
+  testCompleted: 'Back/forward cache test completed.',
   /**
    * @description Explanation for actionable items which prevent the page from being eligible
    * for back/forward cache.
@@ -279,7 +284,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateRe
     case true:
       // clang-format off
       return html`
-        <devtools-report-section>
+        <devtools-report-section class="cache-status-section" tabindex="-1">
           <div class="status extra-large">
             <devtools-icon class="inline-icon extra-large" name="check-circle" style="color: var(--icon-checkmark-green);">
             </devtools-icon>
@@ -290,7 +295,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateRe
     case false:
       // clang-format off
       return html`
-        <devtools-report-section>
+        <devtools-report-section class="cache-status-section" tabindex="-1">
           <div class="status">
             <devtools-icon class="inline-icon extra-large" name="clear">
             </devtools-icon>
@@ -301,7 +306,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateRe
   }
   // clang-format off
   return html`
-    <devtools-report-section>
+    <devtools-report-section class="cache-status-section" tabindex="-1">
       ${i18nString(UIStrings.unknown)}
     </devtools-report-section>`;
   // clang-format on
@@ -510,7 +515,13 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
         this.#renderBackForwardCacheTestResult, this);
     this.#screenStatus = ScreenStatusType.RESULT;
-    void this.render();
+    void this.render().then(() => {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.testCompleted));
+      const resultsSection = this.shadowRoot?.querySelector('.cache-status-section') as HTMLElement;
+      if (resultsSection) {
+        resultsSection.focus();
+      }
+    });
   }
 
   async #onNavigatedAway(): Promise<void> {

front_end/panels/application/components/backForwardCacheView.css

@@ -73,6 +73,10 @@ devtools-report-value:has(devtools-tree-outline) {
   margin-left: var(--sys-size-7);
 }
 
+.cache-status-section:focus-visible {
+ outline: 0;
+}
+
 .tree-outline li .selection {
   margin-left: -5px;
 }