Adding arialive to text (#20242)

extensions/sql-migration/src/wizard/databaseSelectorPage.ts

@@ -154,7 +154,8 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 			CSSStyles: {
 				...styles.BODY_CSS,
 				'margin-top': '8px'
-			}
+			},
+			ariaLive: 'polite'
 		}).component();
 
 		const cssClass = 'no-borders';

extensions/sql-migration/src/wizard/skuRecommendationPage.ts

@@ -403,7 +403,8 @@ export class SKURecommendationPage extends MigrationWizardPage {
 		this._databaseSelectedHelperText = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
 				...styles.BODY_CSS,
-			}
+			},
+			ariaLive: 'polite'
 		}).component();
 
 		const container = this._view.modelBuilder.flexContainer().withItems([

src/sql/azdata.proposed.d.ts

@@ -1545,6 +1545,13 @@ declare module 'azdata' {
 		link: LinkArea;
 	}
 
+	export interface TextComponentProperties {
+		/**
+		 * Corresponds to the aria-live accessibility attribute for this component
+		 */
+		ariaLive?: string;
+	}
+
 	export interface ContainerBuilder<TComponent extends Component, TLayout, TItemLayout, TPropertyBag extends ContainerProperties> extends ComponentBuilder<TComponent, TPropertyBag> {
 		/**
 		 * Sets the initial set of properties for the container being created

src/sql/workbench/api/common/extHostModelView.ts

@@ -1390,6 +1390,14 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
 	public set textType(type: azdata.TextType | undefined) {
 		this.setProperty('textType', type);
 	}
+
+	public get ariaLive(): string | undefined {
+		return this.properties['ariaLive'];
+	}
+
+	public set ariaLive(ariaLive: string | undefined) {
+		this.setProperty('ariaLive', ariaLive);
+	}
 }
 
 class ImageComponentWrapper extends ComponentWithIconWrapper implements azdata.ImageComponentProperties {

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

@@ -34,7 +34,7 @@ const errorTextClass = 'error-text';
 @Component({
 	selector: 'modelview-text',
 	template: `
-	<div *ngIf="showList;else noList" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles">
+	<div *ngIf="showList;else noList" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles" [attr.aria-live]="ariaLive">
 		<div *ngIf="isUnOrderedList;else orderedlist">
 			<ul style="padding-left:0px">
 				<li *ngFor="let v of value">{{v}}</li>
@@ -48,7 +48,7 @@ const errorTextClass = 'error-text';
 	</div>
 	<ng-template #noList>
 		<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
-			<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
+			<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [attr.aria-live]="ariaLive"></p>
 			<div #textContainer id="textContainer"></div>
 			<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
 			<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img" (mouseenter)="showTooltip($event)" (focus)="showTooltip($event)" (keydown)="onDescriptionKeyDown($event)">
@@ -56,7 +56,7 @@ const errorTextClass = 'error-text';
 			</div>
 		</div>
 		<ng-template #noDiv>
-			<div #textContainer id="textContainer" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles"></div>
+			<div #textContainer id="textContainer" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [attr.aria-live]="ariaLive" [ngStyle]="this.CSSStyles"></div>
 		</ng-template>
 	</ng-template>`
 })
@@ -213,6 +213,10 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		return this.requiredIndicator || !!this.description;
 	}
 
+	public get ariaLive(): string | undefined {
+		return this.getPropertyOrDefault<string | undefined>((props) => props.ariaLive, undefined);
+	}
+
 	/**
 	 * Creates the appropriate text element based on the type of text component (regular or header) this is
 	 * @returns The text element