Feature: Team Page

[KevinMulhern]

Because:

• Feature: Team Page top-meta#3
• Replaces the hall of fame on the contributing page

This commit:

• Adds a team locales file where team member details will live
• Divides the page into the team role structure we have within TOP.
• Adds an alumni section for former team members.
• Adds a smooth scroll anchor links for easier navigation between roles.

[KevinMulhern]

This is still a WIP - but I'm open for early feedback https://odin-review-app-pr-4125.herokuapp.com/team

[ManonLef]

Love the overall look but will have to check on desktop! Noticed something funny with social link icons on mobile though.

[KevinMulhern]

Good spot, thanks @ManonLef 💪

[KevinMulhern]

The team footer link has been removed so this can be merged without all the team data populated first. We'll then do small follow up PR's adding everyone to the team yaml file. To access the page on the review app, you can go directly to the team page url: https://odin-review-app-pr-4125.herokuapp.com/team

[thatblindgeye]

Copy pasting some feedback from Discord:

• For the user avatars, we could probably get away with an empty "" alt attribute, since they seem more decorative than anything and not really important for AT to be able to traverse
• Could be worth adding an aria-labelledby or aria-label on the ul elements, both the list of all members of each team as well as the list of each person's personal links, so that the lists are more descriptive, e.g. "List Core team 7 items" and "List Corbin Dinis social media 2 items" etc
• For the link icons for each member card, I feel like we should include the user name as part of the hidden link text, e.g. "Corbin Dinis GitHub" (or "Corbis Dinish on GitHub" or something), just so there aren't a ton of generic "GitHub" link texts on the page. Either that, or making that hidden link text aria-hidden="true", add an aria-label="[site]" to the anchor element, add an ID to the anchor and the heading with the username, and apply an aria-lablledby to the anchor element. The latter would result in less duplicate text if the styles don't load properly while still announcing links more uniquely. So basically:

<h3 id="some-id-1">
...
<a aria-labelledby="some-id-1 some-id-2" id="some-id-2" aria-label="Twitter">
...
<span class="sr-only" aria-hidden="true">

[KevinMulhern]

Thanks @thatblindgeye, I have points 1 and 3 done.

For labelling the ul elements, is that a common thing? I haven't seen that before, but I'd love to read up on it more if you have any suggested resources? I've only really seen role and listitem used in regards to non typical lists and accessibility.

[ManonLef]

Maybe a bit late, especially considering this PR being open as well... But I might think the rounding is a bit too much.
I can't play around with the deployment anymore. But perhaps we should try the same rounding as the path sections which is rounded-lg?

Screenshots below

[ManonLef]

I edited the first card on the homepage to be rounded-lg of the previously mentioned PR which adds rounding to the cards:

[ManonLef]

rounded-lg

rounded-xl

[KevinMulhern]

Thanks for the feedback @manon, putting them side by side, I prefer the larger border radius on this page. It has a better fit and feel imo.

rounded-lg

rounded-2xl

Although, I think you're right about rounded-lg fitting better with the home page course cards.

I've kicked off a deploy so you can have a play?

[ManonLef]

Yes I was playing as soon as I saw that deploy 😄

If you like it better, you should leave it!
It looks like you lost some top padding for some reason in your screenshots btw.

[KevinMulhern]

Good spot 🦅 👁️

I tweaked the top padding, member cards with no social links were looking a bit top heavy.
It's dangerous to look at things like this after having a break from it for a few days 😆

[wise-king-sullyman]

I've got one question in a few places, other than that looks awesome, killer work on this 💪

[wise-king-sullyman]

Shouldn't this be aria-label rather than aria-labelledby since we're passing a description rather than an id?

[wise-king-sullyman]

Same labelledby vs label question here.

[wise-king-sullyman]

And here.

[KevinMulhern]

Thanks @wise-king-sullyman, I got those changed over. The feedback is much appreciated mate.

I really need to brush up on accessibility 😅

[wise-king-sullyman]

Haha pretty much all credit for any a11y knowledge I have goes to @thatblindgeye

[wise-king-sullyman]

🔥 🔥 🔥

[thatblindgeye]

@KevinMulhern I don't have any resources on hand at the moment, but essentially by providing a label:

• It provides more context if a user is traversing the lists on a page via keyboard shortcut with assistive tech (or via a rotor menu, if it has a category for lists)
• Provides context when a user is normally traversing a page. "List, 2 items" vs "Social media, list, 2 items", the user knows what exactly the purpose/content of the list is/meant to be immediately (which that may be more apparent in certain situations, but still)
• It differentiates from other lists on the page if there are several (ties back to keyboard shortcuts and rotor menu)