[RPP a11y] Ensure column headers announce that they are sortable

Improvement follow up. Initially there were no voice over announcements
that the column headers are sortable. This fixes that.

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

Author: Adriana Ixba

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

@@ -110,6 +110,10 @@ const UIStrings = {
    *@example {ascending} PH1
    */
   enterToSort: 'Column sort state: {PH1}. Press enter to apply sorting filter',
+  /**
+   *@description Label for sortable column headers.
+   */
+  sortableColumn: 'Sortable column. 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_);
@@ -456,6 +460,10 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const icon = document.createElement('span');
       icon.className = 'sort-order-icon';
       cell.createChild('div', 'sort-order-icon-container').appendChild(icon);
+
+      if (column.title) {
+        UI.ARIAUtils.setLabel(cell, i18nString(UIStrings.sortableColumn));
+      }
     }
   }