RPP: announce to screen readers that the label is generating

This CL ensures that the loading status is announced to screen readers.

It also fixed a bug where we were announcing selected events too eagerly
even when the selection hadn't changed, and the same with empty labels.
I turned on voice over and got very overwhelmed!

Fixed: 407047308
Change-Id: I63abd5a16ab8147bb185ad2d853595b267a09ff5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6415788
Reviewed-by: Alina Varkki <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/timeline/AnnotationHelpers.test.ts

@@ -139,6 +139,13 @@ describe('AnnotationHelpers', () => {
       assert.strictEqual(text, 'The entry label annotation has been added');
     });
 
+    it('does not return an announcement for new empty labels', async () => {
+      const overlay: Overlays.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: ''};
+      const event = new Timeline.ModificationsManager.AnnotationModifiedEvent(overlay, 'Add');
+      const text = ariaAnnouncementForModifiedEvent(event);
+      assert.isNull(text);
+    });
+
     it('returns text for an annotation having its label updated', async () => {
       const overlay: Overlays.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
       const event = new Timeline.ModificationsManager.AnnotationModifiedEvent(overlay, 'UpdateLabel');

front_end/panels/timeline/AnnotationHelpers.ts

@@ -164,7 +164,8 @@ export function ariaDescriptionForOverlay(overlay: Overlays.Overlays.TimelineOve
     return i18nString(UIStrings.entriesLink);
   }
   if (isEntryLabel(overlay)) {
-    return i18nString(UIStrings.entryLabel);
+    // Don't announce an empty label
+    return overlay.label.length > 0 ? i18nString(UIStrings.entryLabel) : null;
   }
 
   // Not an annotation overlay: ignore.

front_end/panels/timeline/TimelinePanel.ts

@@ -78,6 +78,7 @@ import {
   rangeForSelection,
   selectionFromEvent,
   selectionIsRange,
+  selectionsEqual,
   type TimelineSelection,
 } from './TimelineSelection.js';
 import timelineStatusDialogStyles from './timelineStatusDialog.css.js';
@@ -2665,6 +2666,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
 
+    if (oldSelection && selectionsEqual(oldSelection, newSelection)) {
+      // Don't announce to the user if the selection has not changed.
+      return;
+    }
+
     if (selectionIsRange(newSelection)) {
       // We don't announce here; within the annotations code we announce when
       // the user creates a new time range selection. So if we also announce

front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -523,6 +523,7 @@ export class EntryLabelOverlay extends HTMLElement {
       try {
         // Trigger a re-render to display the loading component in the place of the button when the label is being generated.
         this.#isAILabelLoading = true;
+        UI.ARIAUtils.alert(UIStringsNotTranslate.generatingLabel);
         // Trigger a re-render to put focus back on the input box, otherwise
         // when the button changes to a loading spinner, it loses focus and the
         // editing state is reset because the component loses focus.