@microsoft/windows-admin-center-sdk 4.167.0 → 4.232.0

package/angular/fesm2020/microsoft-windows-admin-center-sdk-angular.mjs

@@ -7,7 +7,7 @@ import { LogLevel } from '@microsoft/windows-admin-center-sdk/core/diagnostics/l
 import { Logging } from '@microsoft/windows-admin-center-sdk/core/diagnostics/logging';
 import { __decorate, __metadata, __param } from 'tslib';
 import { Debounce as Debounce$1 } from '@microsoft/windows-admin-center-sdk/core/base/decorators/debounce.decorators';
-import { Dom, ElementPosition } from '@microsoft/windows-admin-center-sdk/core/dom/dom';
+import { Dom } from '@microsoft/windows-admin-center-sdk/core/dom/dom';
 import { marked } from 'marked';
 import * as i1$1 from '@angular/common';
 import { Location, CommonModule, DatePipe } from '@angular/common';
@@ -20,6 +20,7 @@ import { ActiveConnection } from '@microsoft/windows-admin-center-sdk/core/secur
 import { CimConnection } from '@microsoft/windows-admin-center-sdk/core/data/cim-connection';
 import { BatchConnection } from '@microsoft/windows-admin-center-sdk/core/data/batch-connection';
 import { AuthorizationManager } from '@microsoft/windows-admin-center-sdk/core/security/authorization-manager';
+import * as i1$3 from '@microsoft/windows-admin-center-sdk/core/rpc/rpc';
 import { Rpc } from '@microsoft/windows-admin-center-sdk/core/rpc/rpc';
 import { GatewayConnection } from '@microsoft/windows-admin-center-sdk/core/data/gateway-connection';
 import { Http } from '@microsoft/windows-admin-center-sdk/core/data/http';
@@ -44,10 +45,12 @@ import { Globalization } from '@microsoft/windows-admin-center-sdk/core/data/glo
 import { KeyCode } from '@microsoft/windows-admin-center-sdk/core/data/accessibility-manager';
 import { Yield as Yield$1 } from '@microsoft/windows-admin-center-sdk/core/base/decorators/yield.decorator';
 import { TagManager } from '@microsoft/windows-admin-center-sdk/core/security/tag-manager';
+import * as i2 from '@microsoft/windows-admin-center-sdk/core/data/extension-broker/extension-broker';
 import { ExtensionBroker } from '@microsoft/windows-admin-center-sdk/core/data/extension-broker/extension-broker';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, ControlContainer, Validators, FormsModule, ReactiveFormsModule, FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms';
 import { Net } from '@microsoft/windows-admin-center-sdk/core/data/net';
+import { Debounce as Debounce$2 } from '@microsoft/windows-admin-center-sdk/core/index';
 import { DateTime } from '@microsoft/windows-admin-center-sdk/core/base/date/date-time';
 import { DateType } from '@microsoft/windows-admin-center-sdk/core/base/date/date-type';
 import { TimeUnit } from '@microsoft/windows-admin-center-sdk/core/base/date/time-unit';
@@ -83,6 +86,7 @@ import { ScheduleRebootManager } from '@microsoft/windows-admin-center-sdk/core/
 import { headerConstants } from '@microsoft/windows-admin-center-sdk/core/data/http-constants';
 import { RpcObservableExtensionDataClient } from '@microsoft/windows-admin-center-sdk/core/rpc/extension-data/rpc-observable-extension-data-client';
 import { SmeExtension } from '@microsoft/windows-admin-center-sdk/core/data/sme-extension';
+import { ExtensionClientListener } from '@microsoft/windows-admin-center-sdk/core/data/extension-broker/extension-listener';
 
 /**
  * Directive to provide notification or state changes for angulars @see RouterLink directive.
@@ -3547,7 +3551,7 @@ class TooltipHostInstance {
     }], null, null); })();
 
 const _c0$1I = ["tooltipContainer"];
-const _c1$T = ["tooltipPointer"];
+const _c1$V = ["tooltipPointer"];
 function TooltipHostComponent_div_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementContainer(1, 10);
@@ -3918,7 +3922,7 @@ TooltipHostComponent.SCREEN_EDGE_MARGIN = 16;
 /** @nocollapse */ TooltipHostComponent.ɵfac = function TooltipHostComponent_Factory(t) { return new (t || TooltipHostComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.NgZone)); };
 /** @nocollapse */ TooltipHostComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TooltipHostComponent, selectors: [["sme-tooltip-host"]], viewQuery: function TooltipHostComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1I, 5);
-        i0.ɵɵviewQuery(_c1$T, 5);
+        i0.ɵɵviewQuery(_c1$V, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltipContainer = _t.first);
@@ -5151,12 +5155,12 @@ class ExtensionRootModule {
         BackgroundExtensionRootComponent] }); })();
 
 const _c0$1G = ["*"];
-const _c1$S = function (a0, a1) { return { "sme-icon-chevronDown": a0, "sme-icon-chevronRight": a1 }; };
+const _c1$U = function (a0, a1) { return { "sme-icon-chevronDown": a0, "sme-icon-chevronRight": a1 }; };
 function AccordionPanelComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 7);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$S, ctx_r1.opened, !ctx_r1.opened));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$U, ctx_r1.opened, !ctx_r1.opened));
 } }
 function AccordionPanelComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
@@ -5169,9 +5173,17 @@ function AccordionPanelComponent_div_8_Template(rf, ctx) { if (rf & 1) {
 const _c2$n = [[["sme-panel-control"]], "*"];
 const _c3$e = ["sme-panel-control", "*"];
 class PanelControlComponent {
+    constructor() {
+        /**
+         * Best effort to make sure the buttons, texts can be focused.
+         */
+        this.defaultFocusZone = true;
+    }
 }
 /** @nocollapse */ PanelControlComponent.ɵfac = function PanelControlComponent_Factory(t) { return new (t || PanelControlComponent)(); };
-/** @nocollapse */ PanelControlComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: PanelControlComponent, selectors: [["sme-panel-control"]], ngContentSelectors: _c0$1G, decls: 1, vars: 0, template: function PanelControlComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ PanelControlComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: PanelControlComponent, selectors: [["sme-panel-control"]], hostVars: 2, hostBindings: function PanelControlComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        i0.ɵɵclassProp("sme-focus-zone", ctx.defaultFocusZone);
+    } }, ngContentSelectors: _c0$1G, decls: 1, vars: 0, template: function PanelControlComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵprojection(0);
     } }, encapsulation: 2 });
@@ -5181,9 +5193,21 @@ class PanelControlComponent {
                 selector: 'sme-panel-control',
                 template: '<ng-content></ng-content>'
             }]
-    }], null, null); })();
+    }], null, { defaultFocusZone: [{
+            type: HostBinding,
+            args: ['class.sme-focus-zone']
+        }] }); })();
 class AccordionPanelComponent {
     constructor() {
+        /**
+         * It indicates whether the panel is opened.
+         */
+        this.opened = true;
+        /**
+         * It indicates whether the panel is initially opened.
+         * This value will no longer be respected after the control fully loaded.
+         */
+        this.initialOpened = true;
         /**
          * It indicates whether the panel is expandable.
          */
@@ -5199,21 +5223,24 @@ class AccordionPanelComponent {
          */
         this.paddingInset = false;
         this.toggled = new EventEmitter();
-        this.opened = true;
+    }
+    ngOnInit() {
+        this.opened = !!this.initialOpened;
         this.canClose = this.isExpandable;
     }
     /**
      * The on toggle function implementation.
      */
     onToggle() {
-        if (this.isExpandable) {
-            this.opened = !this.opened;
-            this.toggled.emit(this);
+        if (!this.isExpandable) {
+            return;
         }
+        this.opened = !this.opened;
+        this.toggled.emit(this);
     }
 }
 /** @nocollapse */ AccordionPanelComponent.ɵfac = function AccordionPanelComponent_Factory(t) { return new (t || AccordionPanelComponent)(); };
-/** @nocollapse */ AccordionPanelComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: AccordionPanelComponent, selectors: [["sme-accordion-panel"]], inputs: { header: "header", opened: "opened", isExpandable: "isExpandable", borderRadius: "borderRadius", paddingInset: "paddingInset" }, outputs: { toggled: "toggled" }, ngContentSelectors: _c3$e, decls: 9, vars: 14, consts: [[1, "sme-accordion-panel"], [1, "sme-arrange-stack-h", "sme-panel-header", "sme-layout-flex", "sme-position-flex-align-center"], [1, "sme-button", "sme-button-align-left", "sme-button-trigger", "sme-position-flex-auto", "sme-panel-expander", 3, "click"], ["accordionPanelButton", ""], ["class", "sme-position-flex-none sme-icon sme-position-stretch-v", 3, "ngClass", 4, "ngIf"], [1, "sme-arrange-ellipsis", "sme-position-stretch-v", 3, "title"], ["class", "sme-panel-body", 3, "sme-padding-inset-sm", 4, "ngIf"], [1, "sme-position-flex-none", "sme-icon", "sme-position-stretch-v", 3, "ngClass"], [1, "sme-panel-body"]], template: function AccordionPanelComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ AccordionPanelComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: AccordionPanelComponent, selectors: [["sme-accordion-panel"]], inputs: { header: "header", initialOpened: "initialOpened", isExpandable: "isExpandable", borderRadius: "borderRadius", paddingInset: "paddingInset" }, outputs: { toggled: "toggled" }, ngContentSelectors: _c3$e, decls: 9, vars: 16, consts: [[1, "sme-accordion-panel"], [1, "sme-arrange-stack-h", "sme-panel-header", "sme-layout-flex", "sme-position-flex-align-center"], ["tabindex", "0", 1, "sme-button", "sme-button-align-left", "sme-button-trigger", "sme-position-flex-auto", "sme-panel-expander", 3, "click"], ["accordionPanelButton", ""], ["class", "sme-position-flex-none sme-icon sme-position-stretch-v", 3, "ngClass", 4, "ngIf"], [1, "sme-arrange-ellipsis", "sme-position-stretch-v", 3, "title"], ["class", "sme-panel-body", 3, "sme-padding-inset-sm", 4, "ngIf"], [1, "sme-position-flex-none", "sme-icon", "sme-position-stretch-v", 3, "ngClass"], [1, "sme-panel-body"]], template: function AccordionPanelComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef(_c2$n);
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2, 3);
         i0.ɵɵlistener("click", function AccordionPanelComponent_Template_div_click_2_listener() { return ctx.onToggle(); });
@@ -5230,6 +5257,7 @@ class AccordionPanelComponent {
         i0.ɵɵclassProp("sme-panel-header-border-radius", ctx.borderRadius)("sme-panel-header-border-radius-opened", ctx.borderRadius && ctx.opened);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("sme-focus-zone", ctx.canClose)("sme-panel-header-border-radius", ctx.borderRadius)("sme-panel-header-border-radius-opened", ctx.borderRadius && ctx.opened);
+        i0.ɵɵattribute("aria-expanded", !!ctx.opened)("aria-label", ctx.header);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.canClose);
         i0.ɵɵadvance(1);
@@ -5241,10 +5269,10 @@ class AccordionPanelComponent {
     } }, dependencies: [i1$1.NgClass, i1$1.NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionPanelComponent, [{
         type: Component,
-        args: [{ selector: 'sme-accordion-panel', template: "<div class=\"sme-accordion-panel\">\r\n  <div class=\"sme-arrange-stack-h sme-panel-header sme-layout-flex sme-position-flex-align-center\" [class.sme-panel-header-border-radius]=\"borderRadius\"\r\n    [class.sme-panel-header-border-radius-opened]=\"borderRadius && opened\">\r\n    <div #accordionPanelButton [class.sme-focus-zone]=\"canClose\" [class.sme-panel-header-border-radius]=\"borderRadius\"\r\n      [class.sme-panel-header-border-radius-opened]=\"borderRadius && opened\"\r\n      class=\"sme-button sme-button-align-left sme-button-trigger sme-position-flex-auto sme-panel-expander\"\r\n      (click)=\"onToggle()\">\r\n      <span *ngIf=\"canClose\" class=\"sme-position-flex-none sme-icon sme-position-stretch-v\"\r\n        [ngClass]=\"{'sme-icon-chevronDown':opened, 'sme-icon-chevronRight': !opened}\"></span>\r\n      <span class=\"sme-arrange-ellipsis sme-position-stretch-v\" [title]=\"header\">{{ header }}</span>\r\n    </div>\r\n    <ng-content select=\"sme-panel-control\"></ng-content>\r\n  </div>\r\n  <div class=\"sme-panel-body\" *ngIf=\"opened\" [class.sme-padding-inset-sm]=\"paddingInset\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
-    }], function () { return []; }, { header: [{
+        args: [{ selector: 'sme-accordion-panel', template: "<div class=\"sme-accordion-panel\">\r\n  <div class=\"sme-arrange-stack-h sme-panel-header sme-layout-flex sme-position-flex-align-center\" [class.sme-panel-header-border-radius]=\"borderRadius\"\r\n    [class.sme-panel-header-border-radius-opened]=\"borderRadius && opened\">\r\n    <div #accordionPanelButton [class.sme-focus-zone]=\"canClose\" [class.sme-panel-header-border-radius]=\"borderRadius\"\r\n      [class.sme-panel-header-border-radius-opened]=\"borderRadius && opened\" [attr.aria-expanded]=\"!!opened\"\r\n      [attr.aria-label]=\"header\" tabindex=\"0\"\r\n      class=\"sme-button sme-button-align-left sme-button-trigger sme-position-flex-auto sme-panel-expander\"\r\n      (click)=\"onToggle()\">\r\n      <span *ngIf=\"canClose\" class=\"sme-position-flex-none sme-icon sme-position-stretch-v\"\r\n        [ngClass]=\"{'sme-icon-chevronDown':opened, 'sme-icon-chevronRight': !opened}\"></span>\r\n      <span class=\"sme-arrange-ellipsis sme-position-stretch-v\" [title]=\"header\">{{ header }}</span>\r\n    </div>\r\n    <ng-content select=\"sme-panel-control\"></ng-content>\r\n  </div>\r\n  <div class=\"sme-panel-body\" *ngIf=\"opened\" [class.sme-padding-inset-sm]=\"paddingInset\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
+    }], null, { header: [{
             type: Input
-        }], opened: [{
+        }], initialOpened: [{
             type: Input
         }], isExpandable: [{
             type: Input
@@ -5955,7 +5983,7 @@ __decorate([
     }], null, { closeNestedHelper: [] }); })();
 
 const _c0$1E = ["smeDropdownContent"];
-const _c1$R = ["smeDropdownToggle"];
+const _c1$T = ["smeDropdownToggle"];
 const _c2$m = [[["", 8, "sme-dropdown-toggle"]], [["", 8, "sme-dropdown-content"]]];
 const _c3$d = function (a0, a1, a2, a3) { return { "sme-layout-hidden": a0, "sme-layout-inline-block": a1, "sme-arrange-overflow-auto-x": a2, "sme-arrange-overflow-auto-y": a3 }; };
 const _c4$9 = [".sme-dropdown-toggle", ".sme-dropdown-content"];
@@ -6147,7 +6175,7 @@ class DropdownComponent {
 /** @nocollapse */ DropdownComponent.ɵfac = function DropdownComponent_Factory(t) { return new (t || DropdownComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(DropdownService), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
 /** @nocollapse */ DropdownComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DropdownComponent, selectors: [["sme-dropdown"]], viewQuery: function DropdownComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1E, 5);
-        i0.ɵɵviewQuery(_c1$R, 7);
+        i0.ɵɵviewQuery(_c1$T, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentElement = _t.first);
@@ -6677,7 +6705,7 @@ class ActionMenuComponent extends ActionContainerComponent {
             }] }, { type: i0.Injector }]; }, null); })();
 
 const _c0$1B = ["actionBarElement"];
-const _c1$Q = ["dropDownButton"];
+const _c1$S = ["dropDownButton"];
 const _c2$l = ["dropDown"];
 function ActionBarComponent_sme_dynamic_action_item_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -7038,7 +7066,7 @@ class ActionBarComponent extends ActionContainerComponent {
 /** @nocollapse */ ActionBarComponent.ɵfac = function ActionBarComponent_Factory(t) { return new (t || ActionBarComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8), i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ ActionBarComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ActionBarComponent, selectors: [["sme-action-bar"]], viewQuery: function ActionBarComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1B, 5);
-        i0.ɵɵviewQuery(_c1$Q, 5);
+        i0.ɵɵviewQuery(_c1$S, 5);
         i0.ɵɵviewQuery(_c2$l, 5);
     } if (rf & 2) {
         let _t;
@@ -7722,7 +7750,7 @@ class ActionButtonAsyncComponent extends ActionItemComponent {
         }] }); })();
 
 const _c0$1A = ["dropDown"];
-const _c1$P = ["dropDownButton"];
+const _c1$R = ["dropDownButton"];
 function ActionDropdownRendererComponent_p_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 10);
     i0.ɵɵtext(1);
@@ -7834,7 +7862,7 @@ ActionDropdownRendererComponent.dropdownUtaIdSuffix = '-dropdown';
 /** @nocollapse */ ActionDropdownRendererComponent.ɵfac = function ActionDropdownRendererComponent_Factory(t) { return new (t || ActionDropdownRendererComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
 /** @nocollapse */ ActionDropdownRendererComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ActionDropdownRendererComponent, selectors: [["sme-action-dropdown-renderer"]], viewQuery: function ActionDropdownRendererComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1A, 5);
-        i0.ɵɵviewQuery(_c1$P, 5);
+        i0.ɵɵviewQuery(_c1$R, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropDown = _t.first);
@@ -8807,7 +8835,7 @@ function EditableLayoutItemComponent_p_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", ctx_r0.displayName, " ");
 } }
 const _c0$1v = function (a0) { return { "sme-cursor-pointer": a0 }; };
-const _c1$O = function (a0) { return { "sme-corner-resizer-disabled": a0 }; };
+const _c1$Q = function (a0) { return { "sme-corner-resizer-disabled": a0 }; };
 const _c2$j = ["*"];
 /**
  * Individual Layout Items that can be added on demand with as -
@@ -8910,7 +8938,7 @@ class EditableLayoutItemComponent extends CoreBaseComponent {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.isLayoutItemDraggable);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$O, !ctx.isLayoutItemDraggable));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$Q, !ctx.isLayoutItemDraggable));
     } }, dependencies: [i1$1.NgClass, i1$1.NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditableLayoutItemComponent, [{
         type: Component,
@@ -9508,7 +9536,7 @@ __decorate([
 ], LayoutResponsiveWindowManager.prototype, "onWindowSizeChanged", null);
 
 const _c0$1t = [[["sme-layout-item"]]];
-const _c1$N = ["sme-layout-item"];
+const _c1$P = ["sme-layout-item"];
 /**
  * Layout component
  */
@@ -9954,7 +9982,7 @@ class LayoutComponent extends CoreBaseComponent {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.layoutItems = _t);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.definitions = _t);
-    } }, inputs: { itemHorizontalSpace: "itemHorizontalSpace", itemVerticalSpace: "itemVerticalSpace", oneColumn: "oneColumn", tryToFillWholeRow: "tryToFillWholeRow", definition: "definition", padLastItem: "padLastItem", noExtraRightPaddingOneItemPerRow: "noExtraRightPaddingOneItemPerRow", layoutConfig: "layoutConfig" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$N, decls: 1, vars: 0, template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { itemHorizontalSpace: "itemHorizontalSpace", itemVerticalSpace: "itemVerticalSpace", oneColumn: "oneColumn", tryToFillWholeRow: "tryToFillWholeRow", definition: "definition", padLastItem: "padLastItem", noExtraRightPaddingOneItemPerRow: "noExtraRightPaddingOneItemPerRow", layoutConfig: "layoutConfig" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$P, decls: 1, vars: 0, template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef(_c0$1t);
         i0.ɵɵprojection(0);
     } }, encapsulation: 2 });
@@ -10011,7 +10039,7 @@ __decorate([
         }], refresh: [], deferredOnLayoutChanged: [], onWindowBreakpointChanged: [] }); })();
 
 const _c0$1s = [[["sme-editable-layout-item"]]];
-const _c1$M = ["sme-editable-layout-item"];
+const _c1$O = ["sme-editable-layout-item"];
 class EditableLayoutComponent extends LayoutComponent {
     /**
      * The source name to use for logging
@@ -10179,7 +10207,7 @@ EditableLayoutComponent.gridPaddingSize = 8;
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editableLayoutItems = _t);
-    } }, inputs: { isEditMode: "isEditMode" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$M, decls: 2, vars: 4, consts: [[1, "sme-editable-layout-grid"]], template: function EditableLayoutComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { isEditMode: "isEditMode" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$O, decls: 2, vars: 4, consts: [[1, "sme-editable-layout-grid"]], template: function EditableLayoutComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef(_c0$1s);
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵprojection(1);
@@ -10239,7 +10267,7 @@ function LoadingWheelComponent_a_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.buttonLabel);
 } }
 const _c0$1r = function (a0, a1, a2) { return { "sme-scheme-loading-wheel": a0, "sme-layout-absolute": a1, "sme-position-inset-none": a2 }; };
-const _c1$L = function (a0, a1) { return { "sme-layout-absolute": a0, "sme-position-center": a1 }; };
+const _c1$N = function (a0, a1) { return { "sme-layout-absolute": a0, "sme-position-center": a1 }; };
 const _c2$i = function (a0, a1) { return { "sme-progress-center": a0, "sme-progress-center-h": a1 }; };
 var LoadingWheelSize;
 (function (LoadingWheelSize) {
@@ -10385,7 +10413,7 @@ class LoadingWheelComponent extends CoreBaseComponent {
     } if (rf & 2) {
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(11, _c0$1r, !ctx.isBackgroundTransparent, !ctx.inline, !ctx.inline));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(15, _c1$L, !ctx.inline, !ctx.inline));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(15, _c1$N, !ctx.inline, !ctx.inline));
         i0.ɵɵadvance(1);
         i0.ɵɵclassMapInterpolate1("sme-progress sme-progress-indeterminate-local ", ctx.sizeClass, " sme-focus-zone");
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c2$i, ctx.inline, !ctx.inline));
@@ -12003,7 +12031,7 @@ class SmeInternalFormFieldComponent extends FormFieldComponent {
     }], null, null); })();
 
 const _c0$1q = ["fieldHost"];
-const _c1$K = ["field"];
+const _c1$M = ["field"];
 /**
  * Schema Form Component
  * It takes the schema and data and other necessary inputs then dynamically renders the form UI.
@@ -12311,7 +12339,7 @@ SchemaFieldLoaderComponentBase.resourceActualTextPrefix = 'actual_string:';
 SchemaFieldLoaderComponentBase.localizationCache = {};
 /** @nocollapse */ SchemaFieldLoaderComponentBase.ɵfac = function SchemaFieldLoaderComponentBase_Factory(t) { return new (t || SchemaFieldLoaderComponentBase)(); };
 /** @nocollapse */ SchemaFieldLoaderComponentBase.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: SchemaFieldLoaderComponentBase, viewQuery: function SchemaFieldLoaderComponentBase_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c1$K, 5);
+        i0.ɵɵviewQuery(_c1$M, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.formFieldComponent = _t.first);
@@ -14501,7 +14529,7 @@ function DialogComponent_sme_backdrop_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r0.ariaDescription);
 } }
-const _c1$J = [[["sme-dialog-header"]], [["sme-dialog-content"]], [["sme-dialog-footer"]]];
+const _c1$L = [[["sme-dialog-header"]], [["sme-dialog-content"]], [["sme-dialog-footer"]]];
 const _c2$h = ["sme-dialog-header", "sme-dialog-content", "sme-dialog-footer"];
 /**
  *
@@ -14819,7 +14847,7 @@ DialogComponent.nextDialogId = 0;
 /** @nocollapse */ DialogComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DialogComponent, selectors: [["sme-dialog"]], hostBindings: function DialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("keyup.escape", function DialogComponent_keyup_escape_HostBindingHandler() { return ctx.onKeyUp(); }, false, i0.ɵɵresolveDocument);
     } }, inputs: { allowBackgroundInteraction: "allowBackgroundInteraction", showBackdrop: "showBackdrop", clickBackdrop: "clickBackdrop", ariaLabel: "ariaLabel", ariaDescription: "ariaDescription", actionPane: "actionPane", dialogMode: "dialogMode", dialogType: "dialogType", closeButton: "closeButton", compactFullHeight: "compactFullHeight" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c2$h, decls: 1, vars: 1, consts: [["class", "sme-layout-absolute sme-position-inset-none", 3, "level", "showBackdrop", "allowBackgroundInteraction", "clicked", 4, "ngIf"], [1, "sme-layout-absolute", "sme-position-inset-none", 3, "level", "showBackdrop", "allowBackgroundInteraction", "clicked"], ["aria-modal", "true", 3, "ngClass"], ["class", "sme-button-trigger sme-button-auto-width sme-dialog-close-button", 3, "title", "click", 4, "ngIf"], [1, "sme-position-flex-none", "sme-focus-zone"], [1, "sme-layout-relative", "sme-position-flex-auto", "sme-padding-horizontal-lg", "sme-arrange-overflow-auto-y", "sme-arrange-overflow-hide-x", "sme-focus-zone", "sme-layout-responsive-zone-xs", "sme-dialog-content-wrapper"], [1, "sme-position-flex-none", "sme-focus-zone", "sme-padding-horizontal-lg", "sme-padding-vertical-sm"], ["class", "sme-screen-reader", 3, "id", 4, "ngIf"], [1, "sme-button-trigger", "sme-button-auto-width", "sme-dialog-close-button", 3, "title", "click"], [1, "sme-icon", "sme-icon-cancel"], [1, "sme-screen-reader", 3, "id"]], template: function DialogComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c1$J);
+        i0.ɵɵprojectionDef(_c1$L);
         i0.ɵɵtemplate(0, DialogComponent_sme_backdrop_0_Template, 11, 11, "sme-backdrop", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.visible);
@@ -15868,6 +15896,162 @@ class SchemaFieldHostModule {
         DisabledModule,
         TooltipModule], exports: [SchemaFieldHostComponent] }); })();
 
+/**
+ * A re-usable form field accessibility manager.
+ */
+class FormFieldAccessibilityManagerBaseService {
+    /**
+     * The focus handler on delete/add if the form field is a list.
+     * @param value The value for the list form field.
+     * @param addButton The component reference for the add button.
+     * @param hostElement The host element reference.
+     * @param isDelete Determine if the action is delete.
+     * @returns void
+     */
+    listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement, isDelete = true) {
+        // If there are no items in the list, focus on the add button.
+        if (!value || !value.length) {
+            this.deferredFocusOnAddButton(addButton);
+            return;
+        }
+        // Otherwise focus on the either the first input fields when it is delete or the last input field when it is add.
+        this.deferredFocusOnInputFields(hostElement, value, isDelete);
+    }
+    /**
+     * The focus handler on delete/add if the form field is a list. And the list is built with a specific selector.
+     * @param value The value for the list form field.
+     * @param addButton The component reference for the add button.
+     * @param hostElement The host element reference.
+     * @param selector The selector for the input fields.
+     * @returns void
+     */
+    listFormFieldFocusHandlerOnKeyboardActionBySelector(value, addButton, hostElement, selector) {
+        // If there are no items in the list, focus on the add button.
+        if (!value || !value.length) {
+            this.deferredFocusOnAddButton(addButton);
+            return;
+        }
+        // Otherwise focus on the either the first input fields when it is delete or the last input field when it is add.
+        this.deferredFocusOnTargetBySelector(value, hostElement, selector);
+    }
+    /**
+     * It handles the focus on the input field by index if value is type of any[].
+     * @param hostElement the host form field element.
+     * @param index the index of the input field to focus on.
+     * @returns void.
+     */
+    focusOnInputByIndex(hostElement, index) {
+        const inputs = hostElement.nativeElement.querySelectorAll('input');
+        if (index < 0 || index >= inputs.length) {
+            return;
+        }
+        inputs[index].focus();
+    }
+    deferredFocusOnTargetBySelector(value, hostElement, selector) {
+        if (!value || !value.length) {
+            return;
+        }
+        const targets = hostElement.nativeElement.querySelectorAll(selector);
+        if (!targets || !targets.length) {
+            return;
+        }
+        targets[0].focus();
+    }
+    deferredFocusOnAddButton(addButton) {
+        if (!addButton) {
+            return;
+        }
+        addButton.nativeElement.focus();
+    }
+    deferredFocusOnInputFields(hostElement, value, isDelete = true) {
+        if (!value || !value.length) {
+            return;
+        }
+        this.focusOnInputByIndex(hostElement, isDelete ? 0 : value.length - 1);
+    }
+}
+/** @nocollapse */ FormFieldAccessibilityManagerBaseService.ɵfac = function FormFieldAccessibilityManagerBaseService_Factory(t) { return new (t || FormFieldAccessibilityManagerBaseService)(); };
+/** @nocollapse */ FormFieldAccessibilityManagerBaseService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: FormFieldAccessibilityManagerBaseService, factory: FormFieldAccessibilityManagerBaseService.ɵfac, providedIn: 'root' });
+__decorate([
+    Debounce$2(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Array, ElementRef, String]),
+    __metadata("design:returntype", void 0)
+], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnTargetBySelector", null);
+__decorate([
+    Debounce$2(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ElementRef]),
+    __metadata("design:returntype", void 0)
+], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnAddButton", null);
+__decorate([
+    Debounce$2(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ElementRef, Array, Object]),
+    __metadata("design:returntype", void 0)
+], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnInputFields", null);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldAccessibilityManagerBaseService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, { deferredFocusOnTargetBySelector: [], deferredFocusOnAddButton: [], deferredFocusOnInputFields: [] }); })();
+
+class ArrayFormFieldAccessibilityManagerService {
+    constructor(formFieldAccessibilityManagerBaseService) {
+        this.formFieldAccessibilityManagerBaseService = formFieldAccessibilityManagerBaseService;
+        this.firstFormFieldInArrayItemSelector = 'sme-accordion sme-accordion-panel:last-of-type input';
+    }
+    /**
+     * It handles the focus when deleting an item from the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    delete(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardActionBySelector(value, addButton, hostElement, this.firstFormFieldInArrayItemSelector);
+    }
+    /**
+     * It handles the focus when adding an item to the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    add(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardActionBySelector(value, addButton, hostElement, this.firstFormFieldInArrayItemSelector);
+    }
+    /**
+     * It handles the focus when promoting an item in the list.
+     * @param hostElement The element reference for the host element.
+     * @param index the current index.
+     */
+    promote(value, hostElement, index) {
+        this.formFieldAccessibilityManagerBaseService.deferredFocusOnTargetBySelector(value, hostElement, 
+        // nth means index - 1 + 1 = index
+        `sme-accordion sme-accordion-panel:nth-of-type(${index}) button:nth-of-type(2)`);
+    }
+    /**
+     * It handles the focus when demoting an item in the list.
+     * @param hostElement The element reference for the host element.
+     * @param index the current index.
+     */
+    demote(value, hostElement, index) {
+        this.formFieldAccessibilityManagerBaseService.deferredFocusOnTargetBySelector(value, hostElement, 
+        // nth means index + 1 + 1 = index + 2
+        `sme-accordion sme-accordion-panel:nth-of-type(${index + 2}) button:nth-of-type(3)`);
+    }
+}
+/** @nocollapse */ ArrayFormFieldAccessibilityManagerService.ɵfac = function ArrayFormFieldAccessibilityManagerService_Factory(t) { return new (t || ArrayFormFieldAccessibilityManagerService)(i0.ɵɵinject(FormFieldAccessibilityManagerBaseService)); };
+/** @nocollapse */ ArrayFormFieldAccessibilityManagerService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ArrayFormFieldAccessibilityManagerService, factory: ArrayFormFieldAccessibilityManagerService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArrayFormFieldAccessibilityManagerService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], function () { return [{ type: FormFieldAccessibilityManagerBaseService }]; }, null); })();
+
 /**
  * Provider that hides any existing ControlContainers from NgModel
  */
@@ -16001,7 +16185,7 @@ function ArrayFormFieldLoaderComponent_ng_template_2_Template(rf, ctx) { if (rf
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("propertySchema", ctx_r1.propertySchema.item)("context", ctx_r1.context)("data", model_r2);
 } }
-const _c1$I = ["addButton"];
+const _c1$K = ["addButton"];
 const _c2$g = ["type", "array"];
 const _c3$b = function (a0, a1) { return { index: a0, ariaLabelId: a1 }; };
 function ArrayFormFieldComponent_sme_accordion_panel_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
@@ -16099,7 +16283,6 @@ function ArrayFormFieldComponent_button_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.addButtonText);
 } }
 /* eslint-disable max-len */
-/* eslint-enable max-len */
 class ArrayFormFieldLoaderComponent extends ArrayPropertySchemaFieldLoaderComponent {
     askForNewItem($event) {
         const item = SchemaUtilities.generateDataBasedOnSchemaProperty(this.propertySchema.item);
@@ -16168,8 +16351,9 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
     /**
      * Initializes a new instance of the JsonFormFieldComponent
      */
-    constructor(injector) {
+    constructor(injector, arrayFormFieldAccessibilityManagerService) {
         super(injector);
+        this.arrayFormFieldAccessibilityManagerService = arrayFormFieldAccessibilityManagerService;
         /**
          * When no "newItem" is provided. This output will be called anytime a new item is required.
          */
@@ -16255,35 +16439,19 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
      */
     add() {
         const item = this.getNewItem();
-        const index = this.value.length;
         this.value.push(item);
         this.triggerValueChange();
-        setTimeout(() => {
-            const itemId = this.getItemAriaId(index, 'itemContainer');
-            const itemContainer = document.getElementById(itemId);
-            const firstInput = itemContainer.querySelector('input');
-            if (firstInput) {
-                firstInput.focus();
-            }
-            itemContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        });
+        this.arrayFormFieldAccessibilityManagerService.add(this.value, this.addButton, this.hostElement);
     }
     /**
      * Deletes an item from the array
      */
     delete(item) {
         const index = this.value.indexOf(item);
-        // return the view to the previous item in the list.
-        const prevItemId = this.getItemAriaId(index - 1, 'itemContainer');
-        const prevContainer = document.getElementById(prevItemId);
-        if (prevContainer) {
-            prevContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-        // focus on the add button, otherwise focus is reset to the beginning of the page
-        this.addButton.nativeElement.focus();
         this.value.splice(index, 1);
         this.triggerValueChange();
         this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.removeButtonEvent);
+        this.arrayFormFieldAccessibilityManagerService.delete(this.value, this.addButton, this.hostElement);
     }
     /**
      * Decreases the index of an item by 1
@@ -16295,6 +16463,7 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
             this.value[index] = { ...this.value[index - 1] };
             this.value[index - 1] = temp;
             this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.promoteButtonEvent);
+            this.arrayFormFieldAccessibilityManagerService.promote(this.value, this.hostElement, index);
         }
         else {
             this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.promoteButtonPreventedEvent);
@@ -16310,6 +16479,7 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
             this.value[index] = { ...this.value[index + 1] };
             this.value[index + 1] = temp;
             this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.demoteButtonEvent);
+            this.arrayFormFieldAccessibilityManagerService.demote(this.value, this.hostElement, index);
         }
         else {
             this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.demoteButtonPreventedEvent);
@@ -16389,14 +16559,14 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
         }
     }
 };
-/** @nocollapse */ ArrayFormFieldComponent.ɵfac = function ArrayFormFieldComponent_Factory(t) { return new (t || ArrayFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+/** @nocollapse */ ArrayFormFieldComponent.ɵfac = function ArrayFormFieldComponent_Factory(t) { return new (t || ArrayFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(ArrayFormFieldAccessibilityManagerService)); };
 /** @nocollapse */ ArrayFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ArrayFormFieldComponent, selectors: [["sme-form-field", "type", "array"]], contentQueries: function ArrayFormFieldComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
         i0.ɵɵcontentQuery(dirIndex, FormFieldIsolatorComponent, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.subFieldIsolator = _t.first);
     } }, viewQuery: function ArrayFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c1$I, 5);
+        i0.ɵɵviewQuery(_c1$K, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.addButton = _t.first);
@@ -16433,12 +16603,13 @@ ArrayFormFieldComponent = __decorate([
         description: `A form field control binding to array data.`,
         loaderComponent: ArrayFormFieldLoaderComponent
     }),
-    __metadata("design:paramtypes", [Injector])
+    __metadata("design:paramtypes", [Injector,
+        ArrayFormFieldAccessibilityManagerService])
 ], ArrayFormFieldComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArrayFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'sme-form-field[type="array"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n\r\n  <div class=\"sme-array\">\r\n    <sme-accordion [canCloseAny]=\"canCloseAny\" [canCloseAll]=\"canCloseAll\" [canOpenMultiple]=\"canOpenMultiple\">\r\n      <sme-accordion-panel *ngFor=\"let item of value; let i = index\" [header]=\"getItemTitle(item, i)\" [isExpandable]=\"false\" [attr.data-uta-id]=\"'array-form-field-item-' + i\">\r\n        <sme-panel-control>\r\n          <ng-container *ngIf=\"headerTemplate\" smeTemplateOutlet [template]=\"headerTemplate\" [data]=\"item\" hostDataName=\"context\"\r\n            [hostData]=\"{index: i, ariaLabelId: getItemAriaId(i, 'itemHeader')}\"></ng-container>\r\n          <button *ngIf=\"showMove\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.promoteButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.promoteButtonTooltip\" (click)=\"moveUp(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"promote-button\">\r\n            <span class=\"sme-icon sme-icon-up\"></span>\r\n          </button>\r\n          <button *ngIf=\"showMove\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.demoteButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.demoteButtonTooltip\" (click)=\"moveDown(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"demote-button\">\r\n            <span class=\"sme-icon sme-icon-down\"></span>\r\n          </button>\r\n          <button *ngIf=\"getShowRemove(item, i)\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.removeButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.removeButtonTooltip\" (click)=\"delete(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"remove-button\">\r\n            <span class=\"sme-icon sme-icon-delete sme-color-red\"></span>\r\n          </button>\r\n        </sme-panel-control>\r\n\r\n        <span class=\"sme-screen-reader\" [id]=\"getItemAriaId(i, 'item')\">{{itemTitle}}</span>\r\n        <fieldset [attr.aria-labelledby]=\"getItemAriaId(i, 'item')\"\r\n          class=\"sme-arrange-stack-h sme-margin-bottom-lg sme-array-item\"\r\n          [class.sme-subform-indent-none]=\"orientation==='horizontal'\">\r\n\r\n          <div class=\"sme-position-flex-auto sme-padding-inset-md\" [id]=\"getItemAriaId(i, 'itemContainer')\">\r\n            <ng-container smeTemplateOutlet [template]=\"itemTemplate\" [data]=\"item\" hostDataName=\"context\"\r\n              [hostData]=\"{index: i, ariaLabelId: getItemAriaId(i, 'item')}\"></ng-container>\r\n          </div>\r\n        </fieldset>\r\n\r\n      </sme-accordion-panel>\r\n    </sme-accordion>\r\n\r\n    <button #addButton *ngIf=\"showAdd\" type=\"button\" data-uta-id=\"add-button\"\r\n      [smeDisabled]=\"loadingOrDisabled || (maxItems !== -1 && value.length >= maxItems)\"\r\n      class=\"sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.addButtonAriaLabel\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.Array.addButtonTooltip\" (click)=\"add()\">{{addButtonText}}</button>\r\n  </div>\r\n\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n  <div class=\"sme-screen-reader\" aria-live=\"assertive\" aria-relevant=\"all\">{{screenReaderEvent}}</div>\r\n</sme-form-field-layout>\r\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { subFieldIsolator: [{
+        args: [{ selector: 'sme-form-field[type="array"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div class=\"sme-array\">\r\n    <sme-accordion [canCloseAny]=\"canCloseAny\" [canCloseAll]=\"canCloseAll\" [canOpenMultiple]=\"canOpenMultiple\">\r\n      <sme-accordion-panel *ngFor=\"let item of value; let i = index\" [header]=\"getItemTitle(item, i)\" [isExpandable]=\"false\" [attr.data-uta-id]=\"'array-form-field-item-' + i\">\r\n        <sme-panel-control>\r\n          <ng-container *ngIf=\"headerTemplate\" smeTemplateOutlet [template]=\"headerTemplate\" [data]=\"item\" hostDataName=\"context\"\r\n            [hostData]=\"{index: i, ariaLabelId: getItemAriaId(i, 'itemHeader')}\"></ng-container>\r\n          <button *ngIf=\"showMove\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.promoteButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.promoteButtonTooltip\" (click)=\"moveUp(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"promote-button\">\r\n            <span class=\"sme-icon sme-icon-up\"></span>\r\n          </button>\r\n          <button *ngIf=\"showMove\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.demoteButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.demoteButtonTooltip\" (click)=\"moveDown(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"demote-button\">\r\n            <span class=\"sme-icon sme-icon-down\"></span>\r\n          </button>\r\n          <button *ngIf=\"getShowRemove(item, i)\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.removeButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.removeButtonTooltip\" (click)=\"delete(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"remove-button\">\r\n            <span class=\"sme-icon sme-icon-delete sme-color-red\"></span>\r\n          </button>\r\n        </sme-panel-control>\r\n        <span class=\"sme-screen-reader\" [id]=\"getItemAriaId(i, 'item')\">{{itemTitle}}</span>\r\n        <fieldset [attr.aria-labelledby]=\"getItemAriaId(i, 'item')\"\r\n          class=\"sme-arrange-stack-h sme-margin-bottom-lg sme-array-item\"\r\n          [class.sme-subform-indent-none]=\"orientation==='horizontal'\">\r\n          <div class=\"sme-position-flex-auto sme-padding-inset-md\" [id]=\"getItemAriaId(i, 'itemContainer')\">\r\n            <ng-container smeTemplateOutlet [template]=\"itemTemplate\" [data]=\"item\" hostDataName=\"context\"\r\n              [hostData]=\"{index: i, ariaLabelId: getItemAriaId(i, 'item')}\"></ng-container>\r\n          </div>\r\n        </fieldset>\r\n      </sme-accordion-panel>\r\n    </sme-accordion>\r\n    <button #addButton *ngIf=\"showAdd\" type=\"button\" data-uta-id=\"add-button\"\r\n      [smeDisabled]=\"loadingOrDisabled || (maxItems !== -1 && value.length >= maxItems)\"\r\n      class=\"sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.addButtonAriaLabel\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.Array.addButtonTooltip\" (click)=\"add()\">{{addButtonText}}</button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n  <div class=\"sme-screen-reader\" aria-live=\"assertive\" aria-relevant=\"all\">{{screenReaderEvent}}</div>\r\n</sme-form-field-layout>\r\n" }]
+    }], function () { return [{ type: i0.Injector }, { type: ArrayFormFieldAccessibilityManagerService }]; }, { subFieldIsolator: [{
             type: ContentChild,
             args: [FormFieldIsolatorComponent, { static: true }]
         }], askForNewItem: [{
@@ -18213,7 +18384,7 @@ function fromMonacoEvent(emitter) {
 }
 
 const _c0$1f = ["editor"];
-const _c1$H = ["type", "code"];
+const _c1$J = ["type", "code"];
 function CodeFormFieldComponent_sme_validation_alert_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "sme-validation-alert", 4);
 } if (rf & 2) {
@@ -18511,7 +18682,7 @@ let CodeFormFieldComponent = class CodeFormFieldComponent extends SmeInternalFor
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorHost = _t.first);
     } }, hostBindings: function CodeFormFieldComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("keydown", function CodeFormFieldComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); });
-    } }, inputs: { language: "language", options: "options" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c1$H, decls: 4, vars: 2, consts: [[3, "formField"], ["sme-lint-disable", "", 1, "sme-code-editor", "sme-form-field-editor"], ["editor", ""], [3, "alert", 4, "ngIf"], [3, "alert"]], template: function CodeFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { language: "language", options: "options" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c1$J, decls: 4, vars: 2, consts: [[3, "formField"], ["sme-lint-disable", "", 1, "sme-code-editor", "sme-form-field-editor"], ["editor", ""], [3, "alert", 4, "ngIf"], [3, "alert"]], template: function CodeFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
         i0.ɵɵelement(1, "div", 1, 2);
         i0.ɵɵtemplate(3, CodeFormFieldComponent_sme_validation_alert_3_Template, 1, 1, "sme-validation-alert", 3);
@@ -18861,7 +19032,7 @@ function ComboboxFormFieldLoaderComponent_ng_container_3_Template(rf, ctx) { if
     i0.ɵɵproperty("ngForOf", ctx_r2.resolveComponentMember(ctx_r2.propertySchema.options.itemsBinding));
 } }
 const _c0$1d = ["singleSelectTemplate"];
-const _c1$G = ["multiSelectTemplate"];
+const _c1$I = ["multiSelectTemplate"];
 const _c2$f = ["listbox"];
 const _c3$a = ["dropDown"];
 const _c4$8 = ["type", "combobox"];
@@ -19272,7 +19443,7 @@ let ComboboxFormFieldComponent = class ComboboxFormFieldComponent extends SmeInt
 /** @nocollapse */ ComboboxFormFieldComponent.ɵfac = function ComboboxFormFieldComponent_Factory(t) { return new (t || ComboboxFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ ComboboxFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ComboboxFormFieldComponent, selectors: [["sme-form-field", "type", "combobox"], ["sme-form-field", "type", "select"]], viewQuery: function ComboboxFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1d, 7);
-        i0.ɵɵviewQuery(_c1$G, 7);
+        i0.ɵɵviewQuery(_c1$I, 7);
         i0.ɵɵviewQuery(_c2$f, 5);
         i0.ɵɵviewQuery(_c3$a, 5);
     } if (rf & 2) {
@@ -19445,7 +19616,7 @@ class SelectFormFieldDirective {
     }], null, null); })();
 
 const _c0$1c = ["dropDown"];
-const _c1$F = ["calendar"];
+const _c1$H = ["calendar"];
 const _c2$e = ["type", "date"];
 /**
  * Date Form Field Component
@@ -19566,7 +19737,7 @@ class DateFormFieldComponent extends DateLikeFormFieldComponent {
 /** @nocollapse */ DateFormFieldComponent.ɵfac = function DateFormFieldComponent_Factory(t) { return new (t || DateFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ DateFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DateFormFieldComponent, selectors: [["sme-form-field", "type", "date"]], viewQuery: function DateFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1c, 5);
-        i0.ɵɵviewQuery(_c1$F, 5);
+        i0.ɵɵviewQuery(_c1$H, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropDown = _t.first);
@@ -19619,7 +19790,7 @@ class DateFormFieldComponent extends DateLikeFormFieldComponent {
         }] }); })();
 
 const _c0$1b = ["dropDown"];
-const _c1$E = ["calendar"];
+const _c1$G = ["calendar"];
 const _c2$d = ["clock"];
 const _c3$9 = ["type", "datetime"];
 /**
@@ -19770,7 +19941,7 @@ class DateTimeFormFieldComponent extends DateLikeFormFieldComponent {
 /** @nocollapse */ DateTimeFormFieldComponent.ɵfac = function DateTimeFormFieldComponent_Factory(t) { return new (t || DateTimeFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ DateTimeFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DateTimeFormFieldComponent, selectors: [["sme-form-field", "type", "datetime"]], viewQuery: function DateTimeFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1b, 5);
-        i0.ɵɵviewQuery(_c1$E, 5);
+        i0.ɵɵviewQuery(_c1$G, 5);
         i0.ɵɵviewQuery(_c2$d, 5);
     } if (rf & 2) {
         let _t;
@@ -19886,7 +20057,7 @@ class DateTimeRangeOptionComponent {
         }] }); })();
 
 const _c0$1a = ["listbox"];
-const _c1$D = ["dropDown"];
+const _c1$F = ["dropDown"];
 const _c2$c = ["startFormField"];
 const _c3$8 = ["endFormField"];
 const _c4$7 = ["type", "datetimerange"];
@@ -20317,7 +20488,7 @@ DateTimeRangeFormFieldComponent.endProperty = 'end';
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.options = _t);
     } }, viewQuery: function DateTimeRangeFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1a, 5);
-        i0.ɵɵviewQuery(_c1$D, 5);
+        i0.ɵɵviewQuery(_c1$F, 5);
         i0.ɵɵviewQuery(_c2$c, 5);
         i0.ɵɵviewQuery(_c3$8, 5);
     } if (rf & 2) {
@@ -20480,7 +20651,7 @@ class WebkitFileSystem {
 WebkitFileSystem.isDirectoryPropertyName = '__SME_isDirectory__';
 
 const _c0$19 = ["file"];
-const _c1$C = ["type", "file"];
+const _c1$E = ["type", "file"];
 function FileFormFieldComponent_ng_container_16_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12);
@@ -20775,7 +20946,7 @@ let FileFormFieldComponent = class FileFormFieldComponent extends SmeInternalFor
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
-    } }, inputs: { multiple: "multiple", fileTypes: "fileTypes", buttonLabel: "buttonLabel" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$C, decls: 18, vars: 19, consts: [[3, "formField"], [1, "sme-file-drop-zone", "sme-subform-indent-none", "sme-subform-no-bottom-margin"], [1, "sme-padding-inset-xs", "sme-margin-bottom-xs", "sme-arrange-stack-v", 3, "smeDrop"], [1, "sme-file-input", "sme-margin-bottom-xxs"], ["type", "file", 1, "sme-layout-none", 3, "disabled", "change"], ["file", ""], ["type", "button", 1, "sme-button-primary", "sme-button-auto-width", "sme-margin-right-xs", 3, "smeDisabled", "click"], [1, "sme-position-flex-align-center"], [1, "sme-margin-bottom-xs"], [4, "ngIf"], [3, "alert"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs", 4, "ngFor", "ngForOf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs"], [1, "sme-position-flex-none", "sme-icon", "sme-icon-size-lg"], [1, "sme-position-flex-auto", "sme-padding-left-sm", "sme-arrange-stack-v"], [1, "sme-position-flex-auto", "sme-arrange-ellipsis", "sme-padding-inset-none"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function FileFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { multiple: "multiple", fileTypes: "fileTypes", buttonLabel: "buttonLabel" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$E, decls: 18, vars: 19, consts: [[3, "formField"], [1, "sme-file-drop-zone", "sme-subform-indent-none", "sme-subform-no-bottom-margin"], [1, "sme-padding-inset-xs", "sme-margin-bottom-xs", "sme-arrange-stack-v", 3, "smeDrop"], [1, "sme-file-input", "sme-margin-bottom-xxs"], ["type", "file", 1, "sme-layout-none", 3, "disabled", "change"], ["file", ""], ["type", "button", 1, "sme-button-primary", "sme-button-auto-width", "sme-margin-right-xs", 3, "smeDisabled", "click"], [1, "sme-position-flex-align-center"], [1, "sme-margin-bottom-xs"], [4, "ngIf"], [3, "alert"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs", 4, "ngFor", "ngForOf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs"], [1, "sme-position-flex-none", "sme-icon", "sme-icon-size-lg"], [1, "sme-position-flex-auto", "sme-padding-left-sm", "sme-arrange-stack-v"], [1, "sme-position-flex-auto", "sme-arrange-ellipsis", "sme-padding-inset-none"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function FileFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         const _r7 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0)(1, "fieldset", 1)(2, "sme-drop-zone", 2);
         i0.ɵɵlistener("smeDrop", function FileFormFieldComponent_Template_sme_drop_zone_smeDrop_2_listener($event) { return ctx.onDrop($event); });
@@ -20979,35 +21150,70 @@ JsonFormFieldComponent = __decorate([
         args: [{ selector: 'sme-form-field[type="json"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div class=\"sme-json sme-form-field-editor\">\r\n    <textarea [(ngModel)]=\"jsonText\" rows=\"10\">\r\n    </textarea>\r\n  </div>\r\n  <span class=\"sme-screen-reader\" [id]=\"idBag.detailsSpan\">{{details}}</span>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, null); })();
 
-const _c0$17 = ["type", "list"];
+class ListFormFieldAccessibilityManagerService {
+    constructor(formFieldAccessibilityManagerBaseService) {
+        this.formFieldAccessibilityManagerBaseService = formFieldAccessibilityManagerBaseService;
+    }
+    /**
+     * It handles the focus when deleting an item from the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    delete(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement);
+    }
+    /**
+     * It handles the focus when adding an item to the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    add(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement, false);
+    }
+}
+/** @nocollapse */ ListFormFieldAccessibilityManagerService.ɵfac = function ListFormFieldAccessibilityManagerService_Factory(t) { return new (t || ListFormFieldAccessibilityManagerService)(i0.ɵɵinject(FormFieldAccessibilityManagerBaseService)); };
+/** @nocollapse */ ListFormFieldAccessibilityManagerService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ListFormFieldAccessibilityManagerService, factory: ListFormFieldAccessibilityManagerService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListFormFieldAccessibilityManagerService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], function () { return [{ type: FormFieldAccessibilityManagerBaseService }]; }, null); })();
+
+const _c0$17 = ["addButton"];
+const _c1$D = ["type", "list"];
 function ListFormFieldComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "input", 8);
-    i0.ɵɵlistener("ngModelChange", function ListFormFieldComponent_div_1_div_1_Template_input_ngModelChange_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r5); const i_r3 = restoredCtx.index; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r4.value[i_r3] = $event)); })("input", function ListFormFieldComponent_div_1_div_1_Template_input_input_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.triggerValueChange()); });
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "input", 9);
+    i0.ɵɵlistener("ngModelChange", function ListFormFieldComponent_div_1_div_1_Template_input_ngModelChange_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r6); const i_r4 = restoredCtx.index; const ctx_r5 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r5.value[i_r4] = $event)); })("input", function ListFormFieldComponent_div_1_div_1_Template_input_input_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.triggerValueChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 9);
-    i0.ɵɵlistener("click", function ListFormFieldComponent_div_1_div_1_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const i_r3 = restoredCtx.index; const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.removeItemAt(i_r3)); });
-    i0.ɵɵelement(3, "span", 10);
+    i0.ɵɵelementStart(2, "button", 10);
+    i0.ɵɵlistener("click", function ListFormFieldComponent_div_1_div_1_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const i_r4 = restoredCtx.index; const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.removeItemAt(i_r4)); });
+    i0.ɵɵelement(3, "span", 11);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const i_r3 = ctx.index;
+    const i_r4 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngModel", ctx_r1.value[i_r3]);
-    i0.ɵɵattribute("aria-label", ctx_r1.strings.MsftSmeShell.Angular.Form.List.itemAriaLabel.format(ctx_r1.label, i_r3 + 1, ctx_r1.value.length));
+    i0.ɵɵproperty("ngModel", ctx_r1.value[i_r4]);
+    i0.ɵɵattribute("aria-label", ctx_r1.strings.MsftSmeShell.Angular.Form.List.itemAriaLabel.format(ctx_r1.label, i_r4 + 1, ctx_r1.value.length));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("title", ctx_r1.strings.MsftSmeShell.Angular.Form.List.removeButtonTooltip);
     i0.ɵɵattribute("aria-label", ctx_r1.strings.MsftSmeShell.Angular.Form.List.removeButtonAriaLabel);
 } }
 function ListFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵtemplate(1, ListFormFieldComponent_div_1_div_1_Template, 4, 4, "div", 4);
-    i0.ɵɵelementStart(2, "button", 5);
-    i0.ɵɵlistener("click", function ListFormFieldComponent_div_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.addListItem()); });
-    i0.ɵɵelement(3, "span", 6);
-    i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(2, "button", 5, 6);
+    i0.ɵɵlistener("click", function ListFormFieldComponent_div_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.addListItem()); });
+    i0.ɵɵelement(4, "span", 7);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -21015,8 +21221,8 @@ function ListFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", ctx_r0.value)("ngForTrackBy", ctx_r0.trackByIndex);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("title", ctx_r0.strings.MsftSmeShell.Angular.Form.List.addButtonTooltip);
-    i0.ɵɵattribute("aria-label", ctx_r0.strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel);
-    i0.ɵɵadvance(3);
+    i0.ɵɵattribute("aria-label", ctx_r0.addButtonAriaLabel);
+    i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel);
 } }
 /**
@@ -21026,8 +21232,9 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
     /**
      * Initializes a new instance of the ListFormFieldComponent
      */
-    constructor(injector) {
+    constructor(injector, listFormFieldAccessibilityManagerService) {
         super(injector);
+        this.listFormFieldAccessibilityManagerService = listFormFieldAccessibilityManagerService;
     }
     /**
      * The source name to use for logging
@@ -21041,6 +21248,15 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
     get ariaLabel() {
         return this.getMergedDescriptionLabel();
     }
+    /**
+     * It gets the aria label for the add button that can respect when the field is required.
+     */
+    get addButtonAriaLabel() {
+        if (this.required) {
+            return this.strings.MsftSmeShell.Angular.Calendar.AriaLabel.Required.format(this.strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel);
+        }
+        return this.strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel;
+    }
     /**
      * The method called after the component is initialized.
      */
@@ -21053,6 +21269,7 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
      */
     addListItem(value = '') {
         this.value = [...this.value, value];
+        this.listFormFieldAccessibilityManagerService.add(this.value, this.addButton, this.hostElement);
     }
     /**
      * Removes an item at the given index
@@ -21061,10 +21278,7 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
         const value = [...this.value];
         value.splice(index, 1);
         this.value = value;
-        const firstFocusable = Dom.getFirstFocusableDescendent(this.hostElement.nativeElement);
-        if (firstFocusable) {
-            firstFocusable.focus();
-        }
+        this.listFormFieldAccessibilityManagerService.delete(this.value, this.addButton, this.hostElement);
     }
     /**
      * The method called when a <select> element's value changes.
@@ -21105,12 +21319,17 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
         return super.validate(c);
     }
 }
-/** @nocollapse */ ListFormFieldComponent.ɵfac = function ListFormFieldComponent_Factory(t) { return new (t || ListFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-/** @nocollapse */ ListFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ListFormFieldComponent, selectors: [["sme-form-field", "type", "list"]], hostVars: 1, hostBindings: function ListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
+/** @nocollapse */ ListFormFieldComponent.ɵfac = function ListFormFieldComponent_Factory(t) { return new (t || ListFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(ListFormFieldAccessibilityManagerService)); };
+/** @nocollapse */ ListFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ListFormFieldComponent, selectors: [["sme-form-field", "type", "list"]], viewQuery: function ListFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$17, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.addButton = _t.first);
+    } }, hostVars: 1, hostBindings: function ListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
         i0.ɵɵattribute("aria-label", ctx.ariaLabel);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$17, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-margin-bottom-xs", 3, "title", "click"], [1, "sme-icon", "sme-icon-add"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], ["type", "text", 1, "sme-position-flex-auto", "sme-margin-right-xs", 3, "ngModel", "ngModelChange", "input"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function ListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$D, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-margin-bottom-xs", 3, "title", "click"], ["addButton", ""], [1, "sme-icon", "sme-icon-add"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], ["type", "text", 1, "sme-position-flex-auto", "sme-margin-right-xs", 3, "ngModel", "ngModelChange", "input"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function ListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
-        i0.ɵɵtemplate(1, ListFormFieldComponent_div_1_Template, 6, 5, "div", 1);
+        i0.ɵɵtemplate(1, ListFormFieldComponent_div_1_Template, 7, 5, "div", 1);
         i0.ɵɵelement(2, "sme-validation-alert", 2);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
@@ -21122,14 +21341,17 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
     } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, TooltipDirective, ValidationAlertComponent, FormFieldLayoutComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'sme-form-field[type="list"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div *ngIf=\"value\" class=\"sme-margin-bottom-xs sme-form-field-editor\">\r\n    <div *ngFor=\"let item of value;trackBy: trackByIndex; let i = index\"\r\n      class=\"sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width\">\r\n      <input class=\"sme-position-flex-auto sme-margin-right-xs\" type=\"text\" [(ngModel)]=\"value[i]\"\r\n        (input)=\"triggerValueChange()\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.itemAriaLabel.format(label, i + 1, value.length)\" />\r\n      <button type=\"button\" class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.removeButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.List.removeButtonTooltip\" (click)=\"removeItemAt(i)\">\r\n        <span class=\"sme-icon sme-icon-cancel sme-color-red\"></span>\r\n      </button>\r\n    </div>\r\n    <button type=\"button\" class=\"sme-button-trigger sme-button-auto-width sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.List.addButtonTooltip\" (click)=\"addListItem()\">\r\n      <span class=\"sme-icon sme-icon-add\"></span>\r\n      <span>{{strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel}}</span>\r\n    </button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>" }]
-    }], function () { return [{ type: i0.Injector }]; }, { ariaLabel: [{
+        args: [{ selector: 'sme-form-field[type="list"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div *ngIf=\"value\" class=\"sme-margin-bottom-xs sme-form-field-editor\">\r\n    <div *ngFor=\"let item of value;trackBy: trackByIndex; let i = index\"\r\n      class=\"sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width\">\r\n      <input class=\"sme-position-flex-auto sme-margin-right-xs\" type=\"text\" [(ngModel)]=\"value[i]\"\r\n        (input)=\"triggerValueChange()\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.itemAriaLabel.format(label, i + 1, value.length)\" />\r\n      <button type=\"button\" class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.removeButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.List.removeButtonTooltip\" (click)=\"removeItemAt(i)\">\r\n        <span class=\"sme-icon sme-icon-cancel sme-color-red\"></span>\r\n      </button>\r\n    </div>\r\n    <button #addButton type=\"button\" class=\"sme-button-trigger sme-button-auto-width sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"addButtonAriaLabel\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.List.addButtonTooltip\" (click)=\"addListItem()\">\r\n      <span class=\"sme-icon sme-icon-add\"></span>\r\n      <span>{{ strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel }}</span>\r\n    </button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>" }]
+    }], function () { return [{ type: i0.Injector }, { type: ListFormFieldAccessibilityManagerService }]; }, { addButton: [{
+            type: ViewChild,
+            args: ['addButton']
+        }], ariaLabel: [{
             type: HostBinding,
             args: ['attr.aria-label']
         }] }); })();
 
 const _c0$16 = ["input"];
-const _c1$B = ["container"];
+const _c1$C = ["container"];
 const _c2$b = ["incrementButton"];
 const _c3$7 = ["decrementButton"];
 const _c4$6 = ["type", "number"];
@@ -21403,7 +21625,7 @@ let NumberFormFieldComponent = class NumberFormFieldComponent extends SmeInterna
 /** @nocollapse */ NumberFormFieldComponent.ɵfac = function NumberFormFieldComponent_Factory(t) { return new (t || NumberFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ NumberFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: NumberFormFieldComponent, selectors: [["sme-form-field", "type", "number"]], viewQuery: function NumberFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$16, 5);
-        i0.ɵɵviewQuery(_c1$B, 5);
+        i0.ɵɵviewQuery(_c1$C, 5);
         i0.ɵɵviewQuery(_c2$b, 5);
         i0.ɵɵviewQuery(_c3$7, 5);
     } if (rf & 2) {
@@ -21500,6 +21722,56 @@ NumberFormFieldComponent = __decorate([
             type: Input
         }] }); })();
 
+class OrderedListFormFieldAccessibilityManagerService {
+    constructor(formFieldAccessibilityManagerBaseService) {
+        this.formFieldAccessibilityManagerBaseService = formFieldAccessibilityManagerBaseService;
+    }
+    /**
+     * It handles the focus when deleting an item from the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    delete(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement);
+    }
+    /**
+     * It handles the focus when adding an item to the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    add(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement, false);
+    }
+    /**
+     * It handles the focus when promoting an item in the list.
+     * @param hostElement The element reference for the host element.
+     * @param index the current index.
+     */
+    promote(value, hostElement, buttonId) {
+        this.formFieldAccessibilityManagerBaseService.deferredFocusOnTargetBySelector(value, hostElement, buttonId);
+    }
+    /**
+     * It handles the focus when demoting an item in the list.
+     * @param hostElement The element reference for the host element.
+     * @param index the current index.
+     */
+    demote(value, hostElement, buttonId) {
+        this.formFieldAccessibilityManagerBaseService.deferredFocusOnTargetBySelector(value, hostElement, buttonId);
+    }
+}
+/** @nocollapse */ OrderedListFormFieldAccessibilityManagerService.ɵfac = function OrderedListFormFieldAccessibilityManagerService_Factory(t) { return new (t || OrderedListFormFieldAccessibilityManagerService)(i0.ɵɵinject(FormFieldAccessibilityManagerBaseService)); };
+/** @nocollapse */ OrderedListFormFieldAccessibilityManagerService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: OrderedListFormFieldAccessibilityManagerService, factory: OrderedListFormFieldAccessibilityManagerService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OrderedListFormFieldAccessibilityManagerService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], function () { return [{ type: FormFieldAccessibilityManagerBaseService }]; }, null); })();
+
 function OrderedListFormFieldLoaderComponent_sme_option_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "sme-option", 4);
 } if (rf & 2) {
@@ -21523,7 +21795,8 @@ function OrderedListFormFieldLoaderComponent_ng_container_3_Template(rf, ctx) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r2.resolveComponentMember(ctx_r2.propertySchema.options.itemsBinding));
 } }
-const _c0$15 = ["type", "orderedlist"];
+const _c0$15 = ["addButton"];
+const _c1$B = ["type", "orderedlist"];
 function OrderedListFormFieldComponent_div_1_div_1_p_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 14);
     i0.ɵɵtext(1);
@@ -21531,9 +21804,9 @@ function OrderedListFormFieldComponent_div_1_div_1_p_3_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const i_r4 = i0.ɵɵnextContext().index;
     const ctx_r5 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("aria-describedby", ctx_r5.idBag.detailsSpan + i_r4);
+    i0.ɵɵattribute("aria-label", ctx_r5.idBag.detailsSpan + i_r4);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r5.arrayGetValueDisplayString(ctx_r5.value[i_r4]));
+    i0.ɵɵtextInterpolate1(" ", ctx_r5.arrayGetValueDisplayString(ctx_r5.value[i_r4]), "");
 } }
 function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_sme_option_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "sme-option", 18);
@@ -21555,22 +21828,22 @@ function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container
 function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sme-form-field", 15);
-    i0.ɵɵlistener("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const i_r4 = i0.ɵɵnextContext().index; const ctx_r16 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r16.value[i_r4] = $event)); })("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r19 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r19.triggerValueChange()); })("customValidate", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_customValidate_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r20 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r20.newItemCheck()); });
+    i0.ɵɵlistener("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const i_r4 = i0.ɵɵnextContext().index; const ctx_r16 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r16.value[i_r4] = $event)); })("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r19 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r19.triggerValueChange()); });
     i0.ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_Template, 2, 1, "ng-container", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r21 = i0.ɵɵnextContext();
-    const item_r3 = ctx_r21.$implicit;
-    const i_r4 = ctx_r21.index;
+    const ctx_r20 = i0.ɵɵnextContext();
+    const item_r3 = ctx_r20.$implicit;
+    const i_r4 = ctx_r20.index;
     const ctx_r6 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("utaId", item_r3 ? item_r3.toString() + "-combobox" : "new-combobox")("hideHeader", true)("valueComparator", ctx_r6.valueComparator)("ngModel", ctx_r6.value[i_r4])("label", ctx_r6.label)("searchable", ctx_r6.searchable);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r6.options);
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_6_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
+    const _r23 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 19);
-    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const i_r4 = i0.ɵɵnextContext().index; const ctx_r22 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r22.promoteItemAt(i_r4)); });
+    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const i_r4 = i0.ɵɵnextContext().index; const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.promoteItemAt(i_r4)); });
     i0.ɵɵelement(1, "span", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -21580,9 +21853,9 @@ function OrderedListFormFieldComponent_div_1_div_1_button_6_Template(rf, ctx) {
     i0.ɵɵattribute("aria-label", ctx_r7.strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonAriaLabel);
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_7_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
+    const _r27 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const i_r4 = i0.ɵɵnextContext().index; const ctx_r26 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r26.demoteItemAt(i_r4)); });
+    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const i_r4 = i0.ɵɵnextContext().index; const ctx_r25 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r25.demoteItemAt(i_r4)); });
     i0.ɵɵelement(1, "span", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -21592,9 +21865,9 @@ function OrderedListFormFieldComponent_div_1_div_1_button_7_Template(rf, ctx) {
     i0.ɵɵattribute("aria-label", ctx_r8.strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonAriaLabel);
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_8_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
+    const _r31 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); const i_r4 = i0.ɵɵnextContext().index; const ctx_r30 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r30.removeItemAt(i_r4)); });
+    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r31); const i_r4 = i0.ɵɵnextContext().index; const ctx_r29 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r29.removeItemAt(i_r4)); });
     i0.ɵɵelement(1, "span", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -21638,21 +21911,21 @@ function OrderedListFormFieldComponent_div_1_div_1_Template(rf, ctx) { if (rf &
 } }
 function OrderedListFormFieldComponent_div_1_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵelementStart(0, "button", 25, 26);
     i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r33 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r33.addListItem()); });
-    i0.ɵɵtext(1);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("smeDisabled", ctx_r2.loadingOrDisabled || ctx_r2.value.length === ctx_r2.options.length)("title", ctx_r2.strings.MsftSmeShell.Angular.Form.OrderedList.addButtonTooltip);
-    i0.ɵɵattribute("aria-label", ctx_r2.strings.MsftSmeShell.Angular.Form.OrderedList.addButtonAriaLabel);
-    i0.ɵɵadvance(1);
+    i0.ɵɵattribute("aria-label", ctx_r2.addRemoveButtonArialLabel);
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.addButtonText, " ");
 } }
 function OrderedListFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_Template, 9, 10, "div", 4);
-    i0.ɵɵtemplate(2, OrderedListFormFieldComponent_div_1_button_2_Template, 2, 4, "button", 5);
+    i0.ɵɵtemplate(2, OrderedListFormFieldComponent_div_1_button_2_Template, 3, 4, "button", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -21725,8 +21998,9 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
     /**
      * Initializes a new instance of the OrderedListFormFieldComponent
      */
-    constructor(injector) {
+    constructor(injector, orderedListFormFieldAccessibilityManagerService) {
         super(injector);
+        this.orderedListFormFieldAccessibilityManagerService = orderedListFormFieldAccessibilityManagerService;
         /**
          * Single selection is not supported by ordered list
          */
@@ -21743,10 +22017,6 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
          * Indicates allow empty selection
          */
         this.allowEmpty = true;
-        /**
-         * Tracks when new item is added to place focus on.
-         */
-        this.newItemAdded = false;
         this.instructions = this.strings.MsftSmeShell.Angular.Form.OrderedList.instructions;
         this.showAddRemove = true;
         this.showMove = true;
@@ -21770,6 +22040,17 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
     get ariaLabel() {
         return this.getMergedDescriptionLabel();
     }
+    /**
+     * The aria label for the add/remove button when aria label is passed in.
+     * The aria label needs to be in sync with the add button text so that narrator can read the correct content.
+     * It should also respect the required state.
+     */
+    get addRemoveButtonArialLabel() {
+        if (this.addButtonText) {
+            return this.required ? this.strings.MsftSmeShell.Angular.Calendar.AriaLabel.Required.format(this.addButtonText) : this.addButtonText;
+        }
+        return this.required ? this.strings.MsftSmeShell.Angular.Calendar.AriaLabel.Required.format(this.strings.MsftSmeShell.Angular.Form.OrderedList.addButtonAriaLabel) : this.strings.MsftSmeShell.Angular.Form.OrderedList.addButtonAriaLabel;
+    }
     /**
      * The method called after the component is initialized.
      */
@@ -21807,7 +22088,7 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
             return false;
         }
         this.value = [...this.value, value];
-        this.newItemAdded = true;
+        this.orderedListFormFieldAccessibilityManagerService.add(this.value, this.addButton, this.hostElement);
         return true;
     }
     /**
@@ -21815,26 +22096,22 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
      * @param index The index of the item being demoted.
      */
     demoteItemAt(index) {
-        if (index !== this.value.length - 1) {
-            this.moveItem(index, index + 1);
-            const focusable = document.getElementById(`${this.idBag.demote}${index + 1}`);
-            if (focusable) {
-                focusable.focus();
-            }
+        if (index === this.value.length - 1) {
+            return;
         }
+        this.moveItem(index, index + 1);
+        this.orderedListFormFieldAccessibilityManagerService.demote(this.value, this.hostElement, `#${this.idBag.demote}${index + 1}`);
     }
     /**
      * Promotes an item at the given index by 1
      * @param index The index of the item being promoted.
      */
     promoteItemAt(index) {
-        if (index !== 0) {
-            this.moveItem(index, index - 1);
-            const focusable = document.getElementById(`${this.idBag.promote}${index - 1}`);
-            if (focusable) {
-                focusable.focus();
-            }
+        if (index === 0) {
+            return;
         }
+        this.moveItem(index, index - 1);
+        this.orderedListFormFieldAccessibilityManagerService.promote(this.value, this.hostElement, `#${this.idBag.promote}${index - 1}`);
     }
     /**
      * Returns the index to track items in the array.
@@ -21846,10 +22123,7 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
     removeItemAt(index) {
         this.value.splice(index, 1);
         this.triggerValueChange();
-        const firstFocusable = Dom.getFirstFocusableDescendent(this.hostElement.nativeElement);
-        if (firstFocusable) {
-            firstFocusable.focus();
-        }
+        this.orderedListFormFieldAccessibilityManagerService.delete(this.value, this.addButton, this.hostElement);
     }
     /**
      * Moves an element of an array from a starting index to a destination index.
@@ -21872,18 +22146,6 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
         }
         this.value = value;
     }
-    /**
-     * Places focus on new item when it is added.
-     */
-    newItemCheck() {
-        if (this.newItemAdded) {
-            const focusable = Dom.findChildElementDFS(this.hostElement.nativeElement, (element) => element.tagName.toUpperCase() === 'INPUT', ElementPosition.Last);
-            if (focusable) {
-                focusable.focus();
-            }
-            this.newItemAdded = false;
-        }
-    }
     /**
      * The method called when a <select> element's value changes.
      */
@@ -21921,10 +22183,15 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
         return super.validate(c);
     }
 };
-/** @nocollapse */ OrderedListFormFieldComponent.ɵfac = function OrderedListFormFieldComponent_Factory(t) { return new (t || OrderedListFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-/** @nocollapse */ OrderedListFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: OrderedListFormFieldComponent, selectors: [["sme-form-field", "type", "orderedlist"]], hostVars: 1, hostBindings: function OrderedListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
+/** @nocollapse */ OrderedListFormFieldComponent.ɵfac = function OrderedListFormFieldComponent_Factory(t) { return new (t || OrderedListFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(OrderedListFormFieldAccessibilityManagerService)); };
+/** @nocollapse */ OrderedListFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: OrderedListFormFieldComponent, selectors: [["sme-form-field", "type", "orderedlist"]], viewQuery: function OrderedListFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$15, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.addButton = _t.first);
+    } }, hostVars: 1, hostBindings: function OrderedListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
         i0.ɵɵattribute("aria-label", ctx.ariaLabel);
-    } }, inputs: { showAddRemove: "showAddRemove", showMove: "showMove", showSelect: "showSelect", addButtonText: "addButtonText", searchable: "searchable", allowEmpty: "allowEmpty" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$15, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", "data-uta-id", "add-button", 3, "smeDisabled", "title", "click", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], [1, "sme-screen-reader", 3, "id"], ["class", "sme-position-flex-auto", "role", "textbox", 4, "ngIf"], [1, "sme-layout-relative", "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", "customValidate", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "promote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "demote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "remove-button", 3, "title", "smeDisabled", "click", 4, "ngIf"], ["role", "textbox", 1, "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", "customValidate"], [4, "ngFor", "ngForOf"], [3, "utaId", "value", "label", "disabled", 4, "ngIf"], [3, "utaId", "value", "label", "disabled"], ["type", "button", "data-uta-id", "promote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], ["type", "button", "data-uta-id", "demote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-down"], ["type", "button", "data-uta-id", "remove-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"], ["type", "button", "data-uta-id", "add-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"]], template: function OrderedListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { showAddRemove: "showAddRemove", showMove: "showMove", showSelect: "showSelect", addButtonText: "addButtonText", searchable: "searchable", allowEmpty: "allowEmpty" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$B, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", "data-uta-id", "add-button", 3, "smeDisabled", "title", "click", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], [1, "sme-screen-reader", 3, "id"], ["class", "sme-position-flex-auto", "role", "textbox", 4, "ngIf"], [1, "sme-layout-relative", "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "promote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "demote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "remove-button", 3, "title", "smeDisabled", "click", 4, "ngIf"], ["role", "textbox", 1, "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange"], [4, "ngFor", "ngForOf"], [3, "utaId", "value", "label", "disabled", 4, "ngIf"], [3, "utaId", "value", "label", "disabled"], ["type", "button", "data-uta-id", "promote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], ["type", "button", "data-uta-id", "demote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-down"], ["type", "button", "data-uta-id", "remove-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"], ["type", "button", "data-uta-id", "add-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"], ["addButton", ""]], template: function OrderedListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
         i0.ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_Template, 3, 3, "div", 1);
         i0.ɵɵelement(2, "sme-validation-alert", 2);
@@ -21980,12 +22247,16 @@ OrderedListFormFieldComponent = __decorate([
             }
         ]
     }),
-    __metadata("design:paramtypes", [Injector])
+    __metadata("design:paramtypes", [Injector,
+        OrderedListFormFieldAccessibilityManagerService])
 ], OrderedListFormFieldComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OrderedListFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'sme-form-field[type="orderedlist"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div *ngIf=\"value\" class=\"sme-margin-bottom-xs sme-form-field-editor\">\r\n    <div *ngFor=\"let item of value; trackBy: trackByIndex; let i = index\"\r\n      class=\"sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width\"\r\n      [attr.data-uta-id]=\"item ? item.toString() + '-row' : 'new-item-row'\">\r\n      <label class=\"sme-screen-reader\" [id]=\"idBag.detailsSpan + i\">\r\n        {{strings.MsftSmeShell.Angular.Form.OrderedList.itemAriaDescription.format(i + 1, value.length)}}\r\n      </label>\r\n      <p *ngIf=\"!showSelect\" class=\"sme-position-flex-auto\" role=\"textbox\"\r\n        [attr.aria-describedby]=\"idBag.detailsSpan + i\">{{arrayGetValueDisplayString(value[i])}}</p>\r\n      <div class=\"sme-layout-relative sme-position-flex-auto\" [class.sme-margin-right-xs]=\"showMove || showAddRemove\">\r\n        <sme-form-field *ngIf=\"showSelect\" [utaId]=\"item ? item.toString() + '-combobox' : 'new-combobox'\"\r\n          type=\"combobox\" [hideHeader]=\"true\" [valueComparator]=\"valueComparator\" [(ngModel)]=\"value[i]\"\r\n          (ngModelChange)=\"triggerValueChange()\" (customValidate)=\"newItemCheck()\" [label]=\"label\"\r\n          [searchable]=\"searchable\">\r\n          <ng-container *ngFor=\"let option of options\">\r\n            <sme-option *ngIf=\"!option.isSelected || arrayValueComparator(option.value, value[i])\"\r\n              [utaId]=\"option.utaId ? option.utaId : option.value\" [value]=\"option.value\" [label]=\"option.toString()\"\r\n              [disabled]=\"option.disabled\">\r\n            </sme-option>\r\n          </ng-container>\r\n        </sme-form-field>\r\n      </div>\r\n      <button *ngIf=\"showMove\" [id]=\"idBag.promote + i\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonTooltip\" (click)=\"promoteItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"promote-button\">\r\n        <span class=\"sme-icon sme-icon-up\"></span>\r\n      </button>\r\n      <button *ngIf=\"showMove\" [id]=\"idBag.demote + i\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonTooltip\" (click)=\"demoteItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"demote-button\">\r\n        <span class=\"sme-icon sme-icon-down\"></span>\r\n      </button>\r\n      <button *ngIf=\"showAddRemove\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.removeButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.removeButtonTooltip\" (click)=\"removeItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"remove-button\">\r\n        <span class=\"sme-icon sme-icon-cancel sme-color-red\"></span>\r\n      </button>\r\n    </div>\r\n    <button *ngIf=\"showAddRemove\" type=\"button\" [smeDisabled]=\"loadingOrDisabled || value.length === options.length\"\r\n      class=\"sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.addButtonAriaLabel\" data-uta-id=\"add-button\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.addButtonTooltip\" (click)=\"addListItem()\">\r\n      {{addButtonText}}\r\n    </button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { showAddRemove: [{
+        args: [{ selector: 'sme-form-field[type="orderedlist"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div *ngIf=\"value\" class=\"sme-margin-bottom-xs sme-form-field-editor\">\r\n    <div *ngFor=\"let item of value; trackBy: trackByIndex; let i = index\"\r\n      class=\"sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width\"\r\n      [attr.data-uta-id]=\"item ? item.toString() + '-row' : 'new-item-row'\">\r\n      <label class=\"sme-screen-reader\" [id]=\"idBag.detailsSpan + i\">\r\n        {{ strings.MsftSmeShell.Angular.Form.OrderedList.itemAriaDescription.format(i + 1, value.length) }}\r\n      </label>\r\n      <p *ngIf=\"!showSelect\" class=\"sme-position-flex-auto\" role=\"textbox\" [attr.aria-label]=\"idBag.detailsSpan + i\">\r\n        {{ arrayGetValueDisplayString(value[i]) }}</p>\r\n      <div class=\"sme-layout-relative sme-position-flex-auto\" [class.sme-margin-right-xs]=\"showMove || showAddRemove\">\r\n        <sme-form-field *ngIf=\"showSelect\" [utaId]=\"item ? item.toString() + '-combobox' : 'new-combobox'\"\r\n          type=\"combobox\" [hideHeader]=\"true\" [valueComparator]=\"valueComparator\" [(ngModel)]=\"value[i]\"\r\n          (ngModelChange)=\"triggerValueChange()\" [label]=\"label\"\r\n          [searchable]=\"searchable\">\r\n          <ng-container *ngFor=\"let option of options\">\r\n            <sme-option *ngIf=\"!option.isSelected || arrayValueComparator(option.value, value[i])\"\r\n              [utaId]=\"option.utaId ? option.utaId : option.value\" [value]=\"option.value\" [label]=\"option.toString()\"\r\n              [disabled]=\"option.disabled\">\r\n            </sme-option>\r\n          </ng-container>\r\n        </sme-form-field>\r\n      </div>\r\n      <button *ngIf=\"showMove\" [id]=\"idBag.promote + i\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonTooltip\" (click)=\"promoteItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"promote-button\">\r\n        <span class=\"sme-icon sme-icon-up\"></span>\r\n      </button>\r\n      <button *ngIf=\"showMove\" [id]=\"idBag.demote + i\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonTooltip\" (click)=\"demoteItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"demote-button\">\r\n        <span class=\"sme-icon sme-icon-down\"></span>\r\n      </button>\r\n      <button *ngIf=\"showAddRemove\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.removeButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.removeButtonTooltip\" (click)=\"removeItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"remove-button\">\r\n        <span class=\"sme-icon sme-icon-cancel sme-color-red\"></span>\r\n      </button>\r\n    </div>\r\n    <button #addButton *ngIf=\"showAddRemove\" type=\"button\" [smeDisabled]=\"loadingOrDisabled || value.length === options.length\"\r\n      class=\"sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"addRemoveButtonArialLabel\" data-uta-id=\"add-button\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.addButtonTooltip\" (click)=\"addListItem()\">\r\n      {{ addButtonText }}\r\n    </button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
+    }], function () { return [{ type: i0.Injector }, { type: OrderedListFormFieldAccessibilityManagerService }]; }, { addButton: [{
+            type: ViewChild,
+            args: ['addButton']
+        }], showAddRemove: [{
             type: Input
         }], showMove: [{
             type: Input
@@ -24448,7 +24719,13 @@ class SmeFormsModule {
 }
 /** @nocollapse */ SmeFormsModule.ɵfac = function SmeFormsModule_Factory(t) { return new (t || SmeFormsModule)(); };
 /** @nocollapse */ SmeFormsModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: SmeFormsModule });
-/** @nocollapse */ SmeFormsModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [AccordionModule,
+/** @nocollapse */ SmeFormsModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [
+        // TODO: each form field should have its own accessibility manager service
+        ArrayFormFieldAccessibilityManagerService,
+        ListFormFieldAccessibilityManagerService,
+        OrderedListFormFieldAccessibilityManagerService,
+        FormFieldAccessibilityManagerBaseService
+    ], imports: [AccordionModule,
         ActionsModule,
         AutofocusModule,
         CommonModule,
@@ -24620,6 +24897,13 @@ class SmeFormsModule {
                     TileDirectivesModule,
                     TooltipModule,
                     TelemetryDirectiveModule
+                ],
+                providers: [
+                    // TODO: each form field should have its own accessibility manager service
+                    ArrayFormFieldAccessibilityManagerService,
+                    ListFormFieldAccessibilityManagerService,
+                    OrderedListFormFieldAccessibilityManagerService,
+                    FormFieldAccessibilityManagerBaseService
                 ]
             }]
     }], null, null); })();
@@ -42970,7 +43254,7 @@ function PageAlertBarComponent_a_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", !!ctx_r2.alert.detailsCaption ? ctx_r2.alert.detailsCaption : ctx_r2.defaultDetailsLabel);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", !!ctx_r2.alert.detailsLabel ? ctx_r2.alert.detailsLabel : ctx_r2.defaultDetailsLabel, "\n");
+    i0.ɵɵtextInterpolate1(" ", !!ctx_r2.alert.detailsLabel ? ctx_r2.alert.detailsLabel : ctx_r2.defaultDetailsLabel, " ");
 } }
 /**
  *
@@ -43121,8 +43405,8 @@ class PageAlertBarComponent extends SpacerBaseDirective {
         i0.ɵɵelementStart(2, "span");
         i0.ɵɵtext(3);
         i0.ɵɵtemplate(4, PageAlertBarComponent_a_4_Template, 2, 6, "a", 1);
-        i0.ɵɵelementEnd();
         i0.ɵɵtemplate(5, PageAlertBarComponent_a_5_Template, 2, 2, "a", 2);
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵclassMapInterpolate1("sme-margin-right-xs sme-position-flex-none ", ctx.iconClass, "");
         i0.ɵɵclassProp("sme-icon", !!ctx.iconClass);
@@ -43137,7 +43421,7 @@ class PageAlertBarComponent extends SpacerBaseDirective {
     } }, dependencies: [i1$1.NgIf, StatusIconComponent, TooltipDirective], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PageAlertBarComponent, [{
         type: Component,
-        args: [{ selector: 'sme-page-alert-bar', template: "<span class=\"sme-margin-right-xs sme-position-flex-none {{iconClass}}\" [class.sme-icon]=\"!!iconClass\">\r\n  <sme-status-icon *ngIf=\"statusIcon !== null\" class=\"sme-layout-inline-block\" [status]=\"statusIcon\" size=\"16px\">\r\n  </sme-status-icon>\r\n</span>\r\n\r\n<span>\r\n  {{ alert.message }}\r\n  <a *ngIf=\"alert.externalLink\" class=\"sme-link sme-focus-zone sme-icon-after\" [class]=\"alert?.externalLink?.iconClass\"\r\n    [class.sme-icon]=\"!!alert?.externalLink?.iconClass\" href=\"{{alert.externalLink.url}}\"\r\n    target=\"_blank\">{{ alert.externalLink.title }}</a>\r\n</span>\r\n\r\n<a *ngIf=\"!!alert.detailsCommand\" class=\"sme-margin-left-xs sme-position-flex-none sme-link sme-focus-zone\" tabindex=\"0\" role=\"link\"\r\n  [title]=\"!!alert.detailsCaption ? alert.detailsCaption : defaultDetailsLabel\" (click)=\"alert.detailsCommand($event)\">\r\n  {{ !!alert.detailsLabel ? alert.detailsLabel : defaultDetailsLabel }}\r\n</a>\r\n" }]
+        args: [{ selector: 'sme-page-alert-bar', template: "<span class=\"sme-margin-right-xs sme-position-flex-none {{iconClass}}\" [class.sme-icon]=\"!!iconClass\">\r\n  <sme-status-icon *ngIf=\"statusIcon !== null\" class=\"sme-layout-inline-block\" [status]=\"statusIcon\" size=\"16px\">\r\n  </sme-status-icon>\r\n</span>\r\n\r\n<span>\r\n  {{ alert.message }}\r\n  <a *ngIf=\"alert.externalLink\" class=\"sme-link sme-focus-zone sme-icon-after\" [class]=\"alert?.externalLink?.iconClass\"\r\n    [class.sme-icon]=\"!!alert?.externalLink?.iconClass\" href=\"{{alert.externalLink.url}}\" target=\"_blank\">{{\r\n    alert.externalLink.title }}</a>\r\n  <a *ngIf=\"!!alert.detailsCommand\" class=\"sme-margin-left-xs sme-position-flex-none sme-link sme-focus-zone\"\r\n    tabindex=\"0\" role=\"link\" [title]=\"!!alert.detailsCaption ? alert.detailsCaption : defaultDetailsLabel\"\r\n    (click)=\"alert.detailsCommand($event)\">\r\n    {{ !!alert.detailsLabel ? alert.detailsLabel : defaultDetailsLabel }}\r\n  </a>\r\n</span>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, { isBackgroundTransparent: [{
             type: Input
         }], isCritical: [{
@@ -49797,7 +50081,7 @@ class WizardNavigationButtonComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ WizardNavigationButtonComponent.ɵfac = function WizardNavigationButtonComponent_Factory(t) { return new (t || WizardNavigationButtonComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-/** @nocollapse */ WizardNavigationButtonComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: WizardNavigationButtonComponent, selectors: [["sme-wizard-navigation-button"]], inputs: { showIcons: "showIcons", leftIcon: "leftIcon", rightIcon: "rightIcon", buttonAutoWidth: "buttonAutoWidth", buttons: "buttons" }, outputs: { startButtonClicked: "startButtonClicked", endButtonClicked: "endButtonClicked" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 16, consts: [[1, "sme-arrange-stack-h", "sme-position-stretch-h"], [1, "sme-padding-right-xs"], ["type", "button", "aria-live", "polite", "tabIndex", "0", 1, "sme-arrange-stack-h", 3, "disabled", "click"], ["class", "sme-icon", 3, "class", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-position-flex-grow-start", "sme-arrange-ellipsis", "sme-action-button-text-span"], [1, "sme-icon"]], template: function WizardNavigationButtonComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ WizardNavigationButtonComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: WizardNavigationButtonComponent, selectors: [["sme-wizard-navigation-button"]], inputs: { showIcons: "showIcons", leftIcon: "leftIcon", rightIcon: "rightIcon", buttonAutoWidth: "buttonAutoWidth", buttons: "buttons" }, outputs: { startButtonClicked: "startButtonClicked", endButtonClicked: "endButtonClicked" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 16, consts: [[1, "sme-arrange-stack-h", "sme-position-stretch-h"], [1, "sme-padding-right-xs"], ["type", "button", "aria-live", "polite", "tabindex", "0", 1, "sme-arrange-stack-h", 3, "disabled", "click"], ["class", "sme-icon", 3, "class", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-position-flex-grow-start", "sme-arrange-ellipsis", "sme-action-button-text-span"], [1, "sme-icon"]], template: function WizardNavigationButtonComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "span", 1)(2, "button", 2);
         i0.ɵɵlistener("click", function WizardNavigationButtonComponent_Template_button_click_2_listener() { return ctx.onStartButtonClick(); });
         i0.ɵɵtemplate(3, WizardNavigationButtonComponent_span_3_Template, 1, 2, "span", 3);
@@ -49832,7 +50116,7 @@ class WizardNavigationButtonComponent extends CoreBaseComponent {
     } }, dependencies: [i1$1.NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardNavigationButtonComponent, [{
         type: Component,
-        args: [{ selector: 'sme-wizard-navigation-button', template: "<div class=\"sme-arrange-stack-h sme-position-stretch-h\" [class.sme-layout-hidden]=\"!render\">\r\n  <span class=\"sme-padding-right-xs\">\r\n    <button type=\"button\" aria-live=\"polite\" class=\"sme-arrange-stack-h\" tabIndex=\"0\"\r\n      [class]=\"buttons[currentStartButtonIndex]?.class\"\r\n      [class.sme-button-auto-width]=\"buttonAutoWidth\"\r\n      [disabled]=\"checkStartDisabled(currentStartButtonIndex)\"\r\n      (click)=\"onStartButtonClick()\">\r\n      <span *ngIf=\"showIcons\" class=\"sme-icon\" [class]=\"leftIcon\"></span>\r\n      <span class=\"sme-position-flex-auto sme-position-flex-grow-start sme-arrange-ellipsis sme-action-button-text-span\">\r\n        {{ buttons[currentStartButtonIndex] ? buttons[currentStartButtonIndex].label : strings.MsftSmeShell.Angular.Wizard.Lite.Actions.previous }}</span>\r\n    </button>\r\n  </span>\r\n  <button type=\"button\" aria-live=\"polite\" class=\"sme-arrange-stack-h\" tabIndex=\"0\"\r\n    [class]=\"buttons[currentStartButtonIndex]?.class\"\r\n    [class.sme-button-auto-width]=\"buttonAutoWidth\"\r\n    [disabled]=\"checkEndDisabled(currentStartButtonIndex)\"\r\n    (click)=\"onEndButtonClick()\">\r\n    <span class=\"sme-position-flex-auto sme-position-flex-grow-start sme-arrange-ellipsis sme-action-button-text-span\">\r\n      {{ buttons[currentStartButtonIndex + 2] ? buttons[currentStartButtonIndex + 2].label : strings.MsftSmeShell.Angular.Wizard.Lite.Actions.next }}</span>\r\n    <span *ngIf=\"showIcons\" class=\"sme-icon\" [class]=\"rightIcon\"></span>\r\n  </button>\r\n</div>\r\n" }]
+        args: [{ selector: 'sme-wizard-navigation-button', template: "<div class=\"sme-arrange-stack-h sme-position-stretch-h\" [class.sme-layout-hidden]=\"!render\">\r\n  <span class=\"sme-padding-right-xs\">\r\n    <button type=\"button\" aria-live=\"polite\" class=\"sme-arrange-stack-h\" tabindex=\"0\"\r\n      [class]=\"buttons[currentStartButtonIndex]?.class\"\r\n      [class.sme-button-auto-width]=\"buttonAutoWidth\"\r\n      [disabled]=\"checkStartDisabled(currentStartButtonIndex)\"\r\n      (click)=\"onStartButtonClick()\">\r\n      <span *ngIf=\"showIcons\" class=\"sme-icon\" [class]=\"leftIcon\"></span>\r\n      <span class=\"sme-position-flex-auto sme-position-flex-grow-start sme-arrange-ellipsis sme-action-button-text-span\">\r\n        {{ buttons[currentStartButtonIndex] ? buttons[currentStartButtonIndex].label : strings.MsftSmeShell.Angular.Wizard.Lite.Actions.previous }}</span>\r\n    </button>\r\n  </span>\r\n  <button type=\"button\" aria-live=\"polite\" class=\"sme-arrange-stack-h\" tabindex=\"0\"\r\n    [class]=\"buttons[currentStartButtonIndex]?.class\"\r\n    [class.sme-button-auto-width]=\"buttonAutoWidth\"\r\n    [disabled]=\"checkEndDisabled(currentStartButtonIndex)\"\r\n    (click)=\"onEndButtonClick()\">\r\n    <span class=\"sme-position-flex-auto sme-position-flex-grow-start sme-arrange-ellipsis sme-action-button-text-span\">\r\n      {{ buttons[currentStartButtonIndex + 2] ? buttons[currentStartButtonIndex + 2].label : strings.MsftSmeShell.Angular.Wizard.Lite.Actions.next }}</span>\r\n    <span *ngIf=\"showIcons\" class=\"sme-icon\" [class]=\"rightIcon\"></span>\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, { showIcons: [{
             type: Input
         }], leftIcon: [{
@@ -53492,6 +53776,76 @@ function getFullRouteParams(route) {
     return params;
 }
 
+/**
+ * Base class for snap in specific extension listeners
+ */
+class SnapInListener extends ExtensionClientListener {
+    /**
+     * Initializes a new instance of the SnapInListener class
+     * @param rpc The rpc context
+     */
+    constructor(rpc, extensionBroker, hostElement) {
+        super(rpc);
+        this.extensionBroker = extensionBroker;
+        this.hostElement = hostElement;
+    }
+    ngAfterViewInit() {
+        if (this.hostElement) {
+            document.body.setAttribute('sme-snap-in', '');
+            document.addEventListener('wheel', event => {
+                // do not listen to wheel if it is for internal scroll
+                // default behavior may try to scroll parent first THEN internal scroll,
+                // see if we can update this to match that behavior
+                if (!Dom.getOverflowAncestor(this.hostElement.nativeElement)) {
+                    this.emitOutput({ deltaY: event.deltaY });
+                }
+            });
+            this.hostElement.nativeElement.addEventListener('focusin', (event) => {
+                // check if we actually need to do these
+                event.preventDefault();
+                event.stopPropagation();
+                // send info about the current active element
+                if (document.activeElement) {
+                    const focusedElementRect = document.activeElement.getBoundingClientRect();
+                    this.emitOutput({ focusedElementRect });
+                }
+            });
+        }
+    }
+    /**
+     * Occurs when any method is called on this worker from another extension
+     */
+    onCall(method, version, ...args) {
+        if (method === 'input' && args && args.length > 0 && args[0].length > 0) {
+            this.onInputReceived(args[0][0]);
+            return of(null);
+        }
+        return super.throwMethodNotFound(method, version);
+    }
+    /**
+     * Occurs when an input is received on this snap-in
+     * @param input the input object.
+     */
+    onInputReceived(input) {
+        this.input = input;
+    }
+    /**
+     * Emits an output to the consumer of this snap-in.
+     * @param output the output object.
+     */
+    emitOutput(output) {
+        // TODO: should there be a separate output type for page events?
+        // abstract output from consumer by mapping to null.
+        return this.extensionBroker.emitResult(this.instanceId, 'output', output)
+            .pipe(map(() => null));
+    }
+}
+/** @nocollapse */ SnapInListener.ɵfac = function SnapInListener_Factory(t) { return new (t || SnapInListener)(i0.ɵɵdirectiveInject(i1$3.Rpc), i0.ɵɵdirectiveInject(i2.ExtensionBroker), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+/** @nocollapse */ SnapInListener.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: SnapInListener, features: [i0.ɵɵInheritDefinitionFeature] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SnapInListener, [{
+        type: Directive
+    }], function () { return [{ type: i1$3.Rpc }, { type: i2.ExtensionBroker }, { type: i0.ElementRef }]; }, null); })();
+
 /// <reference path='../../dist/packages/core/index.d.ts'/>
 /// <reference path='../../dist/packages/core/special.d.ts'/>
 /// <reference path='../../dist/packages/core/polyfills.d.ts'/>
@@ -53503,5 +53857,5 @@ function getFullRouteParams(route) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, ActionBarComponent, ActionBarDirective, ActionButton, ActionButtonAsync, ActionButtonAsyncComponent, ActionButtonComponent, ActionButtonRendererComponent, ActionContainerComponent, ActionDropdown, ActionDropdownComponent, ActionDropdownRendererComponent, ActionItem, ActionItemComponent, ActionItemRendererComponent, ActionItemSeparator, ActionItemSeparatorComponent, ActionItemSeparatorRendererComponent, ActionMenuComponent, ActionsModule, ActiveConnectionService, ActiveDirectoryModule, ActiveDirectorySearchFormFieldComponent, ActiveDirectoryService, AlertBarComponent, AlertBarModule, AlertBarService, AlertSeverity, AppContextService, AppErrorHandler, ApplyMode, AriaLiveOptions, ArrayFormFieldComponent, ArrayFormFieldLoaderComponent, ArrayPropertySchemaFieldLoaderComponent, AuthorizationService, AutofocusDirective, AutofocusModule, AzureManagerService, BackdropComponent, BackdropModule, BackgroundExtensionRootComponent, BadgeBaseComponent, BadgeFeatureTypes, BadgeModule, BannerComponent, BannerModule, BaseComponent, BaseDialogComponent, BaseFormData, BasePropertiesForm, BasicFormLoaderComponent, BatchService, BooleanConverterPipe, BooleanConverterPipeModule, BreadcrumbComponent, BreadcrumbHeaderComponent, BreadcrumbHeaderModule, BreadcrumbModule, BreadcrumbSeparator, BugFixesFeatureBadgeComponent, ByteUnitConverterPipe, ByteUnitConverterPipeModule, CAPSLOCK_VALIDATOR, CalendarFormFieldComponent, CanDeactivateGuard, CapacityBarChartComponent, CapacityBase, CapacityDoughnutChartComponent, CapsLockValidatorDirective, ChartComponent, ChartModule, CheckboxFormFieldComponent, CheckboxFormFieldLoaderComponent, ChecklistFormFieldComponent, ChecklistFormFieldLoaderComponent, ChevronPosition, ChoiceDialogComponent, CimService, CimStreamService, ClampDirective, ClampModule, ClockFormFieldComponent, CodeFormFieldComponent, CodeFormFieldLoaderComponent, ColumnPickerService, ComboboxFormFieldComponent, ComboboxFormFieldLoaderComponent, ComingSoonBadgeComponent, CommonDialogsComponent, CommonSettingsComponent, CommonSettingsComponentBase, ConfirmationDialogComponent, ConfirmationListDialogComponent, ConnectionService, ConnectivityEnforcer, ConnectivityLevel, ContextDropdownComponent, ContextMenuComponent, ContextMenuDirective, ContextMenuModule, CoreServiceModule, CredSSPEnabledBadgeComponent, CredSSPManagerService, CriticalBadgeComponent, CustomBadgeComponent, DataOnlyFormFieldLoaderComponent, DataTableColumnComponent, DataTableColumnPickerExtension, DataTableComponent, DataTableDownloadDataType, DataTableDownloadService, DataTableModule, DataTableMultipleSelectMode, DataTableRenderedItemType, DataTableSortMode, DateConverterPipe, DateConverterPipeModule, DateFormFieldComponent, DateTimeFormFieldComponent, DateTimeRangeFormFieldComponent, DateTimeRangeOptionComponent, Debounce, DeleteColumnComponent, DetailsComponent, DetailsModule, DevGuardService, DialogChangeEvent, DialogCloseReason, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogMode, DialogModule, DialogService, DisabledChangedEvent, DisabledDirective, DisabledModule, DiscardDirective, DiscardModule, DocumentationComponent, DocumentationModule, DoughnutChartComponent, DoughnutChartModule, DropdownComponent, DropdownModule, DropdownService, DynamicActionItemComponent, DynamicComponentBase, EditableCollectionItem, EditableLayoutComponent, EditableLayoutItemComponent, ElectronService, EnumConverterPipe, EnumConverterPipeModule, ExperimentGuardService, ExtensionBrokerService, ExtensionDialogComponent, ExtensionRootModule, FeedbackBadgeComponent, FieldsetDirective, FileFormFieldComponent, FileFormFieldLoaderComponent, FileTransferService, FilterPipe, FilterPipeModule, FormAsyncValidatorBase, FormField, FormFieldAccessor, FormFieldAccessorDirective, FormFieldAsyncValidatorDirective, FormFieldComponent, FormFieldIsolatorComponent, FormFieldLayoutComponent, FormFieldOptionComponent, FormFieldOptionSubFormTemplateLoaderComponent, FormFieldOrientation, FormFieldTemplateDirective, FormFieldValidatorDirective, FormValidatorBase, FormWizardStepComponent, FormatPipe, FormatPipeModule, FrameService, GatewayService, GuardsModule, GuidedPaneComponent, GuidedPanelComponent, GuidedPanelModule, HeaderComponent, HeaderModule, HealthAlertSeverity, HighlightPipe, HighlightPipeModule, HorizontalBarChartComponent, HorizontalBarChartModule, HttpService, IconLayerComponent, IconModule, IconTextComponent, IdleComponent, IdleModule, ImprovementFeatureBadgeComponent, InputValidatorDirective, InstallationTypeGuardService, JobsService, JsonFormFieldComponent, JsonFormFieldLoaderComponent, LayeredIconComponent, LayoutComponent, LayoutConfigGenerator, LayoutDefinitionComponent, LayoutDrivenType, LayoutItemComponent, LayoutItemConfigMode, LayoutItemConfigPropertyWidthType, LayoutModule, LegendComponent, LegendEntryComponent, LegendModule, LifetimeService, LineChartComponent, LineChartModule, LineChartType, ListFormFieldComponent, LoadingWheelComponent, LoadingWheelModule, LoadingWheelSize, LocalDateConverterPipe, MachineNameValidatorDirective, MarkdownDirective, MarkdownModule, MasterViewComponent, MasterViewContentDirective, MasterViewContentModule, MasterViewModule, MatchFieldValidatorDirective, MediaConversion2, MessageDialogComponent, Monaco, Navigation, NavigationService, NavigationTitle, NewBadgeComponent, NewFeatureBadgeComponent, NodeCredentialsFormComponent, NodeCredentialsFormModule, NodeService, NotificationService, NumberFormFieldComponent, NumberFormFieldLoaderComponent, ObjectDefaultFormFieldLoaderComponent, ObjectPropertySchemaFieldLoaderComponent, OptionsFormFieldComponent, OrderedListFormFieldComponent, OrderedListFormFieldLoaderComponent, PageAlertBarComponent, PageAlertBarModule, PanelControlComponent, PasswordFormFieldComponent, PasswordFormFieldLoaderComponent, PivotComponent, PivotModule, PivotTabComponent, PivotTabType, PowerShellService, PowerShellStreamService, PreviewBadgeComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridModule, QueryDataItemPresetGenerator, QueryDataItemValueType, QueryDataOperand, QueryEditorComponent, QueryEditorModule, RadioGroupFormFieldComponent, RadioGroupFormFieldLoaderComponent, RatingRadioGroupFormFieldComponent, ReactiveForm, ReactiveFormAccessor, ReactiveFormWizardStepComponent, ReadonlyFormFieldComponent, RequiredTrimmedValidatorDirective, ResizerComponent, ResizerModule, ResourceService, RpcService, RpcShellService, SME_ASYNC_VALIDATORS, SME_FORM_FIELD_VALIDATION_ALERT_CONTAINER_PROVIDER, SME_LAYOUT_PROVIDER, SME_VALIDATORS, ScheduleRebootService, SchemaDataTypeStore, SchemaFieldContext, SchemaFieldHostComponent, SchemaFieldHostModule, SchemaFieldLoaderComponentBase, SchemaFormComponent, SchemaFormModule, SchemaPrimitiveType, SchemaUtilities, SearchFormFieldComponent, SecureExtensionDataService, SelectFormFieldDirective, SettingsComponent, SettingsContentComponent, SettingsFooterComponent, SettingsFormDirective, SettingsFormService, SettingsHeaderComponent, SettingsModule, SettingsNavigationComponent, SettingsPageComponent, SettingsService, SimplePropertySchemaFieldLoaderComponent, SliderFormFieldComponent, SliderFormFieldLoaderComponent, SmeExtensionService, SmeFormsModule, SmeHeaderData, SmeInjectableBase, SmeInternalFormFieldComponent, SmeResponsiveWindowBreakpoints, SmeResponsiveWindowBreakpointsValue, SmeResponsiveWindowManagerComponent, SmeRouterLinkDirective, SmeRouterModule, SmeSchemaProperty, SmeTemplateOutletModule, SmeUxComponent, SmeUxContentComponent, SmeUxContentModule, SmeUxFooterComponent, SmeUxFooterModule, SmeUxModule, SmeUxPageComponent, SmeUxPageModule, SmeWizardLiteFooterTemplateComponent, SmeWizardLiteFooterTemplateModule, SnapInExtensionComponent, SnapInExtensionModule, SplitViewComponent, SplitViewContentComponent, SplitViewModule, SplitViewPaneComponent, SshStreamService, StackedBarComponent, StackedHorizontalBarChartComponent, StatusIconComponent, StatusIconType, SvgDirective, SvgInlineDirective, SvgInlineResource, SvgModule, SvgResource, TabbedFormController, TabbedFormItemController, TabbedFormLoaderComponent, TabbedLineChartGroupComponent, TagService, TagsActionButtonComponent, TagsColumnComponent, TagsFormFieldComponent, TagsFormFieldLoaderComponent, TelemetryDirective, TelemetryDirectiveModule, TemplateDrivenWizardStepComponent, TemplateOutletDirective, TextFormFieldComponent, TextFormFieldLoaderComponent, TileComponent, TileContentComponent, TileDirectivesModule, TileImageDirective, TileModule, TileRadioGroupFormFieldComponent, TimeFormFieldComponent, ToggleSwitchFormFieldComponent, ToggleSwitchFormFieldLoaderComponent, ToolHeaderComponent, ToolHeaderModule, TooltipDirective, TooltipHostComponent, TooltipHostInstance, TooltipModule, TooltipPlacement, TooltipZoneDirective, TreeTableComponent, UserAliveService, UxExtensionRootComponent, ValidationAlertComponent, ValidationAlertSeverity, WarningBadgeComponent, WebsocketStreamService, WizardAsParent, WizardBuilder, WizardComponent, WizardLiteComponent, WizardLiteModule, WizardModule, WizardNavigationButtonComponent, WizardNavigationButtonModule, WizardNavigationInformation, WizardStage, WizardStep, WizardStepComponent, WorkItemService, YesNoConverterPipe, YesNoConverterPipeModule, Yield, alertDialog, getFullRouteParams, modalDialog };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, ActionBarComponent, ActionBarDirective, ActionButton, ActionButtonAsync, ActionButtonAsyncComponent, ActionButtonComponent, ActionButtonRendererComponent, ActionContainerComponent, ActionDropdown, ActionDropdownComponent, ActionDropdownRendererComponent, ActionItem, ActionItemComponent, ActionItemRendererComponent, ActionItemSeparator, ActionItemSeparatorComponent, ActionItemSeparatorRendererComponent, ActionMenuComponent, ActionsModule, ActiveConnectionService, ActiveDirectoryModule, ActiveDirectorySearchFormFieldComponent, ActiveDirectoryService, AlertBarComponent, AlertBarModule, AlertBarService, AlertSeverity, AppContextService, AppErrorHandler, ApplyMode, AriaLiveOptions, ArrayFormFieldComponent, ArrayFormFieldLoaderComponent, ArrayPropertySchemaFieldLoaderComponent, AuthorizationService, AutofocusDirective, AutofocusModule, AzureManagerService, BackdropComponent, BackdropModule, BackgroundExtensionRootComponent, BadgeBaseComponent, BadgeFeatureTypes, BadgeModule, BannerComponent, BannerModule, BaseComponent, BaseDialogComponent, BaseFormData, BasePropertiesForm, BasicFormLoaderComponent, BatchService, BooleanConverterPipe, BooleanConverterPipeModule, BreadcrumbComponent, BreadcrumbHeaderComponent, BreadcrumbHeaderModule, BreadcrumbModule, BreadcrumbSeparator, BugFixesFeatureBadgeComponent, ByteUnitConverterPipe, ByteUnitConverterPipeModule, CAPSLOCK_VALIDATOR, CalendarFormFieldComponent, CanDeactivateGuard, CapacityBarChartComponent, CapacityBase, CapacityDoughnutChartComponent, CapsLockValidatorDirective, ChartComponent, ChartModule, CheckboxFormFieldComponent, CheckboxFormFieldLoaderComponent, ChecklistFormFieldComponent, ChecklistFormFieldLoaderComponent, ChevronPosition, ChoiceDialogComponent, CimService, CimStreamService, ClampDirective, ClampModule, ClockFormFieldComponent, CodeFormFieldComponent, CodeFormFieldLoaderComponent, ColumnPickerService, ComboboxFormFieldComponent, ComboboxFormFieldLoaderComponent, ComingSoonBadgeComponent, CommonDialogsComponent, CommonSettingsComponent, CommonSettingsComponentBase, ConfirmationDialogComponent, ConfirmationListDialogComponent, ConnectionService, ConnectivityEnforcer, ConnectivityLevel, ContextDropdownComponent, ContextMenuComponent, ContextMenuDirective, ContextMenuModule, CoreServiceModule, CredSSPEnabledBadgeComponent, CredSSPManagerService, CriticalBadgeComponent, CustomBadgeComponent, DataOnlyFormFieldLoaderComponent, DataTableColumnComponent, DataTableColumnPickerExtension, DataTableComponent, DataTableDownloadDataType, DataTableDownloadService, DataTableModule, DataTableMultipleSelectMode, DataTableRenderedItemType, DataTableSortMode, DateConverterPipe, DateConverterPipeModule, DateFormFieldComponent, DateTimeFormFieldComponent, DateTimeRangeFormFieldComponent, DateTimeRangeOptionComponent, Debounce, DeleteColumnComponent, DetailsComponent, DetailsModule, DevGuardService, DialogChangeEvent, DialogCloseReason, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogMode, DialogModule, DialogService, DisabledChangedEvent, DisabledDirective, DisabledModule, DiscardDirective, DiscardModule, DocumentationComponent, DocumentationModule, DoughnutChartComponent, DoughnutChartModule, DropdownComponent, DropdownModule, DropdownService, DynamicActionItemComponent, DynamicComponentBase, EditableCollectionItem, EditableLayoutComponent, EditableLayoutItemComponent, ElectronService, EnumConverterPipe, EnumConverterPipeModule, ExperimentGuardService, ExtensionBrokerService, ExtensionDialogComponent, ExtensionRootModule, FeedbackBadgeComponent, FieldsetDirective, FileFormFieldComponent, FileFormFieldLoaderComponent, FileTransferService, FilterPipe, FilterPipeModule, FormAsyncValidatorBase, FormField, FormFieldAccessor, FormFieldAccessorDirective, FormFieldAsyncValidatorDirective, FormFieldComponent, FormFieldIsolatorComponent, FormFieldLayoutComponent, FormFieldOptionComponent, FormFieldOptionSubFormTemplateLoaderComponent, FormFieldOrientation, FormFieldTemplateDirective, FormFieldValidatorDirective, FormValidatorBase, FormWizardStepComponent, FormatPipe, FormatPipeModule, FrameService, GatewayService, GuardsModule, GuidedPaneComponent, GuidedPanelComponent, GuidedPanelModule, HeaderComponent, HeaderModule, HealthAlertSeverity, HighlightPipe, HighlightPipeModule, HorizontalBarChartComponent, HorizontalBarChartModule, HttpService, IconLayerComponent, IconModule, IconTextComponent, IdleComponent, IdleModule, ImprovementFeatureBadgeComponent, InputValidatorDirective, InstallationTypeGuardService, JobsService, JsonFormFieldComponent, JsonFormFieldLoaderComponent, LayeredIconComponent, LayoutComponent, LayoutConfigGenerator, LayoutDefinitionComponent, LayoutDrivenType, LayoutItemComponent, LayoutItemConfigMode, LayoutItemConfigPropertyWidthType, LayoutModule, LegendComponent, LegendEntryComponent, LegendModule, LifetimeService, LineChartComponent, LineChartModule, LineChartType, ListFormFieldComponent, LoadingWheelComponent, LoadingWheelModule, LoadingWheelSize, LocalDateConverterPipe, MachineNameValidatorDirective, MarkdownDirective, MarkdownModule, MasterViewComponent, MasterViewContentDirective, MasterViewContentModule, MasterViewModule, MatchFieldValidatorDirective, MediaConversion2, MessageDialogComponent, Monaco, Navigation, NavigationService, NavigationTitle, NewBadgeComponent, NewFeatureBadgeComponent, NodeCredentialsFormComponent, NodeCredentialsFormModule, NodeService, NotificationService, NumberFormFieldComponent, NumberFormFieldLoaderComponent, ObjectDefaultFormFieldLoaderComponent, ObjectPropertySchemaFieldLoaderComponent, OptionsFormFieldComponent, OrderedListFormFieldComponent, OrderedListFormFieldLoaderComponent, PageAlertBarComponent, PageAlertBarModule, PanelControlComponent, PasswordFormFieldComponent, PasswordFormFieldLoaderComponent, PivotComponent, PivotModule, PivotTabComponent, PivotTabType, PowerShellService, PowerShellStreamService, PreviewBadgeComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridModule, QueryDataItemPresetGenerator, QueryDataItemValueType, QueryDataOperand, QueryEditorComponent, QueryEditorModule, RadioGroupFormFieldComponent, RadioGroupFormFieldLoaderComponent, RatingRadioGroupFormFieldComponent, ReactiveForm, ReactiveFormAccessor, ReactiveFormWizardStepComponent, ReadonlyFormFieldComponent, RequiredTrimmedValidatorDirective, ResizerComponent, ResizerModule, ResourceService, RpcService, RpcShellService, SME_ASYNC_VALIDATORS, SME_FORM_FIELD_VALIDATION_ALERT_CONTAINER_PROVIDER, SME_LAYOUT_PROVIDER, SME_VALIDATORS, ScheduleRebootService, SchemaDataTypeStore, SchemaFieldContext, SchemaFieldHostComponent, SchemaFieldHostModule, SchemaFieldLoaderComponentBase, SchemaFormComponent, SchemaFormModule, SchemaPrimitiveType, SchemaUtilities, SearchFormFieldComponent, SecureExtensionDataService, SelectFormFieldDirective, SettingsComponent, SettingsContentComponent, SettingsFooterComponent, SettingsFormDirective, SettingsFormService, SettingsHeaderComponent, SettingsModule, SettingsNavigationComponent, SettingsPageComponent, SettingsService, SimplePropertySchemaFieldLoaderComponent, SliderFormFieldComponent, SliderFormFieldLoaderComponent, SmeExtensionService, SmeFormsModule, SmeHeaderData, SmeInjectableBase, SmeInternalFormFieldComponent, SmeResponsiveWindowBreakpoints, SmeResponsiveWindowBreakpointsValue, SmeResponsiveWindowManagerComponent, SmeRouterLinkDirective, SmeRouterModule, SmeSchemaProperty, SmeTemplateOutletModule, SmeUxComponent, SmeUxContentComponent, SmeUxContentModule, SmeUxFooterComponent, SmeUxFooterModule, SmeUxModule, SmeUxPageComponent, SmeUxPageModule, SmeWizardLiteFooterTemplateComponent, SmeWizardLiteFooterTemplateModule, SnapInExtensionComponent, SnapInExtensionModule, SnapInListener, SplitViewComponent, SplitViewContentComponent, SplitViewModule, SplitViewPaneComponent, SshStreamService, StackedBarComponent, StackedHorizontalBarChartComponent, StatusIconComponent, StatusIconType, SvgDirective, SvgInlineDirective, SvgInlineResource, SvgModule, SvgResource, TabbedFormController, TabbedFormItemController, TabbedFormLoaderComponent, TabbedLineChartGroupComponent, TagService, TagsActionButtonComponent, TagsColumnComponent, TagsFormFieldComponent, TagsFormFieldLoaderComponent, TelemetryDirective, TelemetryDirectiveModule, TemplateDrivenWizardStepComponent, TemplateOutletDirective, TextFormFieldComponent, TextFormFieldLoaderComponent, TileComponent, TileContentComponent, TileDirectivesModule, TileImageDirective, TileModule, TileRadioGroupFormFieldComponent, TimeFormFieldComponent, ToggleSwitchFormFieldComponent, ToggleSwitchFormFieldLoaderComponent, ToolHeaderComponent, ToolHeaderModule, TooltipDirective, TooltipHostComponent, TooltipHostInstance, TooltipModule, TooltipPlacement, TooltipZoneDirective, TreeTableComponent, UserAliveService, UxExtensionRootComponent, ValidationAlertComponent, ValidationAlertSeverity, WarningBadgeComponent, WebsocketStreamService, WizardAsParent, WizardBuilder, WizardComponent, WizardLiteComponent, WizardLiteModule, WizardModule, WizardNavigationButtonComponent, WizardNavigationButtonModule, WizardNavigationInformation, WizardStage, WizardStep, WizardStepComponent, WorkItemService, YesNoConverterPipe, YesNoConverterPipeModule, Yield, alertDialog, getFullRouteParams, modalDialog };
 //# sourceMappingURL=microsoft-windows-admin-center-sdk-angular.mjs.map