diff --git a/extensions/sql-migration/src/wizard/databaseSelectorPage.ts b/extensions/sql-migration/src/wizard/databaseSelectorPage.ts index 20eb9f1602..93e756a079 100644 --- a/extensions/sql-migration/src/wizard/databaseSelectorPage.ts +++ b/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'; diff --git a/extensions/sql-migration/src/wizard/skuRecommendationPage.ts b/extensions/sql-migration/src/wizard/skuRecommendationPage.ts index 02e0cbe6c7..f46b342419 100644 --- a/extensions/sql-migration/src/wizard/skuRecommendationPage.ts +++ b/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([ diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index f4af490c08..4f8f5aa1ab 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/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 extends ComponentBuilder { /** * Sets the initial set of properties for the container being created diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index a23ea61949..26336f9862 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/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 { diff --git a/src/sql/workbench/browser/modelComponents/text.component.ts b/src/sql/workbench/browser/modelComponents/text.component.ts index bf9e74feff..a780fb5c39 100644 --- a/src/sql/workbench/browser/modelComponents/text.component.ts +++ b/src/sql/workbench/browser/modelComponents/text.component.ts @@ -34,7 +34,7 @@ const errorTextClass = 'error-text'; @Component({ selector: 'modelview-text', template: ` -
+
  • {{v}}
  • @@ -48,7 +48,7 @@ const errorTextClass = 'error-text';
-

+

*
-
+
` }) @@ -213,6 +213,10 @@ export default class TextComponent extends TitledComponent((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