From e7dfa3b3165e57b7a4e6d46c25d079caa51d0290 Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-530
 <111882034+GCHQ-Developer-530@users.noreply.github.com>
Date: Mon, 24 Feb 2025 11:51:31 +0000
Subject: [PATCH] fix(canary-web-components): update the screen reader text on
 data table to use column title

Update the screen reader text on data table to use column title instead of key when sorting columns

. #3015
---
 .../src/components/ic-data-table/ic-data-table.tsx           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
index fbee54e71f..0ddd32f953 100644
--- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
+++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
@@ -2310,7 +2310,10 @@ export class DataTable {
           {sortable && (
             <div class="screen-reader-sort-text" aria-live="polite">
               {sortedColumnOrder !== "unsorted" && sortedColumn
-                ? `${sortedColumn} sorted ${sortedColumnOrder}`
+                ? `${
+                    this.columns.find((col) => col.key === sortedColumn)
+                      ?.title || sortedColumn
+                  } sorted ${sortedColumnOrder}`
                 : "table unsorted"}
             </div>
           )}