fix(data-grid-cell): add button role announcement for screen readers (VIV-2606) (#2325)

* fix(data-grid-cell): add button role announcement for screen readers (VIV-2606)

* Update metadata

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: jhajduk-vonage

libs/components/metadata.json

@@ -1904,7 +1904,7 @@
 				},
 				{
 					"name": "gridTemplateColumns",
-					"description": "String that gets applied to the the css gridTemplateColumns attribute of child rows",
+					"description": "String that gets applied to the css gridTemplateColumns attribute of child rows",
 					"type": "string",
 					"attributeName": "grid-template-columns",
 					"propertyName": "gridTemplateColumns"

libs/components/src/lib/data-grid/data-grid-cell.spec.ts

@@ -303,6 +303,14 @@ describe('vwc-data-grid-cell', () => {
 			element.ariaSort = 'none';
 		});
 
+		it('should have a button role when sorting is enabled', async function () {
+			element.setAttribute('aria-sort', 'none');
+			await elementUpdated(element);
+			const baseElement = element.shadowRoot?.querySelector('.base');
+
+			expect(baseElement?.role).toEqual('button');
+		});
+
 		it('should show sort-solid icon in the header when "none" is set', async function () {
 			element.setAttribute('aria-sort', 'none');
 			await elementUpdated(element);

libs/components/src/lib/data-grid/data-grid-cell.template.ts

@@ -58,7 +58,10 @@ export const DataGridCellTemplate = (
 			@click="${(x) => x._handleInteraction()}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event as KeyboardEvent)}"
 		>
-			<div class="base">
+			<div
+				class="base"
+				role="${(x) => (shouldShowSortIcons(x) ? 'button' : undefined)}"
+			>
 				<slot></slot>
 				${(_) => renderSortIcons(context)}
 			</div>

libs/components/src/lib/data-grid/data-grid.ts

@@ -179,7 +179,7 @@ export class DataGrid extends VividElement {
 	}
 
 	/**
-	 * String that gets applied to the the css gridTemplateColumns attribute of child rows
+	 * String that gets applied to the css gridTemplateColumns attribute of child rows
 	 *
 	 * @public
 	 * @remarks