[RPP] Alert state of sortable column state for 3P table

Bug:392649075
Change-Id: I541b7de6ac444c36081643441d5c7e537a19ab07
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6220266
Commit-Queue: Adriana Ixba <[email protected]>
Reviewed-by: Adam Raine <[email protected]>

Author: Adriana Ixba

front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -105,6 +105,11 @@ const UIStrings = {
    *@description Accessible text indicating an empty row is created.
    */
   emptyRowCreated: 'An empty table row has been created. You may double click or use context menu to edit.',
+  /**
+   *@description Text for screen reader to announce when focusing on a sortable column in data grid.
+   *@example {ascending} PH1
+   */
+  enterToSort: 'Column sort state: {PH1}. Press enter to apply sorting filter',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/data_grid/DataGrid.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1317,6 +1322,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     cell.classList.add(sortOrder);
     const ariaLabel = this.isSortOrderAscending() ? 'ascending' : 'descending';
     cell.setAttribute('aria-sort', ariaLabel);
+    UI.ARIAUtils.alert(i18nString(UIStrings.enterToSort, {PH1: ariaLabel || ''}));
 
     this.dispatchEventToListeners(Events.SORTING_CHANGED);
   }