[BUGFIX] Add missing label to modal close button

We also ensure that TYPO3.lang checks are correct
when the modal is used in a context where TYPO3.lang
is not defined.

Resolves: #101844
Releases: main, 12.4, 11.5
Change-Id: I1e6e90ed86e72f483929429b8e2c833179b60f87
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80867
Tested-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>

Build/Sources/TypeScript/backend/modal.ts

@@ -165,10 +165,8 @@ export class ModalElement extends LitElement {
                   <div class="modal-header">
                       <h4 class="t3js-modal-title modal-title">${this.modalTitle}</h4>
                       <button class="t3js-modal-close close" @click=${() => this.bootstrapModal.hide()}>
-                          <span aria-hidden="true">
-                              <typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon>
-                          </span>
-                          <span class="visually-hidden"></span>
+                          <typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon>
+                          <span class="visually-hidden">${TYPO3?.lang?.['button.close'] || 'Close'}</span>
                       </button>
                   </div>
                   <div class="t3js-modal-body modal-body">${this.renderModalBody()}</div>
@@ -350,13 +348,13 @@ class Modal {
     if (buttons.length === 0) {
       buttons.push(
         {
-          text: TYPO3.lang['button.cancel'] || 'Cancel',
+          text: TYPO3?.lang?.['button.cancel'] || 'Cancel',
           active: true,
           btnClass: 'btn-default',
           name: 'cancel',
         },
         {
-          text: TYPO3.lang['button.ok'] || 'OK',
+          text: TYPO3?.lang?.['button.ok'] || 'OK',
           btnClass: 'btn-' + Severity.getCssClass(severity),
           name: 'ok',
         },
@@ -487,7 +485,7 @@ class Modal {
   public initializeMarkupTrigger(theDocument: Document): void {
     const modalTrigger = (evt: Event, triggerElement: HTMLElement): void => {
       evt.preventDefault();
-      const content = triggerElement.dataset.bsContent || triggerElement.dataset.content || TYPO3.lang['message.confirmation'] || 'Are you sure?';
+      const content = triggerElement.dataset.bsContent || triggerElement.dataset.content || TYPO3?.lang?.['message.confirmation'] || 'Are you sure?';
       let severity = SeverityEnum.info;
       if (triggerElement.dataset.severity in SeverityEnum) {
         const severityKey = triggerElement.dataset.severity as keyof typeof SeverityEnum;
@@ -507,7 +505,7 @@ class Modal {
         staticBackdrop: triggerElement.dataset.staticBackdrop !== undefined,
         buttons: [
           {
-            text: triggerElement.dataset.buttonCloseText || TYPO3.lang['button.close'] || 'Close',
+            text: triggerElement.dataset.buttonCloseText || TYPO3?.lang?.['button.close'] || 'Close',
             active: true,
             btnClass: 'btn-default',
             trigger: (e: Event, modal: ModalElement): void => {
@@ -519,7 +517,7 @@ class Modal {
             },
           },
           {
-            text: triggerElement.dataset.buttonOkText || TYPO3.lang['button.ok'] || 'OK',
+            text: triggerElement.dataset.buttonOkText || TYPO3?.lang?.['button.ok'] || 'OK',
             btnClass: 'btn-' + Severity.getCssClass(severity),
             trigger: (e: Event, modal: ModalElement): void => {
               modal.hideModal();