www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

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

Merged
a3thakra merged 6 commits from amy-keyboard-accessibility into main 2021-09-03 16:41:00 -04:00
Conversation 3 Commits 6 Files Changed 6 +54 -7
a258wang commented 2021-09-02 02:03:58 -04:00
Owner
Copy Link

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 2021-09-02 02:03:59 -04:00
continuous-integration/drone/push Build is passing Details
8e54e1a551 Fix home page club title wrapping on desktop Safari
a3thakra commented 2021-09-02 12:11:57 -04:00
Owner
Copy Link

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. ✅
a3thakra commented 2021-09-02 12:13:01 -04:00
Owner
Copy Link

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 2021-09-02 12:57:56 -04:00
a258wang changed title from Fix accessibility issues for keyboard-only users to Fix accessibility issues for keyboard-only users, and fix some Safari bugs 2021-09-02 18:26:34 -04:00
a3thakra reviewed 2021-09-03 15:39:52 -04:00
components/Footer.module.css Outdated
@ -36,3 +36,4 @@
.container {
flex-direction: column-reverse;
justify-content: space-around;
gap: calc(4rem / 16);
a3thakra commented 2021-09-03 15:39:52 -04:00
Owner
Copy Link

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 2021-09-03 15:52:26 -04:00
continuous-integration/drone/push Build is passing Details
2cb5449262 Increase footer gap
a3thakra commented 2021-09-03 16:40:30 -04:00
Owner
Copy Link

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

Update: I tested it on my roommate's mac.
a3thakra approved these changes 2021-09-03 16:40:40 -04:00
a3thakra merged commit 8d43bf260d into main 2021-09-03 16:41:00 -04:00
a3thakra deleted branch amy-keyboard-accessibility 2021-09-03 16:41:17 -04:00
Sign in to join this conversation.
Reviewers
No reviewers
a3thakra
Labels
Clear labels   
a11y

   
Backlog

   
Blocked

   
Bug

   
Content

   
Dependencies

   
Design

   
Feature Request

   
Good First Issue

   
In Progress

   
Performance

   
Priority - High

   
Priority - Low

   
Priority - Medium

   
Untriaged
No Label
a11y
Backlog
Blocked
Bug
Content
Dependencies
Design
Feature Request
Good First Issue
In Progress
Performance
Priority - High
Priority - Low
Priority - Medium
Untriaged
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#268
No description provided.
Delete Branch "amy-keyboard-accessibility"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?