From f7a723d98dc1bd59e1ec813e2b00c6f0cea8d441 Mon Sep 17 00:00:00 2001
From: Chris LaFreniere <40371649+chlafreniere@users.noreply.github.com>
Date: Wed, 23 Jun 2021 16:48:01 -0700
Subject: [PATCH] Notebooks A11Y: Add button role for Placeholder Links
 (#15851)

* Add button role

* Add aria-label

* localize aria label
---
 .../browser/cellViews/placeholderCell.component.html      | 2 +-
 .../browser/cellViews/placeholderCell.component.ts        | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.html b/src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.html
index 287e17c464..27a6fa1c63 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.html
@@ -7,7 +7,7 @@
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
 	<div class="placeholder-cell-component" style="flex: 0 0 auto;">
 		<div class="placeholder-cell-component text">
-			<p>{{clickOn}} <a id="addCode" href="#" (click)="addCell('code', $event)">{{plusCode}}</a> {{or}} <a id="addMarkdown" href="#" (click)="addCell('markdown', $event)">{{plusText}}</a> {{toAddCell}}</p>
+			<p>{{clickOn}} <a id="addCode" href="#" role="button" [attr.aria-label]=plusCodeAriaLabel (click)="addCell('code', $event)">{{plusCode}}</a> {{or}} <a id="addMarkdown" href="#" role="button" [attr.aria-label]=plusTextAriaLabel (click)="addCell('markdown', $event)">{{plusText}}</a> {{toAddCell}}</p>
 		</div>
 	</div>
 </div>
diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.ts
index e6e594e5dc..0c640ec781 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.ts
@@ -68,6 +68,14 @@ export class PlaceholderCellComponent extends CellView implements OnInit, OnChan
 		return localize('toAddCell', "to add a code or text cell");
 	}
 
+	get plusCodeAriaLabel(): string {
+		return localize('plusCodeAriaLabel', "Add a code cell");
+	}
+
+	get plusTextAriaLabel(): string {
+		return localize('plusTextAriaLabel', "Add a text cell");
+	}
+
 	public addCell(cellType: string, event?: Event): void {
 		if (event) {
 			event.preventDefault();