typo3-typescript-sources 14.3.9 → 14.3.10

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.9
+v14.3.10

package/README.md

@@ -23,7 +23,7 @@ npm install github:maikschneider/typo3-typescript-sources#main
 
 - **Original Repository:** [TYPO3/typo3](https://github.com/TYPO3/typo3)
 - **Source Path:** `Build/Sources/TypeScript/`
-- **Current TYPO3 Version:** `v14.3.9`
+- **Current TYPO3 Version:** `v14.3.10`
 
 ## 🌿 Branches
 

package/backend/bookmark/bookmark-manager.ts

@@ -21,6 +21,7 @@ import Modal from '../modal';
 import Notification from '../notification';
 import { SeverityEnum } from '../enum/severity';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import { topDocument } from '@typo3/core/utility/top-window';
 import '@typo3/backend/element/spinner-element';
 import '@typo3/backend/element/icon-element';
 import labels from '~labels/core.bookmarks';
@@ -1208,7 +1209,7 @@ export class BookmarkManagerButtonElement extends PseudoButtonLitElement {
 
   protected override buttonActivated(): void {
     // Create element in top frame to avoid adoptedStyleSheets cross-document issues
-    const targetDocument = top?.document ?? document;
+    const targetDocument = topDocument;
     const managerElement = targetDocument.createElement('typo3-backend-bookmark-manager-content') as BookmarkManagerContentElement;
     if (this.editId !== undefined) {
       managerElement.editId = this.editId;

package/backend/bookmark/bookmark-store.ts

@@ -20,6 +20,7 @@ import Notification from '../notification';
 import { SeverityEnum } from '../enum/severity';
 import { BroadcastMessage, type BroadcastEvent } from '@typo3/backend/broadcast-message';
 import BroadcastService from '@typo3/backend/broadcast-service';
+import { topWindow } from '@typo3/core/utility/top-window';
 
 export const BookmarkStoreChangedEvent = 'typo3:bookmark-store:changed';
 
@@ -683,19 +684,14 @@ class BookmarkStore {
  * Returns singleton instance from top frame, creating it if needed.
  */
 function getOrCreateInstance(): BookmarkStore {
-  try {
-    if (top?.TYPO3?.BookmarkStore) {
-      return top.TYPO3.BookmarkStore;
-    }
-    const instance = new BookmarkStore();
-    if (top?.TYPO3) {
-      top.TYPO3.BookmarkStore = instance;
-    }
-    return instance;
-  } catch {
-    // Cross-origin access denied, create local instance
-    return new BookmarkStore();
+  if (topWindow.TYPO3?.BookmarkStore) {
+    return topWindow.TYPO3.BookmarkStore;
+  }
+  const instance = new BookmarkStore();
+  if (topWindow.TYPO3) {
+    topWindow.TYPO3.BookmarkStore = instance;
   }
+  return instance;
 }
 
 export default getOrCreateInstance();

package/backend/clipboard-panel.ts

@@ -21,6 +21,7 @@ import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import Notification from '@typo3/backend/notification';
 import '@typo3/backend/element/spinner-element';
 import '@typo3/backend/element/icon-element';
+import { topWindow } from '@typo3/core/utility/top-window';
 
 enum CopyMode {
   cut = 'cut',
@@ -60,11 +61,12 @@ interface DispatchArgs {
  * Module: @typo3/backend/clipboard-panel
  *
  * @example
- * <typo3-backend-clipboard-panel return-url="/typo3/module" table="_FILE"></typo3-backend-clipboard-panel>
+ * <typo3-backend-clipboard-panel return-url="/typo3/module" module-url="/typo3/clipboard/process" table="_FILE"></typo3-backend-clipboard-panel>
  */
 @customElement('typo3-backend-clipboard-panel')
 export class ClipboardPanel extends LitElement {
   @property({ type: String, attribute: 'return-url' }) returnUrl: string = '';
+  @property({ type: String, attribute: 'module-url' }) moduleUrl: string = '';
   @property({ type: String }) table: string = '';
 
   private static renderLoader(): TemplateResult {
@@ -89,8 +91,12 @@ export class ClipboardPanel extends LitElement {
     `;
   }
 
+  private getModuleUrl(): string {
+    return this.moduleUrl || topWindow.TYPO3.settings.Clipboard.moduleUrl;
+  }
+
   private renderPanel(): Promise<TemplateResult> {
-    return (new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl))
+    return (new AjaxRequest(this.getModuleUrl()))
       .withQueryArguments({ action: 'getClipboardData' })
       .post({ table: this.table })
       .then(async (response: AjaxResponse): Promise<TemplateResult> => {
@@ -202,7 +208,7 @@ export class ClipboardPanel extends LitElement {
   private updateClipboard(event: PointerEvent, payload: object): void {
     event.preventDefault();
     const target: HTMLElement = event.currentTarget as HTMLElement;
-    (new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl))
+    (new AjaxRequest(this.getModuleUrl()))
       .post(payload)
       .then(async (response: AjaxResponse): Promise<void> => {
         const resolvedBody = await response.resolve();

package/backend/context-menu-actions.ts

@@ -23,6 +23,7 @@ import Viewport from './viewport';
 import '@typo3/backend/new-record-wizard';
 import Utility from '@typo3/backend/utility';
 import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
+import { topWindow, topDocument } from '@typo3/core/utility/top-window';
 import { html } from 'lit';
 import coreCommonLabels from '~labels/core.common';
 import cacheLabels from '~labels/core.cache';
@@ -38,7 +39,8 @@ class ContextMenuActions {
    * @returns {string}
    */
   public static getReturnUrl(): string {
-    return encodeURIComponent(top.list_frame.document.location.pathname + top.list_frame.document.location.search);
+    const location = topWindow.list_frame.document.location;
+    return encodeURIComponent(location.pathname + location.search);
   }
 
   public static editRecord(table: string, uid: number, dataset: DOMStringMap): void {
@@ -51,10 +53,10 @@ class ContextMenuActions {
     }
 
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.FormEngine.moduleUrl
+      topWindow.TYPO3.settings.FormEngine.moduleUrl
       + '&edit[' + table + '][' + uid + ']=edit'
       + overrideVals
-      + '&module=' + encodeURIComponent(top.TYPO3.ModuleMenu.App.getCurrentModule())
+      + '&module=' + encodeURIComponent(topWindow.TYPO3.ModuleMenu.App.getCurrentModule())
       + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
     );
   }
@@ -112,7 +114,7 @@ class ContextMenuActions {
           pageId: uid
         },
       });
-      top.document.dispatchEvent(event);
+      topDocument.dispatchEvent(event);
     }
   }
 
@@ -152,13 +154,13 @@ class ContextMenuActions {
     }
 
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.FormEngine.moduleUrl + '&edit[' + table + '][' + (table !== 'pages' ? '-' : '') + uid + ']=new&returnUrl=' + ContextMenuActions.getReturnUrl(),
+      topWindow.TYPO3.settings.FormEngine.moduleUrl + '&edit[' + table + '][' + (table !== 'pages' ? '-' : '') + uid + ']=new&returnUrl=' + ContextMenuActions.getReturnUrl(),
     );
   }
 
   public static openHistoryPopUp(table: string, uid: number): void {
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordHistory.moduleUrl + '&element=' + table + ':' + uid + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
+      topWindow.TYPO3.settings.RecordHistory.moduleUrl + '&element=' + table + ':' + uid + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
     );
   }
 
@@ -198,7 +200,7 @@ class ContextMenuActions {
   public static disableRecord(table: string, uid: number, dataset: DOMStringMap): void {
     const disableFieldName = dataset.disableField || 'hidden';
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordCommit.moduleUrl
+      topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][' + disableFieldName + ']=1'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
     );
@@ -207,7 +209,7 @@ class ContextMenuActions {
   public static enableRecord(table: string, uid: number, dataset: DOMStringMap): void {
     const disableFieldName = dataset.disableField || 'hidden';
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordCommit.moduleUrl
+      topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][' + disableFieldName + ']=0'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
     );
@@ -215,7 +217,7 @@ class ContextMenuActions {
 
   public static showInMenus(table: string, uid: number): void {
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordCommit.moduleUrl
+      topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][nav_hide]=0'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
     );
@@ -223,7 +225,7 @@ class ContextMenuActions {
 
   public static hideInMenus(table: string, uid: number): void {
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordCommit.moduleUrl
+      topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][nav_hide]=1'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
     );
@@ -350,7 +352,7 @@ class ContextMenuActions {
         + '&redirect=' + ContextMenuActions.getReturnUrl();
 
       Viewport.ContentContainer.setUrl(
-        top.TYPO3.settings.RecordCommit.moduleUrl + url,
+        topWindow.TYPO3.settings.RecordCommit.moduleUrl + url,
       );
     };
     if (!dataset.title) {
@@ -384,7 +386,7 @@ class ContextMenuActions {
   }
 
   private static refreshPageTree(): void {
-    top.document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
+    topDocument.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
   }
 }
 

package/backend/context-menu.ts

@@ -18,6 +18,7 @@ import '@typo3/backend/element/spinner-element';
 import { customElement, queryAll, state } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { delay } from '@typo3/core/lit-helper';
+import { topDocument } from '@typo3/core/utility/top-window';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Task, initialState } from '@lit/task';
@@ -99,7 +100,7 @@ class ContextMenu {
       bubbles: true,
       composed: true
     });
-    top.document.dispatchEvent(contextMenuEvent);
+    topDocument.dispatchEvent(contextMenuEvent);
   }
 
   private handleTriggerEvent(event: PointerEvent): void {

package/backend/contextual-record-edit.ts

@@ -15,6 +15,7 @@ import FormEngine from '@typo3/backend/form-engine';
 import Modal from '@typo3/backend/modal';
 import Severity from '@typo3/backend/severity';
 import DocumentService from '@typo3/core/document-service';
+import { topWindow } from '@typo3/core/utility/top-window';
 import '@typo3/backend/element/icon-element';
 import labels from '~labels/backend.alt_doc';
 
@@ -78,7 +79,7 @@ class ContextualRecordEdit {
         document.querySelectorAll('.has-change').forEach((el) => el.classList.remove('has-change'));
         // Navigate the content frame directly (same-origin access) — using
         // postMessage for this failed silently in Firefox.
-        top?.TYPO3?.Backend?.ContentContainer?.setUrl(this.fullscreenButton.href);
+        topWindow.TYPO3?.Backend?.ContentContainer?.setUrl(this.fullscreenButton.href);
         // Tell the parent to close the modal
         window.parent.postMessage(
           { actionName: 'typo3:editform:navigate' },

package/backend/date-time-picker.ts

@@ -21,6 +21,7 @@ import type { PostValidationEvent } from '@typo3/backend/form-engine-validation'
 import type { DateConfiguration } from '@typo3/backend/type/date-configuration';
 import '@typo3/backend/input/clearable';
 import coreLabels from '~labels/core.core';
+import { openerTopWindow, topWindow } from '@typo3/core/utility/top-window';
 
 const ISO8601_LOCALTIME = 'ISO8601_LOCALTIME';
 
@@ -33,7 +34,7 @@ interface FlatpickrInputElement extends HTMLInputElement {
  * contains all logic for the date time picker used in FormEngine, EXT:belog and EXT:scheduler
  */
 class DateTimePicker {
-  private readonly format: DateConfiguration = (typeof opener?.top?.TYPO3 !== 'undefined' ? opener.top : top).TYPO3.settings.DateConfiguration;
+  private readonly format: DateConfiguration = (openerTopWindow() ?? topWindow).TYPO3.settings.DateConfiguration;
 
   /**
    * initialize date fields to add a datepicker to each field

package/backend/drag-uploader.ts

@@ -27,6 +27,7 @@ import { KeyTypesEnum } from '@typo3/backend/enum/key-types';
 import '@typo3/backend/element/progress-bar-element';
 import type { ProgressBarElement } from '@typo3/backend/element/progress-bar-element';
 import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
+import { topWindow } from '@typo3/core/utility/top-window';
 import { FormatUtility } from '@typo3/backend/utility/format-utility';
 import coreLabels from '~labels/core.core';
 import commonLabels from '~labels/core.common';
@@ -490,7 +491,7 @@ export default class DragUploader {
                 {
                   label: coreLabels.get('file_upload.reload.filelist.actions.reload'),
                   action: new ImmediateAction((): void => {
-                    top.list_frame.document.location.href = this.reloadUrl;
+                    topWindow.list_frame.document.location.href = this.reloadUrl;
                   })
                 }
               ]

package/backend/element/contextual-record-edit-trigger.ts

@@ -17,6 +17,7 @@ import Modal, { Types, Sizes, Positions, type ModalElement } from '@typo3/backen
 import Notification from '@typo3/backend/notification';
 import Persistent from '@typo3/backend/storage/persistent';
 import labels from '~labels/backend.alt_doc';
+import { topWindow, topDocument } from '@typo3/core/utility/top-window';
 
 /**
  * Module: @typo3/backend/element/contextual-record-edit-trigger
@@ -49,8 +50,8 @@ export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
 
   protected override async buttonActivated(): Promise<void> {
     if (Persistent.isset('contextualRecordEdit') && Persistent.get('contextualRecordEdit') == 0) {
-      if (top?.TYPO3?.Backend?.ContentContainer) {
-        top.TYPO3.Backend.ContentContainer.setUrl(this.editUrl);
+      if (topWindow.TYPO3?.Backend?.ContentContainer) {
+        topWindow.TYPO3.Backend.ContentContainer.setUrl(this.editUrl);
       }
       return;
     }
@@ -67,7 +68,7 @@ export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
   }
 
   private setupMessageHandling(modal: ModalElement): void {
-    const messageTarget = top;
+    const messageTarget = topWindow;
     let savedRecordTitle = '';
     let hasSaved = false;
     let closeConfirmed = false;
@@ -105,9 +106,9 @@ export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
     modal.addEventListener('typo3-modal-hidden', () => {
       messageTarget.removeEventListener('message', messageHandler);
       if (hasSaved) {
-        top.document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
-        if (top.TYPO3?.Backend?.ContentContainer) {
-          top.TYPO3.Backend.ContentContainer.refresh();
+        topDocument.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
+        if (topWindow.TYPO3?.Backend?.ContentContainer) {
+          topWindow.TYPO3.Backend.ContentContainer.refresh();
         }
         Notification.success(
           labels.get('notification.record_updated.title'),

package/backend/element/datetime-element.ts

@@ -15,6 +15,7 @@ import { html, LitElement, nothing, type TemplateResult, type PropertyValues } f
 import { customElement, property, state } from 'lit/decorators.js';
 import { DateTime, type DurationUnit, type DurationUnits } from 'luxon';
 import type { DateConfiguration } from '@typo3/backend/type/date-configuration';
+import { openerTopWindow, topWindow } from '@typo3/core/utility/top-window';
 
 /**
  * Display mode for the time element
@@ -267,7 +268,7 @@ export class DateTimeElement extends LitElement {
 
   private getConfiguredDateFormats(): DateConfiguration | null {
     try {
-      const root = (typeof opener?.top?.TYPO3 !== 'undefined' ? opener.top : top);
+      const root = openerTopWindow() ?? topWindow;
       return root.TYPO3.settings.DateConfiguration;
     } catch {
       return null;

package/backend/element/editable-page-title.ts

@@ -17,6 +17,7 @@ import '@typo3/backend/element/icon-element';
 import AjaxDataHandler from '../ajax-data-handler';
 import commonLabels from '~labels/core.common';
 import layoutLabels from '~labels/backend.layout';
+import { topDocument } from '@typo3/core/utility/top-window';
 
 @customElement('typo3-backend-editable-page-title')
 export class EditablePageTitle extends LitElement {
@@ -251,7 +252,7 @@ export class EditablePageTitle extends LitElement {
 
     AjaxDataHandler.process(parameters).then((): void => {
       this.pageTitle = newPageTitle;
-      top.document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
+      topDocument.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
     }).finally((): void => {
       this.endEditing();
       this._isSubmitting = false;

package/backend/element/pseudo-button.ts

@@ -12,7 +12,7 @@
  */
 
 import { property } from 'lit/decorators.js';
-import { html, css, LitElement, type TemplateResult } from 'lit';
+import { html, css, LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import { KeyTypesEnum } from '@typo3/backend/enum/key-types';
 
 /**
@@ -20,18 +20,24 @@ import { KeyTypesEnum } from '@typo3/backend/enum/key-types';
  */
 export abstract class PseudoButtonLitElement extends LitElement {
   static override styles = [
-    css`:host { cursor: pointer; appearance: button; }`
+    css`:host { cursor: pointer; appearance: button; }`,
+    css`:host([disabled]) { cursor: default; }`
   ];
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: String, reflect: true }) override role: string = 'button';
   @property({ type: String, reflect: true }) override tabIndex: number = 0;
+  /** As a disabled <button>: not activated, not in the tab order, announced as disabled */
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
+
+  /** Of the markup or the element, back once the button is enabled again */
+  private enabledTabIndex: number = 0;
 
   public constructor() {
     super();
     this.addEventListener('click', (e: Event): void => {
       e.preventDefault();
-      this.buttonActivated(e);
+      this.activate(e);
     });
     this.addEventListener('keydown', (e: KeyboardEvent): void => {
       if (e.key === KeyTypesEnum.SPACE) {
@@ -39,20 +45,38 @@ export abstract class PseudoButtonLitElement extends LitElement {
       }
       if (e.key === KeyTypesEnum.ENTER) {
         e.preventDefault();
-        this.buttonActivated(e);
+        this.activate(e);
       }
     });
     this.addEventListener('keyup', (e: KeyboardEvent): void => {
       if (e.key === KeyTypesEnum.SPACE) {
         e.preventDefault();
-        this.buttonActivated(e);
+        this.activate(e);
       }
     });
   }
 
+  protected override willUpdate(changed: PropertyValues<this>): void {
+    super.willUpdate(changed);
+    // Only a change of the state: a button enabled from the start keeps its tab index
+    if (changed.has('disabled') && this.disabled !== Boolean(changed.get('disabled'))) {
+      if (this.disabled) {
+        this.enabledTabIndex = this.tabIndex;
+      }
+      this.ariaDisabled = this.disabled ? 'true' : null;
+      this.tabIndex = this.disabled ? -1 : this.enabledTabIndex;
+    }
+  }
+
   protected override render(): TemplateResult {
     return html`<slot></slot>`;
   }
 
+  private activate(e: Event): void {
+    if (!this.disabled) {
+      this.buttonActivated(e);
+    }
+  }
+
   protected abstract buttonActivated(e: Event): void | Promise<void>;
 }

package/backend/element/qrcode-modal-button.ts

@@ -16,6 +16,7 @@ import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
 import Modal from '@typo3/backend/modal';
 import { html } from 'lit';
 import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
+import { topWindow } from '@typo3/core/utility/top-window';
 import listLabels from '~labels/core.mod_web_list';
 
 /**
@@ -36,8 +37,7 @@ export class QrCodeModalButton extends PseudoButtonLitElement {
   }
 
   protected async loadModuleFrameAgnostic(module: string): Promise<any> {
-    const isInIframe = window.location !== window.parent.location;
-    if (isInIframe) {
+    if (topWindow !== window) {
       await topLevelModuleImport(module);
     } else {
       await import(module);

package/backend/element/sidebar-toggle-element.ts

@@ -49,7 +49,6 @@ export class SidebarToggleElement extends PseudoButtonLitElement {
 
   @property({ type: String, attribute: 'label-collapse' }) labelCollapse: string = 'Collapse sidebar';
   @property({ type: String, attribute: 'label-expand' }) labelExpand: string = 'Expand sidebar';
-  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
   @state() private expanded: boolean = false;
 
@@ -67,7 +66,6 @@ export class SidebarToggleElement extends PseudoButtonLitElement {
 
   protected override updated(): void {
     this.updateLabels();
-    this.updateDisabledState();
   }
 
   protected override render(): TemplateResult {
@@ -77,9 +75,7 @@ export class SidebarToggleElement extends PseudoButtonLitElement {
   }
 
   protected override buttonActivated(): void {
-    if (!this.disabled) {
-      ScaffoldState.toggleSidebar();
-    }
+    ScaffoldState.toggleSidebar();
   }
 
   private readonly handleSidebarToggle = (event: ScaffoldSidebarToggleEvent): void => {
@@ -91,16 +87,6 @@ export class SidebarToggleElement extends PseudoButtonLitElement {
     this.title = label;
     this.setAttribute('aria-label', label);
   }
-
-  private updateDisabledState(): void {
-    if (this.disabled) {
-      this.setAttribute('aria-disabled', 'true');
-      this.tabIndex = -1;
-    } else {
-      this.removeAttribute('aria-disabled');
-      this.tabIndex = 0;
-    }
-  }
 }
 
 declare global {

package/backend/element-browser.ts

@@ -14,6 +14,7 @@
 import { MessageUtility } from '@typo3/backend/utility/message-utility';
 import DocumentService from '@typo3/core/document-service';
 import Modal from '@typo3/backend/modal';
+import { topWindow } from '@typo3/core/utility/top-window';
 
 interface RTESettings {
   parameters: string;
@@ -79,7 +80,7 @@ class ElementBrowser {
     const isInModalFrame = typeof window.frames !== 'undefined'
       && typeof window.frames.frameElement !== 'undefined'
       && window.frames.frameElement.classList.contains('t3js-modal-iframe');
-    const otherModalFrames = Array.from(top.frames || []).filter((item) => {
+    const otherModalFrames = Array.from(topWindow.frames || []).filter((item) => {
       try {
         return typeof item.frameElement !== 'undefined'
           && item.frameElement.classList.contains('t3js-modal-iframe')
@@ -185,9 +186,9 @@ class ElementBrowser {
 
   private findEditFormWindow(): Window | null {
     try {
-      for (let i = 0; i < top.frames.length; i++) {
+      for (let i = 0; i < topWindow.frames.length; i++) {
         try {
-          const frame = top.frames[i];
+          const frame = topWindow.frames[i];
           if (frame !== window && this.windowHasEditForm(frame)) {
             return frame;
           }

package/backend/event/event-dispatcher.ts

@@ -11,6 +11,8 @@
  * The TYPO3 project - inspiring people to share!
  */
 
+import { topDocument } from '@typo3/core/utility/top-window';
+
 /**
  * Module: @typo3/backend/event/event-dispatcher
  */
@@ -19,8 +21,8 @@ export class EventDispatcher {
     const event = new CustomEvent(name, { detail: detail });
     if (!useTop) {
       document.dispatchEvent(event);
-    } else if (typeof top !== 'undefined') {
-      top.document.dispatchEvent(event);
+    } else {
+      topDocument.dispatchEvent(event);
     }
   }
 }

package/backend/form-engine/element/extra/char-counter.ts

@@ -49,7 +49,7 @@ export class CharCounter extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <span class="form-hint form-hint--${this.determineCounterClass()}">
+      <span class="form-hint form-hint--${this.determineCounterClass()}" role="status" aria-live="polite" aria-atomic="true">
         ${labels.get('labels.remainingCharacters', { '0': this.remainingCharacters.toString(10) })}
       </span>
     `;

package/backend/form-engine.ts

@@ -39,6 +39,7 @@ import RegularEvent from '@typo3/core/event/regular-event';
 import backendAltDocLabels from '~labels/backend.alt_doc';
 import coreCoreLabels from '~labels/core.core';
 import type { ElementBrowserMessage, ElementBrowserElementAddedMessage } from '@typo3/backend/element-browser';
+import { topWindow } from '@typo3/core/utility/top-window';
 
 export interface OnFieldChangeItem {
   name: string;
@@ -531,12 +532,12 @@ export default (function() {
    * Initialize events for all form engine relevant tasks.
    */
   FormEngine.initializeEvents = function() {
-    if (top.TYPO3 && typeof top.TYPO3.Backend !== 'undefined') {
+    if (topWindow.TYPO3 && typeof topWindow.TYPO3.Backend !== 'undefined') {
       // @todo: The consumer scope attachment is actually not needed
       // in page wizard and context panel (which currently uses it own handling).
       // This needs to be streamlined.
-      top.TYPO3.Backend.consumerScope.attach(FormEngine);
-      window.addEventListener('pagehide', () => top.TYPO3.Backend.consumerScope.detach(FormEngine), { once: true });
+      topWindow.TYPO3.Backend.consumerScope.attach(FormEngine);
+      window.addEventListener('pagehide', () => topWindow.TYPO3.Backend.consumerScope.detach(FormEngine), { once: true });
     }
 
     FormEngine.formElement.addEventListener('submit', function(e: SubmitEvent) {

package/backend/hotkeys.ts

@@ -15,6 +15,7 @@ import HotkeyStorage, { type ScopedHotkeyMap, type Options, type HotkeySetup } f
 import RegularEvent from '@typo3/core/event/regular-event';
 import { HotkeyStruct } from '@typo3/backend/hotkeys/hotkey-struct';
 import { HotkeyDispatchedEvent, HotkeyRequestedEvent } from '@typo3/backend/hotkeys/events';
+import { topDocument } from '@typo3/core/utility/top-window';
 
 export enum ModifierKeys {
   META = 'meta',
@@ -101,7 +102,7 @@ class Hotkeys {
     new RegularEvent('keydown', (e: KeyboardEvent): void => {
       const hotkeyStruct = HotkeyStruct.fromEvent(e);
       if (hotkeyStruct.hasAnyModifier()) {
-        top.document.dispatchEvent(new HotkeyRequestedEvent(e));
+        topDocument.dispatchEvent(new HotkeyRequestedEvent(e));
       }
     }).bindTo(document);
 

package/backend/image-manipulation.ts

@@ -23,6 +23,7 @@ import { default as Modal, type ModalElement } from './modal';
 import '@typo3/backend/element/spinner-element';
 import { renderNodes } from '@typo3/core/lit-helper';
 import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
+import { topDocument } from '@typo3/core/utility/top-window';
 import { Offset } from '@typo3/backend/offset';
 import type { DraggableResizableEvent, PointerEventNames, DraggableResizableElement } from '@typo3/backend/element/draggable-resizable-element';
 import type { EventInterface } from '@typo3/core/event/event-interface';
@@ -608,7 +609,7 @@ class ImageManipulation {
   private initFocusArea(container: HTMLElement): DraggableResizableElement {
     topLevelModuleImport('@typo3/backend/element/draggable-resizable-element.js');
 
-    const focusAreaEl = top.document.createElement('typo3-backend-draggable-resizable');
+    const focusAreaEl = topDocument.createElement('typo3-backend-draggable-resizable');
     // assign area declaration (as persisted in the database)
     focusAreaEl.setAttribute('offset', JSON.stringify(this.convertAreaToOffset(this.currentCropVariant.focusArea, container)));
     // use the same events as cropper.js does

package/backend/info-window.ts

@@ -13,6 +13,7 @@
 
 import { SeverityEnum } from './enum/severity';
 import Modal from './modal';
+import { topWindow } from '@typo3/core/utility/top-window';
 
 /**
  * Module: @typo3/backend/info-window
@@ -29,7 +30,7 @@ class InfoWindow {
     Modal.advanced({
       type: Modal.types.iframe,
       size: Modal.sizes.large,
-      content: top.TYPO3.settings.ShowItem.moduleUrl
+      content: topWindow.TYPO3.settings.ShowItem.moduleUrl
         + '&table=' + encodeURIComponent(table)
         + '&uid=' + (typeof uid === 'number' ? uid : encodeURIComponent(uid)),
       severity: SeverityEnum.notice,
@@ -37,8 +38,8 @@ class InfoWindow {
   }
 }
 
-if (!top.TYPO3.InfoWindow) {
-  top.TYPO3.InfoWindow = InfoWindow;
+if (!topWindow.TYPO3.InfoWindow) {
+  topWindow.TYPO3.InfoWindow = InfoWindow;
 }
 
 // expose as global object