From 029ea06790e44d697113f8ccc5054b9c6ade4841 Mon Sep 17 00:00:00 2001
From: Kim Santiago <31145923+kisantia@users.noreply.github.com>
Date: Tue, 5 Jul 2022 10:59:30 -0700
Subject: [PATCH] Add aria-label option for flexContainer for add db reference
 dialog to use (#19911)

---
 .../src/dialogs/addDatabaseReferenceDialog.ts                   | 2 +-
 .../browser/modelComponents/flexContainer.component.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts b/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts
index 23ecc6e3e7..2550bc550b 100644
--- a/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts
+++ b/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts
@@ -233,7 +233,7 @@ export class AddDatabaseReferenceDialog {
 		let flexRadioButtonsModel: azdataType.FlexContainer = this.view!.modelBuilder.flexContainer()
 			.withLayout({ flexFlow: 'column' })
 			.withItems([this.projectRadioButton, this.systemDatabaseRadioButton, dacpacRadioButton])
-			.withProps({ ariaRole: 'radiogroup' })
+			.withProps({ ariaRole: 'radiogroup', ariaLabel: constants.referenceRadioButtonsGroupTitle })
 			.component();
 
 		return {
diff --git a/src/sql/workbench/browser/modelComponents/flexContainer.component.ts b/src/sql/workbench/browser/modelComponents/flexContainer.component.ts
index 0245e2456f..274ecd7d25 100644
--- a/src/sql/workbench/browser/modelComponents/flexContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/flexContainer.component.ts
@@ -23,7 +23,7 @@ export class FlexItem {
 @Component({
 	template: `
 		<div *ngIf="items" class="flexContainer" [ngStyle]="CSSStyles" [style.display]="display" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
-				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width" [style.flex-wrap]="flexWrap" [attr.role]="ariaRole" [attr.aria-live] = "ariaLive">
+				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width" [style.flex-wrap]="flexWrap" [attr.role]="ariaRole" [attr.aria-live] = "ariaLive" [attr.aria-label]="ariaLabel">
 			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.textAlign]="textAlign" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>