Fix accessibility issues for keyboard-only users, and fix some Safari bugs #268

Merged
a3thakra merged 6 commits from amy-keyboard-accessibility into main 1 year ago
Owner

Also fixed a couple of Safari-specific bugs. Summary:

  • Added a secondary-accent ring around buttons on focus. (White didn't show up very well against the background.) We can always chat with design about this later if we want to change it.
  • Fixed the weirdness with tabbing over the headers on the Advice pages. I also made the header flex vertically on mobile screens - this fixes the issue of extra whitespace on the right side, and is also somewhat consistent with the menu-y thing at the top of the mobile Meet the Team page.
    • I was very tempted to do this on the Events term archive pages as well, but I figured I should get someone else's opinion on that first.
  • Removed the extra triangle symbol in the MiniEventCard on Safari. I had to use a vendor prefix, but if anyone else can come up with something better, then please do that, thank you.
  • Stopped the home page "Computer Science Club" from breaking into two lines on small desktop screens.
  • Added extra space to mobile footer.

Closes #250
Closes #248
Closes #253
Closes #256
Closes #261

Also fixed a couple of Safari-specific bugs. Summary: - Added a secondary-accent ring around buttons on focus. (White didn't show up very well against the background.) We can always chat with design about this later if we want to change it. - Fixed the weirdness with tabbing over the headers on the Advice pages. I also made the header flex vertically on mobile screens - this fixes the issue of extra whitespace on the right side, and is also somewhat consistent with the menu-y thing at the top of the mobile Meet the Team page. - I was very tempted to do this on the Events term archive pages as well, but I figured I should get someone else's opinion on that first. - Removed the extra triangle symbol in the MiniEventCard on Safari. I had to use a vendor prefix, but if anyone else can come up with something better, then please do that, thank you. - Stopped the home page "Computer Science Club" from breaking into two lines on small desktop screens. - Added extra space to mobile footer. Closes #250 Closes #248 Closes #253 Closes #256 Closes #261
a258wang added 4 commits 1 year ago
Collaborator

Added a secondary-accent ring around buttons on focus. (White didn't show up very well against the background.) We can always chat with design about this later if we want to change it.

Fixed the weirdness with tabbing over the headers on the Advice pages. I also made the header flex vertically on mobile screens - this fixes the issue of extra whitespace on the right side, and is also somewhat consistent with the menu-y thing at the top of the mobile Meet the Team page.
I was very tempted to do this on the Events term archive pages as well, but I figured I should get someone else's opinion on that first.

Do it! It looks much better than what it is right now, also much more consistent with the rest of the website!

Removed the extra triangle symbol in the MiniEventCard on Safari. I had to use a vendor prefix, but if anyone else can come up with something better, then please do that, thank you.

Stopped the home page "Computer Science Club" from breaking into two lines on large desktop screens.

Added extra space to mobile footer.

> Added a secondary-accent ring around buttons on focus. (White didn't show up very well against the background.) We can always chat with design about this later if we want to change it. ✅ > Fixed the weirdness with tabbing over the headers on the Advice pages. I also made the header flex vertically on mobile screens - this fixes the issue of extra whitespace on the right side, and is also somewhat consistent with the menu-y thing at the top of the mobile Meet the Team page. I was very tempted to do this on the Events term archive pages as well, but I figured I should get someone else's opinion on that first. ✅ Do it! It looks much better than what it is right now, also much more consistent with the rest of the website! > Removed the extra triangle symbol in the MiniEventCard on Safari. I had to use a vendor prefix, but if anyone else can come up with something better, then please do that, thank you. ✅ > Stopped the home page "Computer Science Club" from breaking into two lines on large desktop screens. ✅ > Added extra space to mobile footer. ✅
Collaborator

I can't test on Safari, so let's assign this PR to someone add a reviewer who has a mac. Then they could approve this PR if everything looks good, and we can merge!

I can't test on Safari, so let's ~~assign this PR to someone~~ add a reviewer who has a mac. Then they could approve this PR if everything looks good, and we can merge!
a258wang added 1 commit 1 year ago
a258wang changed title from Fix accessibility issues for keyboard-only users to Fix accessibility issues for keyboard-only users, and fix some Safari bugs 1 year ago
a3thakra reviewed 1 year ago
.container {
flex-direction: column-reverse;
justify-content: space-around;
gap: calc(4rem / 16);
Collaborator

I would increase the gap to 1rem, and also increase the padding on the .footer to 1rem

I would increase the gap to 1rem, and also increase the padding on the .footer to 1rem
a3thakra marked this conversation as resolved
a3thakra added 1 commit 1 year ago
2cb5449262 Increase footer gap
Collaborator

Update: I tested it on my roommate's mac.

Update: I tested it on my roommate's mac.
a3thakra approved these changes 1 year ago
a3thakra merged commit 8d43bf260d into main 1 year ago
a3thakra deleted branch amy-keyboard-accessibility 1 year ago

Reviewers

a3thakra approved these changes 1 year ago
continuous-integration/drone/push Build is passing
The pull request has been merged as 8d43bf260d.
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#268
Loading…
There is no content yet.