From 0f2fa258e88fff02147b94cf178fb556389cb9e1 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Mon, 23 Mar 2026 17:14:08 +0100
Subject: [PATCH 1/2] Add close button to room share popover (screen readers
 only)

---
 resources/js/components/RoomShareButton.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/resources/js/components/RoomShareButton.vue b/resources/js/components/RoomShareButton.vue
index 6f3f6f4fb..c72533905 100644
--- a/resources/js/components/RoomShareButton.vue
+++ b/resources/js/components/RoomShareButton.vue
@@ -1,5 +1,6 @@
 <template>
   <Button
+    id="room-share-button"
     data-test="room-share-button"
     :label="$t('rooms.invitation.share')"
     icon="fa-solid fa-share-nodes"
@@ -8,6 +9,7 @@
     @click="toggle"
   />
   <Popover ref="op" aria-labelledby="room-invitation-title" aria-modal="false">
+    <Button class="sr-only" @click="closePopover">{{ $t("app.close") }}</Button>
     <div class="flex min-w-min flex-col items-start gap-4 p-2">
       <fieldset class="flex w-full flex-col gap-2">
         <legend
@@ -136,6 +138,11 @@ function copyCode() {
   toast.success(t("rooms.invitation.copied_code"));
 }
 
+function closePopover() {
+  op.value.hide();
+  document.getElementById("room-share-button").focus();
+}
+
 const roomUrl = computed(() => {
   return (
     settingsStore.getSetting("general.base_url") +

From 98a56d379ed6b0912e2611da79c70e3197a2d1b4 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Tue, 31 Mar 2026 18:28:12 +0200
Subject: [PATCH 2/2] Make Popover heading as H2, set focus on heading

---
 resources/js/components/RoomShareButton.vue | 127 ++++++++++----------
 1 file changed, 63 insertions(+), 64 deletions(-)

diff --git a/resources/js/components/RoomShareButton.vue b/resources/js/components/RoomShareButton.vue
index c72533905..d9a6a093c 100644
--- a/resources/js/components/RoomShareButton.vue
+++ b/resources/js/components/RoomShareButton.vue
@@ -9,80 +9,79 @@
     @click="toggle"
   />
   <Popover ref="op" aria-labelledby="room-invitation-title" aria-modal="false">
-    <Button class="sr-only" @click="closePopover">{{ $t("app.close") }}</Button>
     <div class="flex min-w-min flex-col items-start gap-4 p-2">
-      <fieldset class="flex w-full flex-col gap-2">
-        <legend
-          id="room-invitation-title"
-          class="block font-bold whitespace-nowrap"
-        >
-          {{ $t("rooms.invitation.title") }}
-        </legend>
-        <div class="grow">
-          <InputGroup>
-            <InputGroupAddon class="min-w-5 border-none px-0">
-              <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-surface-0 text-ellipsis shadow-none dark:border-surface-900"
-              :aria-label="$t('rooms.invitation.link')"
-              readonly
-              :value="roomUrl"
-              @focus="$event.target.select()"
+      <h2
+        id="room-invitation-title"
+        tabindex="-1"
+        autofocus
+        class="block font-bold whitespace-nowrap"
+      >
+        {{ $t("rooms.invitation.title") }}
+      </h2>
+      <Button class="sr-only" @click="closePopover">{{
+        $t("app.close")
+      }}</Button>
+      <div class="grow">
+        <InputGroup>
+          <InputGroupAddon class="min-w-5 border-none px-0" aria-hidden="true">
+            <i
+              v-tooltip="$t('rooms.invitation.link')"
+              class="fa-solid fa-link"
+            />
+          </InputGroupAddon>
+          <InputText
+            id="invitationLink"
+            class="w-full border-surface-0 text-ellipsis shadow-none dark:border-surface-900"
+            :aria-label="$t('rooms.invitation.link')"
+            readonly
+            :value="roomUrl"
+            @focus="$event.target.select()"
+          />
+          <InputGroupAddon class="border-none">
+            <Button
+              v-tooltip="$t('rooms.invitation.copy_url')"
+              data-test="room-invitation-copy-link-button"
+              :aria-label="$t('rooms.invitation.copy_url')"
+              icon="fa-solid fa-copy"
+              severity="secondary"
+              @click="copyUrl"
             />
-            <InputGroupAddon class="border-none">
-              <Button
-                v-tooltip="$t('rooms.invitation.copy_url')"
-                data-test="room-invitation-copy-link-button"
-                :aria-label="$t('rooms.invitation.copy_url')"
-                icon="fa-solid fa-copy"
-                severity="secondary"
-                @click="copyUrl"
-              />
-            </InputGroupAddon>
-          </InputGroup>
+          </InputGroupAddon>
+        </InputGroup>
 
-          <InputGroup v-if="room.access_code" class="mt-2">
-            <InputGroupAddon class="min-w-5 border-none px-0">
-              <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-surface-0 shadow-none dark:border-surface-900"
-              :aria-label="$t('rooms.invitation.code')"
-              readonly
-              :value="formattedAccessCode"
-              @focus="$event.target.select()"
+        <InputGroup v-if="room.access_code" class="mt-2">
+          <InputGroupAddon class="min-w-5 border-none px-0" aria-hidden="true">
+            <i
+              v-tooltip="$t('rooms.invitation.code')"
+              class="fa-solid fa-key"
             />
-            <InputGroupAddon class="border-none">
-              <Button
-                v-tooltip="$t('rooms.invitation.copy_code')"
-                data-test="room-invitation-copy-code-button"
-                :aria-label="$t('rooms.invitation.copy_code')"
-                icon="fa-solid fa-copy"
-                severity="secondary"
-                @click="copyCode"
-              />
-            </InputGroupAddon>
-          </InputGroup>
-        </div>
-      </fieldset>
+          </InputGroupAddon>
+          <InputText
+            id="invitationCode"
+            class="w-full border-surface-0 shadow-none dark:border-surface-900"
+            :aria-label="$t('rooms.invitation.code')"
+            readonly
+            :value="formattedAccessCode"
+            @focus="$event.target.select()"
+          />
+          <InputGroupAddon class="border-none">
+            <Button
+              v-tooltip="$t('rooms.invitation.copy_code')"
+              data-test="room-invitation-copy-code-button"
+              :aria-label="$t('rooms.invitation.copy_code')"
+              icon="fa-solid fa-copy"
+              severity="secondary"
+              @click="copyCode"
+            />
+          </InputGroupAddon>
+        </InputGroup>
+      </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>