[DevTools a11y] Adds base AccessibilityAnnouncementRecordingView and connects with flag Flag added in: https://chromium-review.git.corp.google.com/c/chromium/src/+/8196809 Bug: 527462118 Change-Id: Ia31e47f3fe16130a920b88de08e140e188364052 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/8163509 Reviewed-by: Philip Pfaffe <pfaffe@chromium.org> Commit-Queue: Miguel Ruiz <migueloruiz@google.com> Reviewed-by: Simon Zünd <szuend@chromium.org>
diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 55df20f..1cc7043 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni
@@ -1387,6 +1387,7 @@ "front_end/models/workspace_diff/WorkspaceDiff.js", "front_end/panels/accessibility/ARIAAttributesView.js", "front_end/panels/accessibility/ARIAMetadata.js", + "front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.js", "front_end/panels/accessibility/AccessibilityNodeView.js", "front_end/panels/accessibility/AccessibilitySidebarView.js", "front_end/panels/accessibility/AccessibilityStrings.js",
diff --git a/front_end/core/root/Runtime.ts b/front_end/core/root/Runtime.ts index b0d0750..6f80e48 100644 --- a/front_end/core/root/Runtime.ts +++ b/front_end/core/root/Runtime.ts
@@ -540,6 +540,10 @@ enabled: boolean; } +interface DevToolsAriaLiveRecording { + enabled: boolean; +} + /** * The host configuration that we expect from the DevTools back-end. * @@ -595,6 +599,7 @@ devToolsAdsPanel: DevToolsAdsPanel, devToolsUseGcaApi: UseGcaApi, devToolsPlusButton: DevToolsPlusButton, + devToolsAriaLiveRecording: DevToolsAriaLiveRecording, devToolsInstrumentationBreakpoints: DevToolsInstrumentationBreakpoints, extensionsOnChromeUrls: ExtensionsOnChromeUrls, devToolsComments: HostConfigDevToolsComments,
diff --git a/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts b/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts new file mode 100644 index 0000000..ecdd3a5 --- /dev/null +++ b/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts
@@ -0,0 +1,25 @@ +// Copyright 2026 The Chromium Authors +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import * as i18n from '../../core/i18n/i18n.js'; + +import {AccessibilitySubPane} from './AccessibilitySubPane.js'; + +const UIStrings = { + /** + * @description Title for the ARIA-Live and JS announcements recording tool + */ + ariaLiveRecording: 'A11y Announcements recording', +} as const; +const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingView.ts', UIStrings); +const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); + +export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane { + constructor() { + super({ + title: i18nString(UIStrings.ariaLiveRecording), + viewId: 'aria-live-recording', + }); + } +}
diff --git a/front_end/panels/accessibility/AccessibilitySidebarView.test.ts b/front_end/panels/accessibility/AccessibilitySidebarView.test.ts index 7b040f2..46ce8c7 100644 --- a/front_end/panels/accessibility/AccessibilitySidebarView.test.ts +++ b/front_end/panels/accessibility/AccessibilitySidebarView.test.ts
@@ -9,7 +9,12 @@ import * as SDK from '../../core/sdk/sdk.js'; import type * as Protocol from '../../generated/protocol.js'; import {assertScreenshot, renderElementIntoDOM} from '../../testing/DOMHelpers.js'; -import {createTarget, describeWithEnvironment, stubNoopSettings} from '../../testing/EnvironmentHelpers.js'; +import { + createTarget, + describeWithEnvironment, + stubNoopSettings, + updateHostConfig, +} from '../../testing/EnvironmentHelpers.js'; import {MockCDPConnection} from '../../testing/MockCDPConnection.js'; import * as UI from '../../ui/legacy/legacy.js'; @@ -39,7 +44,7 @@ afterEach(() => { UI.ActionRegistration.maybeRemoveActionExtension('elements.toggle-a11y-tree'); - view.detach(); + view?.detach(); }); it('notifies ViewManager when visibility is toggled', async () => { @@ -101,4 +106,18 @@ renderElementIntoDOM(view, {includeCommonStyles: true}); await assertScreenshot('accessibility/accessibility_sidebar_view.png'); }); + + it('shows announcement recording subpane when enabled in hostConfig', async () => { + updateHostConfig({devToolsAriaLiveRecording: {enabled: true}}); + view = Accessibility.AccessibilitySidebarView.AccessibilitySidebarView.instance({forceNew: true}); + renderElementIntoDOM(view); + assert.isTrue(UI.ViewManager.ViewManager.instance().hasView('aria-live-recording')); + }); + + it('does not show announcement recording subpane when disabled in hostConfig', async () => { + updateHostConfig({devToolsAriaLiveRecording: {enabled: false}}); + view = Accessibility.AccessibilitySidebarView.AccessibilitySidebarView.instance({forceNew: true}); + renderElementIntoDOM(view); + assert.isFalse(UI.ViewManager.ViewManager.instance().hasView('aria-live-recording')); + }); });
diff --git a/front_end/panels/accessibility/AccessibilitySidebarView.ts b/front_end/panels/accessibility/AccessibilitySidebarView.ts index f781c58..94a0b83 100644 --- a/front_end/panels/accessibility/AccessibilitySidebarView.ts +++ b/front_end/panels/accessibility/AccessibilitySidebarView.ts
@@ -7,10 +7,14 @@ import type * as Common from '../../core/common/common.js'; import * as i18n from '../../core/i18n/i18n.js'; +import * as Root from '../../core/root/root.js'; import * as SDK from '../../core/sdk/sdk.js'; import * as UI from '../../ui/legacy/legacy.js'; import * as Lit from '../../ui/lit/lit.js'; +import { + AccessibilityAnnouncementRecordingView, +} from './AccessibilityAnnouncementRecordingView.js'; import {AXNodeSubPane} from './AccessibilityNodeView.js'; import accessibilitySidebarViewStyles from './accessibilitySidebarView.css.js'; import {ARIAAttributesPane} from './ARIAAttributesView.js'; @@ -37,6 +41,7 @@ private readonly ariaSubPane: ARIAAttributesPane; private readonly axNodeSubPane: AXNodeSubPane; private readonly sourceOrderSubPane: SourceOrderPane; + private readonly announcementsRecordingSubPane?: AccessibilityAnnouncementRecordingView; private readonly toggleContainer: HTMLElement; private readonly toggleAction: UI.ActionRegistration.Action; @@ -63,6 +68,10 @@ void this.sidebarPaneStack.showView(this.axNodeSubPane); this.sourceOrderSubPane = new SourceOrderPane(); void this.sidebarPaneStack.showView(this.sourceOrderSubPane); + if (Boolean(Root.Runtime.hostConfig.devToolsAriaLiveRecording?.enabled)) { + this.announcementsRecordingSubPane = new AccessibilityAnnouncementRecordingView(); + void this.sidebarPaneStack.showView(this.announcementsRecordingSubPane); + } this.sidebarPaneStack.widget().show(this.element); UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.pullNode, this); this.pullNode();
diff --git a/front_end/panels/accessibility/BUILD.gn b/front_end/panels/accessibility/BUILD.gn index b7d27dd..b4f7c3e 100644 --- a/front_end/panels/accessibility/BUILD.gn +++ b/front_end/panels/accessibility/BUILD.gn
@@ -21,6 +21,7 @@ sources = [ "ARIAAttributesView.ts", "ARIAMetadata.ts", + "AccessibilityAnnouncementRecordingView.ts", "AccessibilityNodeView.ts", "AccessibilitySidebarView.ts", "AccessibilityStrings.ts", @@ -32,6 +33,7 @@ "../../core/common:bundle", "../../core/i18n:bundle", "../../core/platform:bundle", + "../../core/root:bundle", "../../core/sdk:bundle", "../../generated", "../../ui/components/switch:bundle",
diff --git a/front_end/panels/accessibility/accessibility.ts b/front_end/panels/accessibility/accessibility.ts index 1abad3a..5b7472e 100644 --- a/front_end/panels/accessibility/accessibility.ts +++ b/front_end/panels/accessibility/accessibility.ts
@@ -2,6 +2,7 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. +import * as AccessibilityAnnouncementRecordingView from './AccessibilityAnnouncementRecordingView.js'; import * as AccessibilityNodeView from './AccessibilityNodeView.js'; import * as AccessibilitySidebarView from './AccessibilitySidebarView.js'; import * as AccessibilityStrings from './AccessibilityStrings.js'; @@ -10,6 +11,7 @@ import * as ARIAMetadata from './ARIAMetadata.js'; export { + AccessibilityAnnouncementRecordingView, AccessibilityNodeView, AccessibilitySidebarView, AccessibilityStrings,
diff --git a/front_end/ui/visual_logging/KnownContextValues.ts b/front_end/ui/visual_logging/KnownContextValues.ts index d591596..dd0ae4f 100644 --- a/front_end/ui/visual_logging/KnownContextValues.ts +++ b/front_end/ui/visual_logging/KnownContextValues.ts
@@ -510,6 +510,7 @@ 'ar', 'architecture', 'aria-attributes', + 'aria-live-recording', 'arial', 'as', 'ascent-override',