feat: added the ability to close the hint using the keyboard by filippovskii09 · Pull Request #1812 · openedx/frontend-app-learning

filippovskii09 · 2025-10-23T13:59:20Z

Note

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

Description

This PR provides a mechanism to close the tooltip using the keyboard. The escape key is recommended

Testing instructions

Create new course
Go to Progress page
Place focus on tooltip content when the tooltip button is activated.
Close tooltip with Escape key
Ensure focus is trapped within the tooltip until it is close.

2025-10-23.16.57.37.mov

openedx-webhooks · 2025-10-23T13:59:26Z

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-23T14:04:14Z

Codecov Report

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

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1812      +/-   ##
==========================================
+ Coverage   90.84%   90.87%   +0.03%     
==========================================
  Files         345      348       +3     
  Lines        5800     5820      +20     
  Branches     1376     1342      -34     
==========================================
+ Hits         5269     5289      +20     
  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.

PKulkoRaccoonGang · 2025-10-23T14:21:16Z

src/course-home/live-tab/LiveTab.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';


Do we need this import?

PKulkoRaccoonGang · 2025-10-23T14:22:51Z

src/course-home/live-tab/LiveTab.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render } from '@testing-library/react';


[question]: Is it possible to use function render from file setupTests https://github.com/openedx/frontend-app-learning/blob/master/src/setupTest.js#L222 in these tests?

yes, fixed, i used render from setupTest

PKulkoRaccoonGang · 2025-10-23T14:23:42Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';


Do we need this React import?

no, removed

PKulkoRaccoonGang · 2025-10-23T14:24:16Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

@@ -0,0 +1,127 @@
+import React from 'react';


Do we need this import?

no, removed

PKulkoRaccoonGang · 2025-10-23T14:24:36Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';


[question]: Is it possible to use function render from file setupTests https://github.com/openedx/frontend-app-learning/blob/master/src/setupTest.js#L222 in these tests?

yes, fixed, i used render from setupTest

PKulkoRaccoonGang · 2025-10-23T14:24:53Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

+import { IntlProvider } from 'react-intl';
+
+import { fireEvent } from '@testing-library/dom';
+import GradeSummaryHeader from './GradeSummaryHeader';


Suggested change

import { IntlProvider } from 'react-intl';

import { fireEvent } from '@testing-library/dom';

import GradeSummaryHeader from './GradeSummaryHeader';

import { IntlProvider } from 'react-intl';

import { fireEvent } from '@testing-library/dom';

import GradeSummaryHeader from './GradeSummaryHeader';

PKulkoRaccoonGang · 2025-10-23T14:26:00Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

+      name: messages.gradeSummaryTooltipAlt.defaultMessage,
+    });
+
+    fireEvent.click(iconButton);


Please replace with use userEvent here

https://testing-library.com/docs/user-event/intro/#difference-to-fireevent

PKulkoRaccoonGang · 2025-10-23T14:26:11Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

+      expect(screen.getByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeVisible();
+    });
+
+    fireEvent.click(iconButton);


Please replace with use userEvent here

https://testing-library.com/docs/user-event/intro/#difference-to-fireevent

PKulkoRaccoonGang · 2025-10-23T14:27:51Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

+      expect(screen.getByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeInTheDocument();
+    });
+
+    fireEvent.keyDown(iconButton, { key: 'Escape', code: 'Escape' });


Please replace with use userEvent here

https://testing-library.com/docs/user-event/intro/#difference-to-fireevent

PKulkoRaccoonGang · 2025-10-23T14:30:02Z

src/course-home/live-tab/LiveTab.test.jsx

+  useSelector: jest.fn(),
+}));
+
+describe('LiveTab', () => {


Can you explain why we are adding these tests to this PR?
It looks like we are proposing accessibility improvements in this PR, but we are writing tests for the functionality of the LiveTab component.

These tests were cherry-picked along with the related changes from a previously closed PR.
The tests themselves are not directly related to the accessibility improvements.
I can separate them if needed, but for now, they ensure we don’t lose existing coverage.

Yes, but these tests seem to test functionality that is not relevant to this PR. Will we have coverage issues if we remove them?

deleted test and no problem occurred

PKulkoRaccoonGang · 2025-10-24T14:08:02Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

+import GradeSummaryHeader from './GradeSummaryHeader';
+import { useModel } from '../../../../generic/model-store';
+import messages from '../messages';
+import { initializeMockApp, render } from '../../../../setupTest';


[nit]: Please use @src alias

PKulkoRaccoonGang · 2025-10-24T14:10:51Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx

+            onClick={() => { setShowTooltip(!showTooltip); }}
+            onBlur={() => { setShowTooltip(false); }}


Suggested change

onClick={() => { setShowTooltip(!showTooltip); }}

onBlur={() => { setShowTooltip(false); }}

onClick={() => setShowTooltip(!showTooltip)}

onBlur={() => setShowTooltip(false)}

PKulkoRaccoonGang · 2025-10-24T14:12:21Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

@@ -0,0 +1,126 @@
+import { screen, waitFor } from '@testing-library/react';


try to import from setupTest.js

itsjeyd · 2025-10-28T10:11:58Z

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-10-30T12:42:59Z

@itsjeyd thanks! I plan to create a product proposal and add all of our PRs related to accessibility improvements to it. For now, the PRs will be in draft and awaiting product review

PKulkoRaccoonGang · 2025-11-04T17:01:14Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

+import { IntlProvider } from 'react-intl';
+
+import { fireEvent } from '@testing-library/dom';
+import GradeSummaryHeader from './GradeSummaryHeader';


PKulkoRaccoonGang · 2025-11-04T17:01:57Z

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

+
+  const renderComponent = (props = {}) => {
+    render(
+      <IntlProvider locale="en" messages={messages}>


Do we need this extra IntlProvider?

no, removed

open-craft-grove · 2025-11-04T18:24:00Z

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

open-craft-grove · 2025-11-05T21:02:27Z

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

open-craft-grove · 2025-11-05T21:27:51Z

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-11-06T04:32:15Z

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

itsjeyd · 2025-12-11T11:07:33Z

I plan to create a product proposal and add all of our PRs related to accessibility improvements to it. ...

Hey @PKulkoRaccoonGang, just checking in to see if you had any updates on the proposal?

open-craft-grove · 2025-12-11T14:43:41Z

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

open-craft-grove · 2025-12-22T10:18:54Z

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

vladislavkeblysh added 3 commits October 23, 2025 16:00

feat: added the ability to close the hint using the keyboard

bcd44b1

feat: refactor tests

0bda1d0

feat: refactor tests

152e9bd

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

PKulkoRaccoonGang suggested changes Oct 23, 2025

View reviewed changes

filippovskii09 added 3 commits October 24, 2025 12:03

fix: refacor and fix disccusion

3c3bca8

fix: update packages

a9e7617

fix: fix packages and remove extra test file

f00f1eb

filippovskii09 requested a review from PKulkoRaccoonGang October 24, 2025 11:03

PKulkoRaccoonGang reviewed Oct 24, 2025

View reviewed changes

fix: fix disccusion and some refactor

4e6bbcd

filippovskii09 requested a review from PKulkoRaccoonGang October 27, 2025 11:27

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

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

filippovskii09 added 2 commits November 5, 2025 22:12

fix: remove extra IntlProvider in test

3180f60

fix: fix lint error

8be39b6

filippovskii09 requested a review from PKulkoRaccoonGang November 6, 2025 06:19

itsjeyd mentioned this pull request Nov 6, 2025

feat: improved accessibility of notification tray #1817

Draft

PKulkoRaccoonGang approved these changes Nov 6, 2025

View reviewed changes

PKulkoRaccoonGang mentioned this pull request Dec 18, 2025

Accessibility improvements for Learning MFE openedx/platform-roadmap#495

Open

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

		@@ -0,0 +1,77 @@
		import React from 'react';
		import { render } from '@testing-library/react';

		@@ -0,0 +1,127 @@
		import React from 'react';
		import { render, screen, waitFor } from '@testing-library/react';

		onClick={() => { setShowTooltip(!showTooltip); }}
		onBlur={() => { setShowTooltip(false); }}

		@@ -0,0 +1,126 @@
		import { screen, waitFor } from '@testing-library/react';

Conversation

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

Uh oh!

Description

Testing instructions

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!

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!

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!

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!

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 Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

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!

itsjeyd commented Oct 28, 2025

Uh oh!

PKulkoRaccoonGang commented Oct 30, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

filippovskii09 commented Oct 23, 2025 •

edited

Loading

codecov bot commented Oct 23, 2025 •

edited

Loading

filippovskii09 Oct 24, 2025 •

edited

Loading