feat(web,a11y): standardize the FullScreenModal UI ()

* feat(web,a11y): standardize the FullScreenModal look

* consistent header, padding, close button, and radius as BaseModal
* vertically stacking ConfirmDialogue CTA buttons in narrow screens
* adding aria-modal tags for screen reader
* add viewport-specific height limits on modals, to enable scrolling
* prevent focus from being hidden under sticky content in modals
* standardize FullScreenModal widths using a Prop

* wip: consistent padding with header

* fix: alignment on "create user" and "edit user" modals

* fix: horizontal modal content alignment

* fix: create user CTA buttons

* chore: remove unnecessary warning

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Ben 2024-04-08 21:02:09 +00:00 committed by GitHub
parent d43daaee81
commit 796c933fb8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 749 additions and 853 deletions
web/src/lib/components/user-settings-page

View file

@ -81,7 +81,7 @@
{#if newKey}
<APIKeyForm
title="New API Key"
title="New API key"
submitText="Create"
apiKey={newKey}
on:submit={({ detail }) => handleCreate(detail)}
@ -95,6 +95,7 @@
{#if editKey}
<APIKeyForm
title="API key"
submitText="Save"
apiKey={editKey}
on:submit={({ detail }) => handleUpdate(detail)}
@ -104,7 +105,8 @@
{#if deleteKey}
<ConfirmDialogue
prompt="Are you sure you want to delete this API Key?"
id="confirm-api-key-delete-modal"
prompt="Are you sure you want to delete this API key?"
onConfirm={() => handleDelete()}
onClose={() => (deleteKey = null)}
/>