From e833b2f7f12b33b2c7166d7a98db1f5e20f2f67b Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Thu, 18 Jun 2026 09:07:35 +0200
Subject: [PATCH 1/6] Add close button to popover

---
 resources/css/override/_dialog.css            |  16 ++
 resources/js/components/RoomShareButton.vue   | 150 ++++++++++--------
 .../js/components/RoomTabFilesViewButton.vue  |  22 ++-
 3 files changed, 122 insertions(+), 66 deletions(-)

diff --git a/resources/css/override/_dialog.css b/resources/css/override/_dialog.css
index 36c200ed47..adba020602 100644
--- a/resources/css/override/_dialog.css
+++ b/resources/css/override/_dialog.css
@@ -33,3 +33,19 @@
         @apply pb-0;
     }
 }
+
+.popover-close-button {
+    flex-shrink: 0;
+
+    &:not(:focus) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border-width: 0;
+    }
+}
diff --git a/resources/js/components/RoomShareButton.vue b/resources/js/components/RoomShareButton.vue
index 483329acc2..c54df82c94 100644
--- a/resources/js/components/RoomShareButton.vue
+++ b/resources/js/components/RoomShareButton.vue
@@ -7,88 +7,98 @@
     class="shrink-0"
     @click="toggle"
   />
-  <Popover ref="op" aria-labelledby="room-invitation-title" aria-modal="false">
+  <Popover ref="op">
     <div class="flex min-w-min flex-col items-start gap-4 p-2">
-      <fieldset class="flex w-full flex-col gap-2">
-        <legend
+      <div class="flex w-full justify-between gap-4">
+        <h2
           id="room-invitation-title"
+          tabindex="-1"
+          autofocus
           class="block font-bold whitespace-nowrap"
         >
           {{ $t("rooms.invitation.title") }}
-        </legend>
-        <div class="grow">
-          <div class="mt-2 flex flex-row items-center">
-            <InputGroup>
-              <InputGroupAddon
-                class="min-w-5 border-none px-0 dark:bg-surface-900"
-              >
-                <i
-                  v-tooltip="$t('rooms.invitation.link')"
-                  class="fa-solid fa-link"
-                  :aria-label="$t('rooms.invitation.link')"
-                />
-              </InputGroupAddon>
-              <InputText
-                id="invitationLink"
-                class="w-full border-none text-ellipsis shadow-none dark:bg-surface-900"
-                :aria-label="$t('rooms.invitation.link')"
-                readonly
-                :value="roomUrl"
-                @focus="$event.target.select()"
+        </h2>
+        <Button
+          class="popover-close-button"
+          @click="closePopover"
+          :aria-label="$t('app.close')"
+          text
+          rounded
+          severity="secondary"
+          icon="fas fa-xmark"
+        />
+      </div>
+      <div class="grow">
+        <div class="mt-2 flex flex-row items-center">
+          <InputGroup>
+            <InputGroupAddon
+              class="min-w-5 border-none px-0 dark:bg-surface-900"
+              aria-hidden="true"
+            >
+              <i
+                v-tooltip="$t('rooms.invitation.link')"
+                class="fa-solid fa-link"
               />
-            </InputGroup>
-
-            <Button
-              v-tooltip="$t('rooms.invitation.copy_url')"
-              data-test="room-invitation-copy-link-button"
-              class="shrink-0"
-              :aria-label="$t('rooms.invitation.copy_url')"
-              icon="fa-solid fa-copy"
-              severity="secondary"
-              @click="copyUrl"
+            </InputGroupAddon>
+            <InputText
+              id="invitationLink"
+              class="w-full border-none text-ellipsis shadow-none dark:bg-surface-900"
+              :aria-label="$t('rooms.invitation.link')"
+              readonly
+              :value="roomUrl"
+              @focus="$event.target.select()"
             />
-          </div>
+          </InputGroup>
 
-          <div v-if="room.access_code" class="mt-2 flex flex-row items-center">
-            <InputGroup>
-              <InputGroupAddon
-                class="min-w-5 border-none px-0 dark:bg-surface-900"
-              >
-                <i
-                  v-tooltip="$t('rooms.invitation.code')"
-                  class="fa-solid fa-key"
-                  :aria-label="$t('rooms.invitation.code')"
-                />
-              </InputGroupAddon>
-              <InputText
-                id="invitationCode"
-                class="w-full border-none shadow-none dark:bg-surface-900"
-                :aria-label="$t('rooms.invitation.code')"
-                readonly
-                :value="formattedAccessCode"
-                @focus="$event.target.select()"
-              />
-            </InputGroup>
+          <Button
+            v-tooltip="$t('rooms.invitation.copy_url')"
+            data-test="room-invitation-copy-link-button"
+            class="shrink-0"
+            :aria-label="$t('rooms.invitation.copy_url')"
+            icon="fa-solid fa-copy"
+            severity="secondary"
+            @click="copyUrl"
+          />
+        </div>
 
-            <Button
-              v-tooltip="$t('rooms.invitation.copy_code')"
-              data-test="room-invitation-copy-code-button"
-              class="shrink-0"
-              :aria-label="$t('rooms.invitation.copy_code')"
-              icon="fa-solid fa-copy"
-              severity="secondary"
-              @click="copyCode"
+        <div v-if="room.access_code" class="mt-2 flex flex-row items-center">
+          <InputGroup>
+            <InputGroupAddon
+              class="min-w-5 border-none px-0 dark:bg-surface-900"
+              aria-hidden="true"
+            >
+              <i
+                v-tooltip="$t('rooms.invitation.code')"
+                class="fa-solid fa-key"
+              />
+            </InputGroupAddon>
+            <InputText
+              id="invitationCode"
+              class="w-full border-none shadow-none dark:bg-surface-900"
+              :aria-label="$t('rooms.invitation.code')"
+              readonly
+              :value="formattedAccessCode"
+              @focus="$event.target.select()"
             />
-          </div>
+          </InputGroup>
+
+          <Button
+            v-tooltip="$t('rooms.invitation.copy_code')"
+            data-test="room-invitation-copy-code-button"
+            class="shrink-0"
+            :aria-label="$t('rooms.invitation.copy_code')"
+            icon="fa-solid fa-copy"
+            severity="secondary"
+            @click="copyCode"
+          />
         </div>
-      </fieldset>
+      </div>
       <divider class="m-0" />
       <Button
         data-test="room-copy-invitation-button"
         :label="$t('rooms.invitation.copy_message')"
         class="w-full"
         icon="fa-solid fa-copy"
-        autofocus
         @click="copyInvitationMessage"
       />
     </div>
@@ -107,7 +117,10 @@ const toast = useToast();
 const { t } = useI18n();
 
 const op = ref();
+const triggerButton = ref(null);
+
 const toggle = (event) => {
+  triggerButton.value = event.target;
   op.value.toggle(event);
 };
 
@@ -161,4 +174,11 @@ const formattedAccessCode = computed(() => {
         .match(/.{1,3}/g)
         .join("-");
 });
+
+function closePopover() {
+  op.value.hide();
+  if (triggerButton.value != null) {
+    triggerButton.value.focus();
+  }
+}
 </script>
diff --git a/resources/js/components/RoomTabFilesViewButton.vue b/resources/js/components/RoomTabFilesViewButton.vue
index 293d79a800..3747b0fe0b 100644
--- a/resources/js/components/RoomTabFilesViewButton.vue
+++ b/resources/js/components/RoomTabFilesViewButton.vue
@@ -25,9 +25,20 @@
   />
 
   <Popover ref="op" class="max-w-96" data-test="terms-of-use-required-info">
-    <InlineNote severity="info">{{
+    <div class="flex w-full justify-between gap-4">
+    <InlineNote tabindex="-1" autofocus severity="info">{{
       $t("rooms.files.terms_of_use.required")
     }}</InlineNote>
+      <Button
+        class="popover-close-button"
+        @click="closePopover"
+        :aria-label="$t('app.close')"
+        text
+        rounded
+        severity="secondary"
+        icon="fas fa-xmark"
+      />
+    </div>
   </Popover>
 </template>
 <script setup>
@@ -58,6 +69,7 @@ const props = defineProps({
 });
 
 const op = ref();
+const triggerButton = ref(null);
 
 const downloadUrl = computed(() => {
   let url = props.fileUrl;
@@ -73,6 +85,14 @@ const downloadUrl = computed(() => {
 });
 
 function toggleTermsOfUsePopover(event) {
+  triggerButton.value = event.target;
   op.value.toggle(event);
 }
+
+function closePopover() {
+  op.value.hide();
+  if (triggerButton.value != null) {
+    triggerButton.value.focus();
+  }
+}
 </script>

From 21a9ddaa2bf74ec696fa57294dec85cc4bdf7521 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Thu, 18 Jun 2026 10:45:58 +0200
Subject: [PATCH 2/6] Add tests

---
 resources/css/override/_buttons.css                |  3 +++
 resources/css/override/override.css                |  1 +
 resources/js/components/RoomShareButton.vue        |  3 ++-
 resources/js/components/RoomTabFilesViewButton.vue |  3 ++-
 tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js | 12 ++++++++++++
 tests/Frontend/e2e/RoomsViewGeneral.cy.js          |  9 +++++++++
 6 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 resources/css/override/_buttons.css

diff --git a/resources/css/override/_buttons.css b/resources/css/override/_buttons.css
new file mode 100644
index 0000000000..6d5c0d45c0
--- /dev/null
+++ b/resources/css/override/_buttons.css
@@ -0,0 +1,3 @@
+.p-button > * {
+    pointer-events: none;
+}
diff --git a/resources/css/override/override.css b/resources/css/override/override.css
index 95e860364e..d32a842d05 100644
--- a/resources/css/override/override.css
+++ b/resources/css/override/override.css
@@ -4,3 +4,4 @@
 @import "./_badge.css";
 @import "./_animations.css";
 @import "./_dialog.css";
+@import "./_buttons.css";
diff --git a/resources/js/components/RoomShareButton.vue b/resources/js/components/RoomShareButton.vue
index c54df82c94..60ace91975 100644
--- a/resources/js/components/RoomShareButton.vue
+++ b/resources/js/components/RoomShareButton.vue
@@ -20,12 +20,13 @@
         </h2>
         <Button
           class="popover-close-button"
-          @click="closePopover"
+          data-test="popover-close-button"
           :aria-label="$t('app.close')"
           text
           rounded
           severity="secondary"
           icon="fas fa-xmark"
+          @click="closePopover"
         />
       </div>
       <div class="grow">
diff --git a/resources/js/components/RoomTabFilesViewButton.vue b/resources/js/components/RoomTabFilesViewButton.vue
index 3747b0fe0b..f787866656 100644
--- a/resources/js/components/RoomTabFilesViewButton.vue
+++ b/resources/js/components/RoomTabFilesViewButton.vue
@@ -31,12 +31,13 @@
     }}</InlineNote>
       <Button
         class="popover-close-button"
-        @click="closePopover"
+        data-test="popover-close-button"
         :aria-label="$t('app.close')"
         text
         rounded
         severity="secondary"
         icon="fas fa-xmark"
+        @click="closePopover"
       />
     </div>
   </Popover>
diff --git a/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js b/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
index 8308f9b76a..b5d08945be 100644
--- a/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
+++ b/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
@@ -882,6 +882,18 @@ describe("Rooms view files file actions", function () {
       .should("be.visible")
       .and("have.text", "rooms.files.terms_of_use.required");
 
+    // Focus on close button
+    cy.press(Cypress.Keyboard.Keys.TAB);
+    cy.get('[data-test="popover-close-button"]').should("have.focus");
+    cy.get('[data-test="popover-close-button"]').click();
+    cy.get('[data-test="terms-of-use-required-info"]').should("not.exist");
+
+    // Focus should be back on the view button
+    cy.get('[data-test="room-file-item"]')
+      .eq(0)
+      .find('[data-test="room-files-view-button"]')
+      .should("have.focus");
+
     cy.get('[data-test="terms-of-use-message"]').find("#terms_of_use").click();
 
     cy.get('[data-test="terms-of-use-required-info"]').should("not.exist");
diff --git a/tests/Frontend/e2e/RoomsViewGeneral.cy.js b/tests/Frontend/e2e/RoomsViewGeneral.cy.js
index 5fd37839de..43af3f92a1 100644
--- a/tests/Frontend/e2e/RoomsViewGeneral.cy.js
+++ b/tests/Frontend/e2e/RoomsViewGeneral.cy.js
@@ -1196,6 +1196,15 @@ describe("Room View general", function () {
     cy.get('[data-test="room-invitation-copy-code-button"]').should(
       "not.exist",
     );
+
+    // Focus on close button
+    cy.press(Cypress.Keyboard.Keys.TAB);
+    cy.get('[data-test="popover-close-button"]').should("have.focus");
+    cy.get('[data-test="popover-close-button"]').click();
+    cy.get("#invitationLink").should("not.exist");
+
+    // Focus should be back on the share button
+    cy.get('[data-test="room-share-button"]').should("have.focus");
   });
 
   it("room view as co-owner", function () {

From 8942a40c1c39c2dea23df4fca77dafe8380b54f0 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Thu, 18 Jun 2026 11:34:56 +0200
Subject: [PATCH 3/6] Update changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 96e880d176..755f4422d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Accessibility: Screen reader only button to close popover dialogs ([#2971])
+
 ## [v4.16.0] - 2026-06-12
 
 ### Added
@@ -809,6 +813,7 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#2911]: https://github.com/THM-Health/PILOS/pull/2911
 [#2912]: https://github.com/THM-Health/PILOS/issues/2912
 [#2913]: https://github.com/THM-Health/PILOS/pull/2913
+[#2971]: https://github.com/THM-Health/PILOS/pull/2971
 [#2997]: https://github.com/THM-Health/PILOS/issues/2997
 [#2998]: https://github.com/THM-Health/PILOS/issues/2998
 [#2999]: https://github.com/THM-Health/PILOS/pull/2999

From af5be3518e16464f719b6b9184388258a0576483 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Thu, 18 Jun 2026 11:53:12 +0200
Subject: [PATCH 4/6] Fix cs

---
 resources/js/components/RoomTabFilesViewButton.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/RoomTabFilesViewButton.vue b/resources/js/components/RoomTabFilesViewButton.vue
index f787866656..e909b59b96 100644
--- a/resources/js/components/RoomTabFilesViewButton.vue
+++ b/resources/js/components/RoomTabFilesViewButton.vue
@@ -26,9 +26,9 @@
 
   <Popover ref="op" class="max-w-96" data-test="terms-of-use-required-info">
     <div class="flex w-full justify-between gap-4">
-    <InlineNote tabindex="-1" autofocus severity="info">{{
-      $t("rooms.files.terms_of_use.required")
-    }}</InlineNote>
+      <InlineNote tabindex="-1" autofocus severity="info">{{
+        $t("rooms.files.terms_of_use.required")
+      }}</InlineNote>
       <Button
         class="popover-close-button"
         data-test="popover-close-button"

From a873a619aa61151c02c19638bfc8188538c6acd5 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Thu, 18 Jun 2026 12:07:31 +0200
Subject: [PATCH 5/6] Change target

---
 resources/js/components/RoomShareButton.vue        | 2 +-
 resources/js/components/RoomTabFilesViewButton.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/RoomShareButton.vue b/resources/js/components/RoomShareButton.vue
index 60ace91975..83b3c63285 100644
--- a/resources/js/components/RoomShareButton.vue
+++ b/resources/js/components/RoomShareButton.vue
@@ -121,7 +121,7 @@ const op = ref();
 const triggerButton = ref(null);
 
 const toggle = (event) => {
-  triggerButton.value = event.target;
+  triggerButton.value = event.currentTarget;
   op.value.toggle(event);
 };
 
diff --git a/resources/js/components/RoomTabFilesViewButton.vue b/resources/js/components/RoomTabFilesViewButton.vue
index e909b59b96..598092a45c 100644
--- a/resources/js/components/RoomTabFilesViewButton.vue
+++ b/resources/js/components/RoomTabFilesViewButton.vue
@@ -86,7 +86,7 @@ const downloadUrl = computed(() => {
 });
 
 function toggleTermsOfUsePopover(event) {
-  triggerButton.value = event.target;
+  triggerButton.value = event.currentTarget;
   op.value.toggle(event);
 }
 

From a4bc813b798071252ae1ceed8232a03e1644194a Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Thu, 18 Jun 2026 12:58:24 +0200
Subject: [PATCH 6/6] Cleanup

---
 resources/css/override/_buttons.css | 3 ---
 resources/css/override/override.css | 1 -
 2 files changed, 4 deletions(-)
 delete mode 100644 resources/css/override/_buttons.css

diff --git a/resources/css/override/_buttons.css b/resources/css/override/_buttons.css
deleted file mode 100644
index 6d5c0d45c0..0000000000
--- a/resources/css/override/_buttons.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.p-button > * {
-    pointer-events: none;
-}
diff --git a/resources/css/override/override.css b/resources/css/override/override.css
index d32a842d05..95e860364e 100644
--- a/resources/css/override/override.css
+++ b/resources/css/override/override.css
@@ -4,4 +4,3 @@
 @import "./_badge.css";
 @import "./_animations.css";
 @import "./_dialog.css";
-@import "./_buttons.css";