feat: improved accessibility for Show/Hide Accordions by filippovskii09 · Pull Request #1811 · openedx/frontend-app-learning · GitHub

Note

This PR has been added to the product proposal to improve accessibility.
Product proposal

Issue

#1876

Description

This PR proposes improvements aimed at enhancing the accessibility of Accordions.

Accordion labels was marked up as headings that fall in the logical structure of the page. For example, “Getting Started” was marked up as a heading level 2.
The <ol> containing the show/hide sections should have a role of presentation.

Testing instructions

Create a new course
Go to the Course outline page
Check that <ol> has role="presentation"
Check that section title has <h2>
Use tab to navigations and Enter to open/hide accordion

2025-10-23.11.54.24.mov

Thanks for the pull request, @filippovskii09!

This repository is currently maintained by @openedx/committers-frontend-app-learning.

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 approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To 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:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

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:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

Thanks for the pull request, @filippovskii09!

This repository is currently maintained by @openedx/committers-frontend-app-learning.

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 approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To 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:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If 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 PR

Your 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:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.30%. Comparing base (f91af21) to head (accd75e).
⚠️ Report is 85 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1811      +/-   ##
==========================================
+ Coverage   90.84%   91.30%   +0.46%     
==========================================
  Files         345      344       -1     
  Lines        5800     5774      -26     
  Branches     1376     1388      +12     
==========================================
+ Hits         5269     5272       +3     
+ Misses        514      483      -31     
- Partials       17       19       +2

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Hi @filippovskii09, thank you for this contribution! Since it's a user-facing change, it will need product approval before it can be merged.

Please choose your product contribution type and follow the corresponding instructions to get the product review process started.

Thanks @itsjeyd! This PR is in draft. I plan to create a product proposal.

Do we need this tests?

was deleted

[important]: We need to verify what do we need to do with UpsellBullets.scss

was removed, no errors occurred

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

Sounds good @PKulkoRaccoonGang, thanks for the update.

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

Hi @openedx/openedx-product-managers could you please take a look at this PR? Thanks in advance!

@kblemel the sandbox is available at this link https://github.com/openedx/frontend-app-learning/pull/1811/checks?check_run_id=67752564059

Hi @PKulkoRaccoonGang and @filippovskii09 👋

Since this is supposed to be the first PR to test the new process for a11y fixes, I wanted to check in and see how it's going? It looks like the changes are still waiting on a review and thumbs-up from @kblemel, but perhaps I missed something. Let me know.

Hi @itsjeyd
Yes. If you know someone who could help with this, please let me know

@PKulkoRaccoonGang I don't, unfortunately. We don't have any a11y experts on the team at OpenCraft.

@sarina It looks like we're stuck without an a11y expert to review this PR. Do you have any suggestions on how to proceed? Maybe Axim found someone that has the necessary expertise to review a11y changes since this conversation first started?

CC @mphilbrick211

Besides Kevin, I also asked Mary Ziegler to take a look at a few PRs, but unfortunately we don’t have any feedback yet.

We're looking into some AI tooling that may help accelerate a11y reviews. We won't be making any progress on this until after the conference, early June probably at the earliest.

That's good to know, thanks for the update @sarina 👍

Thanks for pushing this forward. I left two accessibility-focused notes that are worth checking before this becomes the reference implementation for the accordion improvements. Both are small in code, but they affect the semantics exposed to assistive technologies.

Adding role="region" exposes this wrapper as a landmark/region, but it currently has no accessible name. That can add an unnamed region to the screen-reader landmark list. If this should be a navigable region, please add aria-label or aria-labelledby; otherwise I would leave the wrapper without the region role and let the embedded live content carry its own semantics.

I removed role="region" from the wrapper and left the embedded live content to provide its own semantics, since this wrapper does not currently have a meaningful accessible name.

This adds the expected DOM heading, but the title is passed into Paragon Collapsible, which renders it inside Collapsible.Trigger with role="button". In practice that can prevent the h2 from being exposed as a navigable heading, so the DOM test may pass while heading navigation still misses these sections. It would be safer to render the heading outside the trigger/button pattern, or add an accessibility test that queries the full Section by getByRole('heading', { level: 2, name: title }).

I moved the actual h2 outside of the Paragon Collapsible trigger/button pattern and left the trigger title as plain text. I also updated the test to query the rendered section with getByRole('heading', { level: 2, name: title }) so we verify the accessible heading, not just the DOM tag.

@musaabhasan thanks for your review! I responded to the comments and made corrections

Hi @musaabhasan, would you mind having another look at this PR?

Hey @musaabhasan, a friendly ping about giving this PR another look. Would you be able to fit that in some time in the coming weeks?

feat: improved accessibility for Show/Hide Accordions

8746c9c

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Oct 23, 2025

openedx-webhooks added this to Contributions Oct 23, 2025

github-project-automation Bot moved this to Needs Triage in Contributions Oct 23, 2025

filippovskii09 self-assigned this Oct 23, 2025

filippovskii09 and others added 4 commits October 23, 2025 13:18

feat: remove extra class and use heading from paragon

fbbe11d

feat: improved accessibility for Show/Hide Accordions

65610f5

fix: refactor and fix errors

6d83608

fix: remove extra jsx file

f113616

ihor-romaniuk approved these changes Oct 24, 2025

View reviewed changes

itsjeyd moved this from Needs Triage to Waiting on Author in Contributions Oct 28, 2025

itsjeyd added the product review PR requires product review before merging label Oct 28, 2025

peterkulko suggested changes Nov 4, 2025

View reviewed changes

fix: remove extra code

855d5ee

filippovskii09 added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Nov 5, 2025

filippovskii09 requested a review from peterkulko November 5, 2025 18:49

peterkulko approved these changes Nov 6, 2025

View reviewed changes

peterkulko mentioned this pull request Dec 18, 2025

[a11y]: Accessibility improvements for Learning MFE openedx/platform-roadmap#495

Open

8 tasks

itsjeyd moved this from Waiting on Author to Product Review in Contributions Dec 18, 2025

filippovskii09 marked this pull request as ready for review February 25, 2026 13:54

peterkulko mentioned this pull request Mar 19, 2026

[a11y]: Missing heading markup in Course Overview accordions impacts screen reader usability #1876

Open

peterkulko added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Mar 19, 2026

openedx deleted a comment from open-craft-grove Mar 19, 2026

sarina mentioned this pull request Mar 23, 2026

feat: improved accessibility of notification tray #1817

Open

musaabhasan reviewed May 9, 2026

View reviewed changes

itsjeyd added the waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. label May 12, 2026

fix: after review

accd75e

filippovskii09 requested a review from musaabhasan May 17, 2026 21:15

itsjeyd removed the waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. label May 20, 2026

itsjeyd mentioned this pull request Jun 30, 2026

Implement MVP of Single Responsible Person Principle openedx/wg-governance#160

Closed

               @import "courseware/course/content-tools/calculator/calculator.scss";
               @import "courseware/course/content-tools/contentTools.scss";
               @import "course-home/dates-tab/timeline/Day.scss";
+              @import "generic/upsell-bullets/UpsellBullets.scss";

                 return (
                   <div
                     id="live_tab"
+                    role="region"

                     </div>
                     <div className="col-7 ml-3 p-0 font-weight-bold text-dark-500">
-                      <span className="align-middle col-6">{title}</span>
+                      <h2 className="h4 text-dark-500 mb-0">

feat: improved accessibility for Show/Hide Accordions by filippovskii09 · Pull Request #1811 · openedx/frontend-app-learning · GitHub

feat: improved accessibility for Show/Hide Accordions - #1811

Conversation

filippovskii09 commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue

Description

Testing instructions

Uh oh!

openedx-webhooks commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

openedx-webhooks commented Oct 23, 2025

Uh oh!

codecov Bot commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

itsjeyd commented Oct 28, 2025

Uh oh!

peterkulko commented Nov 4, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

open-craft-grove commented Nov 5, 2025

Uh oh!

itsjeyd commented Nov 6, 2025

Uh oh!

open-craft-grove commented Dec 18, 2025

Uh oh!

open-craft-grove commented Dec 18, 2025

Uh oh!

open-craft-grove commented Dec 19, 2025

Uh oh!

open-craft-grove commented Dec 19, 2025

Uh oh!

peterkulko commented Feb 25, 2026

Uh oh!

peterkulko commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

itsjeyd commented Apr 21, 2026

Uh oh!

peterkulko commented May 1, 2026

Uh oh!

itsjeyd commented May 5, 2026

Uh oh!

peterkulko commented May 6, 2026

Uh oh!

sarina commented May 8, 2026

Uh oh!

itsjeyd commented May 8, 2026

Uh oh!

musaabhasan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

filippovskii09 commented May 17, 2026

Uh oh!

itsjeyd commented Jun 30, 2026

Uh oh!

itsjeyd commented Aug 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

filippovskii09 commented Oct 23, 2025 •
edited
Loading

openedx-webhooks commented Oct 23, 2025 •
edited
Loading

codecov Bot commented Oct 23, 2025 •
edited
Loading

peterkulko commented Mar 25, 2026 •
edited
Loading