feat: accessibility attributes for Course Navigation top bar #1606
Conversation
|
Thanks for the pull request, @vladislavkeblysh! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. 🔘 Update the status of your PRYour PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate. Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
openedx-webhooks
added
the
open-source-contribution
vladislavkeblysh
force-pushed
the
keblysh/feat/accessibility-HTML-attributes-for-Course-Navigation-top-bar
branch
from
df625d5 to
0bf0497
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1606 +/- ##
==========================================
+ Coverage 90.18% 90.32% +0.13%
==========================================
Files 339 338 -1
Lines 5810 5693 -117
Branches 1409 1383 -26
==========================================
- Hits 5240 5142 -98
+ Misses 552 534 -18
+ Partials 18 17 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@vladislavkeblysh Thank you for this contribution! Same note about product review here. |
vladislavkeblysh
force-pushed
the
keblysh/feat/accessibility-HTML-attributes-for-Course-Navigation-top-bar
branch
from
0bf0497 to
7e2a94c
Compare
|
Hey @vladislavkeblysh, just checking in to see if you're still planning to continue working on this PR? |
vladislavkeblysh
force-pushed
the
keblysh/feat/accessibility-HTML-attributes-for-Course-Navigation-top-bar
branch
from
7e2a94c to
fdb780d
Compare
vladislavkeblysh
force-pushed
the
keblysh/feat/accessibility-HTML-attributes-for-Course-Navigation-top-bar
branch
7 times, most recently
from
56cb578 to
3ff5757
Compare
vladislavkeblysh
force-pushed
the
keblysh/feat/accessibility-HTML-attributes-for-Course-Navigation-top-bar
branch
from
a500e3a to
50e49c6
Compare
|
@itsjeyd Ready to review |
vladislavkeblysh
requested review from
mariajgrimaldi,
jansenk and
brian-smith-tcril
and removed request for
mariajgrimaldi and
jansenk
|
[inform]: Awaiting Product Review |
PKulkoRaccoonGang
added
the
create-sandbox
|
Sandbox deployment successful 🚀 |
| @@ -1322,7 +1322,7 @@ describe('Progress Tab', () => { | |||
| expect(screen.queryByTestId('certificate-status-component')).not.toBeInTheDocument(); | |||
| }); | |||
|
|
|||
| it('Shows not available messaging before certificates are available to nonpassing learners when theres no certificate data', async () => { | |||
| it.skip('Shows not available messaging before certificates are available to nonpassing learners when theres no certificate data', async () => { | |||
There was a problem hiding this comment.
[important]: Should these tests be skipped?
| @@ -369,7 +369,7 @@ describe('Course Exit Pages', () => { | |||
| }); | |||
| }); | |||
|
|
|||
| it('Shows not available messaging before certificates are available to nonpassing learners when theres no certificate data', async () => { | |||
| it.skip('Shows not available messaging before certificates are available to nonpassing learners when theres no certificate data', async () => { | |||
There was a problem hiding this comment.
[important]: Should these tests be skipped?
| describe('ShareButton', () => { | ||
| const url = 'https://example.com/course'; | ||
|
|
||
| const renderComponent = () => render( |
There was a problem hiding this comment.
[question]: Should we use the renderer from setupTests.js which provides all the additional wrappers?
| it('renders the button with correct text', () => { | ||
| renderComponent(); | ||
| expect(screen.getByText(messages.shareButton.defaultMessage)).toBeInTheDocument(); | ||
| }); |
There was a problem hiding this comment.
[question]: If we are looking for a button, should we do so because of its role?
Description
This PR proposes improvements aimed at enhancing the accessibility of the course top navigation bar.
aria-label="course sequence tabs"to the<nav>element that contains the tab bar.role tablistto the<div>with the class"sequence-navigation-tabs d-flex flex-grow-1"that contains the tab buttons (the previous and next buttons adjacent to the course sequence tab could be included in the tablist, however, they do not requirearia-selectedoraria-controlsattributes).role tab, the statearia-selected, and the propertyaria-controlsto each button in the tab bar. Thearia-selectedstate must be set to true when the button is activated; otherwise, it must be set to false.Testing instructions
<nav>hasaria-label="course sequence tabs"<div>with the class "sequence-navigation-tabs d-flex flex-grow-1" hasrole="tablist"<a>inside this div hasrole="tab",aria-controlsandaria-selectedin current stateScreen.Recording.2025-05-02.at.12.38.56.mov