Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CIVIC-1244] Added a11y fixes for mobile menu. #1149

Merged
merged 6 commits into from
Dec 7, 2023
Merged

[CIVIC-1244] Added a11y fixes for mobile menu. #1149

merged 6 commits into from
Dec 7, 2023

Conversation

alan-cole
Copy link
Collaborator

@alan-cole alan-cole commented Nov 23, 2023 •
edited

https://salsadigital.atlassian.net/browse/CIVIC-1244

Checklist before requesting a review

  • I have formatted the subject to include ticket number as [CS-123] Verb in past tense with dot at the end.
  • I have added a link to the issue tracker
  • I have provided information in Changed section about WHY something was done if this was not a normal implementation
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have added tests that prove my fix is effective or that my feature works
  • I have run new and existing relevant tests locally with my changes, and they passed
  • I have provided screenshots, where applicable

Changes:

  • Updated use of 'links' component to 'buttons'. Links without href are not treated as interactive by the browser.
  • Updated button styles to remove the default background color.
  • Provide a consistent color for the focus ring.
  • Added focus onto first link (after animation duration) when opening a flyout.
  • Added focus on open trigger when closing a flyout.
  • Added focus on first found trigger when closing all flyouts.

Screenshots

CIVIC-1244.mp4

@alan-cole alan-cole added the State: Do not review Do not review this pull request label Nov 23, 2023
@alan-cole alan-cole self-assigned this Nov 23, 2023
@alan-cole alan-cole force-pushed the feature/CIVIC-1244-mobile-menu-focus branch from 79ebb85 to 0d09979 Compare December 6, 2023 03:50
@alan-cole alan-cole added State: Needs review Pull requests needs a review from assigned developers and removed State: Do not review Do not review this pull request labels Dec 6, 2023
AlexSkrypnyk
AlexSkrypnyk requested changes Dec 6, 2023
View reviewed changes
Copy link
Collaborator

@AlexSkrypnyk AlexSkrypnyk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alan-cole
Thank you so much for working on this.

There are 2 nitpicks and 1 major question. Could you please address all of them. thank you

web/themes/contrib/civictheme/civictheme_library/components/00-base/flyout/flyout.js Outdated Show resolved Hide resolved
...victheme/civictheme_library/components/03-organisms/mobile-navigation/mobile-navigation.scss Outdated Show resolved Hide resolved
@AlexSkrypnyk AlexSkrypnyk added State: Requires more work Pull request was reviewed and reviver(s) asked to work further on the pull request and removed State: Needs review Pull requests needs a review from assigned developers labels Dec 6, 2023
@alan-cole alan-cole added State: Needs review Pull requests needs a review from assigned developers State: Do not review Do not review this pull request and removed State: Requires more work Pull request was reviewed and reviver(s) asked to work further on the pull request State: Needs review Pull requests needs a review from assigned developers State: Do not review Do not review this pull request labels Dec 7, 2023
@alan-cole
[CIVIC-1244] Added a11y fixes for mobile menu.
56f234b 
Changes:
- Updated use of 'links' component to 'buttons'. Links without href are not treated as interactive by the browser.
- Updated button styles to remove the default background color.
- Provide a consistent color for the focus ring.
- Added focus onto first link (after animation duration) when opening a flyout.
- Added focus on open trigger when closing a flyout.
- Added focus on first found trigger when closing all flyouts.
@alan-cole
[CIVIC-1244] Fixed linting issue.
6308a01
@alan-cole
[CIVIC-1244] Fixed review items.
a4ef502 
- CSS styling to follow conventions.
- Flyout focus to be an optional feature.
@alan-cole
[CIVIC-1244] Updated flyout focus to accept a focus target selector.
1d8a7dc
@alan-cole
[CIVIC-1244] Updated flyout focus - filter out empty selector.
5f2726b
@alan-cole alan-cole force-pushed the feature/CIVIC-1244-mobile-menu-focus branch from 10d32fe to 5f2726b Compare December 7, 2023 05:14
@AlexSkrypnyk AlexSkrypnyk force-pushed the feature/CIVIC-1244-mobile-menu-focus branch from cfab098 to 82e3b02 Compare December 7, 2023 06:26
AlexSkrypnyk
AlexSkrypnyk approved these changes Dec 7, 2023
View reviewed changes
Copy link
Collaborator

@AlexSkrypnyk AlexSkrypnyk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alan-cole
Thank you for your contribution! This is solid work!

@AlexSkrypnyk AlexSkrypnyk enabled auto-merge (squash) December 7, 2023 06:29
@AlexSkrypnyk AlexSkrypnyk added State: Ready to be merged Pull request is ready to be merged (assigned after testing is complete) and removed State: Needs review Pull requests needs a review from assigned developers labels Dec 7, 2023
@AlexSkrypnyk AlexSkrypnyk merged commit e919da5 into develop Dec 7, 2023
9 checks passed
@AlexSkrypnyk AlexSkrypnyk deleted the feature/CIVIC-1244-mobile-menu-focus branch December 7, 2023 06:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AlexSkrypnyk AlexSkrypnyk AlexSkrypnyk approved these changes

Assignees

@alan-cole alan-cole

Labels
State: Ready to be merged Pull request is ready to be merged (assigned after testing is complete)
Projects
None yet
Milestone
No milestone
2 participants
@alan-cole @AlexSkrypnyk