feat: [AsPu-651] added the ability to close the hint using the keyboard

Author: PKulkoRaccoonGang

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

@@ -1,7 +1,8 @@
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { Icon, OverlayTrigger, Tooltip, IconButton } from '@openedx/paragon';
 import { Blocked, InfoOutline } from '@openedx/paragon/icons';
 import { useContextId } from '../../../../data/hooks';
 
@@ -14,6 +15,13 @@ const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
   const {
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Escape') {
+      setShowTooltip(false);
+    }
+  };
 
   return (
     <div className="row w-100 m-0 align-items-center">
@@ -27,7 +35,10 @@ const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
           </Tooltip>
         )}
       >
-        <Icon
+        <IconButton
+          onClick={() => { setShowTooltip(!showTooltip); }}
+          onBlur={() => { setShowTooltip(false); }}
+          onKeyDown={handleKeyDown}
           alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
           src={InfoOutline}
           className="mb-3"

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  render, screen, waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useSelector } from 'react-redux';
+import { IntlProvider } from 'react-intl';
+
+import GradeSummaryHeader from './GradeSummaryHeader';
+import { useModel } from '../../../../generic/model-store';
+import messages from '../messages';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+jest.mock('../../../../generic/model-store', () => ({
+  useModel: jest.fn(),
+}));
+
+describe('GradeSummaryHeader', () => {
+  beforeEach(() => {
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'test-course-id' },
+    }));
+    useModel.mockReturnValue({ gradesFeatureIsFullyLocked: false });
+  });
+
+  const renderComponent = (props = {}) => {
+    render(
+      <IntlProvider locale="en" messages={messages}>
+        <GradeSummaryHeader
+          intl={{ formatMessage: jest.fn((msg) => msg.defaultMessage) }}
+          allOfSomeAssignmentTypeIsLocked={false}
+          {...props}
+        />
+      </IntlProvider>,
+    );
+  };
+
+  it('opens and closes the tooltip when Escape is pressed', async () => {
+    renderComponent();
+
+    const iconButton = screen.getByRole('button', {
+      name: messages.gradeSummaryTooltipAlt.defaultMessage,
+    });
+
+    userEvent.click(iconButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeVisible();
+    });
+
+    userEvent.keyboard('{Escape}');
+
+    await waitFor(() => {
+      expect(screen.queryByText(messages.gradeSummaryTooltipBody.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+});