Add SelfPacedProgressTable to My PL LandingPage component #57869
Conversation
note: this is failing, but I need to commit in case I look at this on my laptop
| @@ -73,6 +75,7 @@ export default function LandingPage({ | |||
| text: i18n.plLandingGettingStartedButton(), | |||
| }, | |||
| ]} | |||
| marginBottom={'0'} | |||
There was a problem hiding this comment.
Added this to remove the bottom margin from the Getting Started TwoColumnActionBlock component used on this page for new teachers.
| } | ||
|
|
||
| .headerContainer { | ||
| background-color: color.$light_gray_50; | ||
| padding: 0 1rem; |
There was a problem hiding this comment.
Did a little bit of refactoring here related to this PR since the inline padding was being applied to all the <section>s on the page. Here's a screenshot of the tabs showing to confirm this didn't break, but these will not show up on the page yet!
| @@ -17,6 +17,7 @@ table.selfPacedProgressTable { | |||
| height: 0.5rem; | |||
| border-radius: 1rem; | |||
| margin-block-start: 0.25rem; | |||
| overflow: hidden; | |||
There was a problem hiding this comment.
This fixes a little UI bug on the progress bar if it gets close to the end:
| Before | After |
|---|---|
 |
 |
There was a problem hiding this comment.
That attention to detail🔥
| @@ -39,7 +39,7 @@ const CourseRow = ({ | |||
| {percent_completed}% {i18n.selfPacedPlCompleted()} | |||
| </BodyThreeText> | |||
| {/* Progress bar */} | |||
| <div className={styles.progressBar}> | |||
| <div className={styles.progressBar} data-testid="progress-bar"> | |||
There was a problem hiding this comment.
Just a thought for future/followup work- it would be super cool if this had some sore of accessible readout (i.e. label) of progress! I know that isn't a focus for this page but always something to keep in mind in case it's easy to add.
There was a problem hiding this comment.
I thought about adding something like that! But it says "(percent)% Completed" right above it so I thought it would be redundant 😅
There was a problem hiding this comment.
oo does a screen reader read that out loud? I'm not sure if this is what you're referring to, but there is a way to add an aria-label that doesn't show, but a screen reader would still read
There was a problem hiding this comment.
Oh it doesn't! VoiceOver on Mac only reads links and buttons. I checked this on the Teacher homepage, and it does the same thing there too (only reads links and buttons). I'll add a ticket for this in the next AccHack.
Edit: made a ticket: https://codedotorg.atlassian.net/browse/A11Y-281
There was a problem hiding this comment.
Okay- it should be as simple as wrapping the text in a . But yes- thanks for making a ticket!
There was a problem hiding this comment.
Neither the paragraph or progress bar is a link, so it'd need to be something else. Misread that to say "wrap in an a (link tag)" 🤦♀️ I'm too scattered today to look into it, but will look tomorrow! This makes me excited for the Deque training, since I assumed screen readers read all the text on a page 🥲
There was a problem hiding this comment.
Ahh yes okay I'm following! To be clear, folks using screen readers use the tab key to scan through interactive elements (like you mentioned- buttons, links, input fields, etc), but they can also use keys to navigate by header size (and drill down into reading the text directly if they choose). This is a super interesting case because A11y-wise, really we should be treating this div as an image with an alt text. Happy to brainstorm together at some point!
There was a problem hiding this comment.
use keys to navigate by header size (and drill down into reading the text directly if they choose
A ha! That makes sense, thanks for explaining. This is an interesting case…maybe the <figure> and <figcaption> elements would work? (MDN docs)
Let's def brainstorm on this, and thanks for bringing it up!
| @@ -17,6 +17,7 @@ table.selfPacedProgressTable { | |||
| height: 0.5rem; | |||
| border-radius: 1rem; | |||
| margin-block-start: 0.25rem; | |||
| overflow: hidden; | |||
There was a problem hiding this comment.
That attention to detail🔥
Adds the
SelfPacedProgressTablecomponent to https://studio.code.org/my-professional-learningconstants.jsfile to share test data between Storybook andlandingPageTest.jsunit tests (thanks for the tip @hannahbergam!)tableStyles.scssstylesheet to this page so the My Workshops table matches the updated UIFollowup: the existing self-paced courses section on the Teacher homepage will be removed and replaced with a link to check this page to see self-paced course progress (Jira ticket)
Jira ticket: ACQ-1715
Has Self-Paced PL Courses
New Teacher (w/o Self-Paced courses)