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

filippovskii09 · 2025-10-23T09:03:44Z

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

openedx-webhooks · 2025-10-23T09:03:50Z

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.

openedx-webhooks · 2025-10-23T09:03:52Z

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 · 2025-10-23T09:08:35Z

Codecov Report

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

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1811      +/-   ##
==========================================
+ Coverage   90.84%   90.86%   +0.02%     
==========================================
  Files         345      348       +3     
  Lines        5800     5814      +14     
  Branches     1376     1341      -35     
==========================================
+ Hits         5269     5283      +14     
  Misses        514      514              
  Partials       17       17

☔ View full report in Codecov by Sentry.
📢 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.

itsjeyd · 2025-10-28T10:04:52Z

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.

PKulkoRaccoonGang · 2025-11-04T16:50:04Z

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

PKulkoRaccoonGang · 2025-11-04T16:52:03Z

Do we need this tests?

was deleted

PKulkoRaccoonGang · 2025-11-04T16:57:13Z

 @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";


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

was removed, no errors occurred

open-craft-grove · 2025-11-05T19:56:33Z

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

itsjeyd · 2025-11-06T12:26:15Z

Sounds good @PKulkoRaccoonGang, thanks for the update.

open-craft-grove · 2025-12-18T15:12:24Z

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

open-craft-grove · 2025-12-18T19:58:09Z

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

open-craft-grove · 2025-12-19T02:34:52Z

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

open-craft-grove · 2025-12-19T03:29:56Z

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

PKulkoRaccoonGang · 2026-02-25T13:49:05Z

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

PKulkoRaccoonGang · 2026-03-25T17:16:30Z

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

itsjeyd · 2026-04-21T07:26:20Z

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.

PKulkoRaccoonGang · 2026-05-01T08:53:58Z

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

itsjeyd · 2026-05-05T10:06:43Z

@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

PKulkoRaccoonGang · 2026-05-06T06:07:58Z

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

sarina · 2026-05-08T00:57:15Z

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.

itsjeyd · 2026-05-08T08:06:18Z

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

musaabhasan

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.

musaabhasan · 2026-05-09T18:11:03Z

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


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.

musaabhasan · 2026-05-09T18:11:03Z

      </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">


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 }).

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

PKulkoRaccoonGang 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 PKulkoRaccoonGang November 5, 2025 18:49

PKulkoRaccoonGang approved these changes Nov 6, 2025

View reviewed changes

PKulkoRaccoonGang 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

PKulkoRaccoonGang mentioned this pull request Mar 19, 2026

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

Open

PKulkoRaccoonGang 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

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!

PKulkoRaccoonGang commented Nov 4, 2025

Uh oh!

PKulkoRaccoonGang Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

filippovskii09 Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

PKulkoRaccoonGang Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

filippovskii09 Nov 5, 2025

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!

PKulkoRaccoonGang commented Feb 25, 2026

Uh oh!

PKulkoRaccoonGang 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!

PKulkoRaccoonGang commented May 1, 2026

Uh oh!

itsjeyd commented May 5, 2026

Uh oh!

PKulkoRaccoonGang 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!

musaabhasan May 9, 2026

Choose a reason for hiding this comment

Uh oh!

musaabhasan May 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

filippovskii09 commented Oct 23, 2025 •

edited

Loading

openedx-webhooks commented Oct 23, 2025 •

edited

Loading

codecov Bot commented Oct 23, 2025 •

edited

Loading

PKulkoRaccoonGang commented Mar 25, 2026 •

edited

Loading