Enhancement: Ensure all buttons are keyboard focusable

[ogorman89]

Describe the Current Behavior/Feature:

Fix known bug, making buttons unable to be focused by keyboard (tab targeting) for A11y Places we have noticed this issue include:

• Footer social links
• Learn More buttons on projects
• Project page social links

Buttons that appear to be working

• Nav
• Volunteer
• Onboarding

Audit all links to ensure they are focusable.

---

Proposed Implementation:

[asaltveit]

At this point, it looks like only a couple buttons for the Google Calendar are not focusable.

https://github.com/codeforpdx/codepdx_website/assets/23389806/75cfcdf1-d163-4d32-a4dc-85d2255ea14c

[Jared-Krajewski]

At this point, it looks like only a couple buttons for the Google Calendar are not focusable.

CodePDXFocusableButtons.mov

not sure if you can make the buttons within an iframe focusable.

[asaltveit]

Upon a closer look, there do seem to be a couple of issues. There is an odd flow on the volunteer page. Perhaps some of this was on purpose?

https://github.com/codeforpdx/codepdx_website/assets/23389806/a9d52f58-7643-4507-b6d5-2bde3c324405

Also, most buttons need to be tabbed a second time in order to use the link, otherwise it just sends the user to the top of the page.

https://github.com/codeforpdx/codepdx_website/assets/23389806/a597cf9d-ac44-4b8f-a649-be2aabdaf20d

[Jared-Krajewski]

Upon a closer look, there do seem to be a couple of issues. There is an odd flow on the volunteer page. Perhaps some of this was on purpose?

CodePdx.Volunteer.Flow.mov Also, most buttons need to be tabbed a second time in order to use the link, otherwise it just sends the user to the top of the page.

CodePdx.Double.Click.mov

I am not sure what you mean by "odd flow" on volunteer page, mine tabs through all links as expected. Assuming you are referring to it skipping all main content and going right to the social links like I see in the video. What browser and OS are you using?

Thanks for pointing out that scroll to top issue, I was not aware of that. I only have that on the volunteer link in the second video, if possible please list the links that cause this scroll to top issue for you.

[asaltveit]

Ah, my computer is a bit old. I'm using macOS 10.12 and Chrome. For the flow - first it skips all content, then if you shift-tab it can take you to the bottom last and/or second to last sections.

I'm also only seeing the the scroll to top issue on the volunteer button. But each of the "Learn More" buttons on the projects do require double tabs to get past. That could be simplified.

[Jared-Krajewski]

I'm not sure why volunteer skips all content for you, I cant replicate that on any of my devices and the links on that page are all keyboard focused. Not sure why it is doing that for you.

I do see the double tab issue and agree that can be simplified to just tab once.