Adding aria role to hyperlink cell in slickgrid (#21998)

* Adding aria role to hyperlink

* Adding default

extensions/sql-migration/src/dashboard/migrationsListTab.ts

@@ -414,11 +414,13 @@ export class MigrationsListTab extends TabBase<MigrationsListTab> {
 					<azdata.HyperlinkColumnCellValue>{
 						icon: IconPathHelper.sqlDatabaseLogo,
 						title: migration.properties.sourceDatabaseName ?? EmptySettingValue,
+						role: 'button'
 					},															// sourceDatabase
 					migration.properties.sourceServerName ?? EmptySettingValue, // sourceServer
 					<azdata.HyperlinkColumnCellValue>{
 						icon: getMigrationStatusImage(migration),
 						title: getMigrationStatusWithErrors(migration),
+						role: 'button'
 					},															// statue
 					getMigrationMode(migration),								// mode
 					getMigrationTargetType(migration),							// targetType

src/sql/azdata.proposed.d.ts

@@ -749,6 +749,10 @@ declare module 'azdata' {
 		 * The url to open.
 		 */
 		url?: string;
+		/**
+		 * The role of the hyperlink. By default, the role is 'link' and the url will be opened in a new tab.
+		 */
+		role?: 'button' | 'link';
 	}
 
 	export interface ContextMenuColumnCellValue {

src/sql/base/browser/ui/table/plugins/hyperlinkColumn.plugin.ts

@@ -11,6 +11,7 @@ export interface HyperlinkCellValue {
 	iconCssClass?: string;
 	title: string;
 	url?: string;
+	role?: 'button' | 'link';
 }
 
 export interface HyperlinkColumnOptions extends IconColumnOptions, ClickableColumnOptions {
@@ -32,7 +33,7 @@ export class HyperlinkColumn<T extends Slick.SlickData> extends BaseClickableCol
 				const cssClasses = iconValue.iconCssClass ? `codicon icon slick-plugin-icon ${iconValue.iconCssClass}` : '';
 				const urlPart = cellValue?.url ? `href="${encodeURI(cellValue.url)}" target="blank"` : '';
 				const disabledAttribute = this.isCellEnabled(row, cell) ? '' : 'disabled';
-				return `<a ${urlPart} class="slick-hyperlink-cell ${cssClasses}" tabindex=-1 title="${escapedTitle}" aria-label="${escapedTitle}" ${disabledAttribute}>${escapedTitle}</a>`;
+				return `<a ${urlPart} class="slick-hyperlink-cell ${cssClasses}" tabindex=-1 title="${escapedTitle}" aria-label="${escapedTitle}" role="${cellValue.role ?? 'link'}" ${disabledAttribute}>${escapedTitle}</a>`;
 			},
 			name: this.options.name,
 			resizable: true,

src/sql/workbench/browser/modelComponents/table.component.ts

@@ -205,7 +205,8 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 									cellValue = <HyperlinkCellValue>{
 										iconCssClass: hyperlinkValue.icon ? this.createIconCssClassInternal(hyperlinkValue.icon) : undefined,
 										title: hyperlinkValue.title,
-										url: hyperlinkValue.url
+										url: hyperlinkValue.url,
+										role: hyperlinkValue.role
 									};
 									break;
 								}