add objects dialog (#23243)

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

@@ -22,9 +22,10 @@ import { ILogService } from 'vs/platform/log/common/log';
 	selector: 'modelview-groupContainer',
 	template: `
 		<div *ngIf="hasHeader()" [class]="getHeaderClass()" (click)="changeState()" (keydown)="onKeyDown($event)" [tabindex]="isCollapsible()? 0 : -1" [attr.role]="isCollapsible() ? 'button' : null" [attr.aria-expanded]="isCollapsible() ? !collapsed : null">
-				{{_containerLayout.header}}
+				{{header}}
 		</div>
 		<!-- This extra div is needed so that the expanded state of the header is updated correctly. See https://github.com/microsoft/azuredatastudio/pull/16499 for more details -->
+		<fieldset [attr.aria-label]="header" class="modelview-group-fieldset">
 		<div>
 			<div #container *ngIf="items" class="modelview-group-container" [ngStyle]="CSSStyles">
 				<ng-container *ngFor="let item of items">
@@ -37,6 +38,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 				</ng-container>
 			</div>
 		</div>
+		</fieldset>
 	`
 })
 export default class GroupContainer extends ContainerBase<GroupLayout, GroupContainerProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -95,6 +97,10 @@ export default class GroupContainer extends ContainerBase<GroupLayout, GroupCont
 		return this.getPropertyOrDefault<boolean>((props) => props.collapsed, false);
 	}
 
+	public get header(): string {
+		return this._containerLayout?.header;
+	}
+
 	private hasHeader(): boolean {
 		return this._containerLayout && !!this._containerLayout.header;
 	}

src/sql/workbench/browser/modelComponents/media/groupLayout.css

@@ -9,6 +9,13 @@
 	box-sizing: border-box;
 }
 
+.modelview-group-fieldset {
+	border: none;
+	margin-inline: 0px;
+	padding-inline: 0px;
+	padding-block: 0px;
+}
+
 .modelview-group-row {
 	display: table-row;
 }