feat(dialog): add dismissHelper and visually-hidden buttons

Author: marissahuysentruyt

packages/dialog/src/Dialog.ts

@@ -134,8 +134,26 @@ export class Dialog extends ObserveSlotPresence(AlertDialog, [
         `;
     }
 
+    /**
+     * Returns a visually hidden dismiss button for mobile screen reader accessibility.
+     * This button is placed before and after dialog content to allow mobile screen reader
+     * users (particularly VoiceOver on iOS) to easily dismiss the overlay.
+     */
+    protected get dismissHelper(): TemplateResult {
+        return html`
+            <div class="visually-hidden">
+                <button
+                    tabindex="-1"
+                    aria-label="Dismiss"
+                    @click=${this.close}
+                ></button>
+            </div>
+        `;
+    }
+
     protected override render(): TemplateResult {
         return html`
+            ${this.dismissHelper}
             <div class="grid">
                 ${this.renderHero()} ${this.renderHeading()}
                 ${this.error
@@ -153,6 +171,7 @@ export class Dialog extends ObserveSlotPresence(AlertDialog, [
                 ${this.hasButtons ? this.renderButtons() : nothing}
                 ${this.dismissable ? this.renderDismiss() : nothing}
             </div>
+            ${this.dismissHelper}
         `;
     }
 

packages/dialog/src/dialog.css

@@ -66,3 +66,17 @@
     inline-size: 100%;
     display: grid;
 }
+
+.visually-hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    height: 10px;
+    margin: 0 -1px -1px 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 10px;
+    white-space: nowrap;
+    appearance: none;
+}