feat(web,a11y): standardize the FullScreenModal UI #8566
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* 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
…/standard-modal-header-v2
ben-basten
changed the title
|
Thank you for another amazing PR. I have some feedback Can we align this?
And also not having the button text on the same line (reduce font size) in for this modal's width? |
|
Working on fixing the merge conflicts... |
…/standard-modal-header-v2 conflicts: * slideshow-settings.svelte * album-options.svelte * create-user-form.svelte * map-settings-modal.svelte
Fixed the alignment and button wrapping! There are numerous more modals with this issue - I've ran through and fixed those too. Screenshots
|
…/standard-modal-header-v2
…/standard-modal-header-v2
jrasm91
approved these changes
Apr 7, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Follow up to #8388, #8469.
Standardized
FullScreenModal, using the same style as theBaseModal:wide: 750pxnarrow: 450pxauto: fits the width of the modal content, up to a maximum of 550pxOther improvements:
Improved accessibility:
aria-modalandaria-labelledby, so the screen reader now announces the header when the modal is openedBaseModal, which prevents focus from being hidden behind the sticky bottom footerScreenshots
Create user
Before
After - light
After - dark
Edit user
Before
After - light
After - dark
Confirmation modal
Desktop - dark
Desktop - light
Mobile - light
Set date of birth
Mobile
Note! Modals with CTA buttons that aren't using the
ConfirmationDialoguecomponent do not vertically stack the CTA buttons, and can cause horizontal scrolling in some cases.Desktop - dark
Desktop - light
Change location
Dark
Light
Mobile
Keyboard shortcuts
Desktop
Mobile
Select avatar color
Desktop
Mobile
How Has This Been Tested?
Tested using MacOS+VoiceOver+Firefox.
Checklist: