feat: merge a11y changes from sumac into teak branch (#32)

* fix: Add visible titles to image-based links
* feat: enhance accessibility by adding descriptive label to theme toggle (#29)
* feat: Header - Focus order meaning - Open Edx Demo Course (#30)
* feat: Header - Focus order meaning - Open Edx Demo Course
* refactor: unify responsive rendering using the existing Responsive component

Co-authored-by: Rahat Ali <rahat.ali@arbisoft.com>
Co-authored-by: hinakhadim <hina.khadim@arbisoft.com>

Author: 3 people

src/Header.messages.jsx

@@ -21,6 +21,11 @@ const messages = defineMessages({
     defaultMessage: 'Schools & Partners',
     description: 'Link to the schools and partners landing page',
   },
+  'header.user.theme': {
+    id: 'header.user.theme',
+    defaultMessage: 'Toggle Theme',
+    description: 'Toggle between light and dark theme',
+  },
   'header.user.menu.dashboard': {
     id: 'header.user.menu.dashboard',
     defaultMessage: 'Dashboard',

src/Logo.jsx

@@ -7,7 +7,7 @@ const Logo = ({
   alt,
   ...attributes
 }) => (
-  <a href={href} className="logo" {...attributes}>
+  <a href={href} className="logo" title={alt} {...attributes}>
     <img className="d-block" src={src} alt={alt} />
   </a>
 );

src/ThemeToggleButton.jsx

@@ -1,13 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
 import { Icon } from '@openedx/paragon';
 import { WbSunny, Nightlight } from '@openedx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './Header.messages';
 
 const themeCookie = 'indigo-toggle-dark';
 const themeCookieExpiry = 90; // days
 
-const ThemeToggleButton = () => {
+const ThemeToggleButton = ({ intl }) => {
+  const [isDarkThemeEnabled, setIsDarkThemeEnabled] = useState(false);
   const cookies = new Cookies();
   const isThemeToggleEnabled = getConfig().INDIGO_ENABLE_DARK_TOGGLE;
 
@@ -61,10 +64,12 @@ const ThemeToggleButton = () => {
     if (cookies.get(themeCookie) === 'dark') {
       document.body.classList.remove('indigo-dark-theme');
       removeDarkThemeFromiframes();
+      setIsDarkThemeEnabled(false);
       theme = 'light';
     } else {
       document.body.classList.add('indigo-dark-theme');
       addDarkThemeToIframes();
+      setIsDarkThemeEnabled(true);
       theme = 'dark';
     }
     cookies.set(themeCookie, theme, getCookieOptions(serverURL));
@@ -75,6 +80,12 @@ const ThemeToggleButton = () => {
     }
   };
 
+  const hanldeKeyUp = (event) => {
+    if (event.key === 'Enter') {
+      onToggleTheme();
+    }
+  };
+
   if (!isThemeToggleEnabled) {
     return <div />;
   }
@@ -84,13 +95,19 @@ const ThemeToggleButton = () => {
       <div className="light-theme-icon"><Icon src={WbSunny} /></div>
       <div className="toggle-switch">
         <label htmlFor="theme-toggle-checkbox" className="switch">
-          <input id="theme-toggle-checkbox" defaultChecked={cookies.get(themeCookie) === 'dark'} onChange={onToggleTheme} type="checkbox" />
+          <input id="theme-toggle-checkbox" defaultChecked={cookies.get(themeCookie) === 'dark'} onChange={onToggleTheme} onKeyUp={hanldeKeyUp} type="checkbox" title={intl.formatMessage(messages['header.user.theme'])} />
           <span className="slider round" />
+          <span id="theme-label" className="sr-only">{`Switch to ${isDarkThemeEnabled ? 'Light' : 'Dark'} Mode`}</span>
         </label>
       </div>
       <div className="dark-theme-icon"><Icon src={Nightlight} /></div>
     </div>
   );
 };
 
-export default ThemeToggleButton;
+ThemeToggleButton.propTypes = {
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ThemeToggleButton);

src/ThemeToggleButton.test.jsx

@@ -0,0 +1,52 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render, fireEvent } from '@testing-library/react';
+import { getConfig } from '@edx/frontend-platform';
+import ThemeToggleButton from './ThemeToggleButton';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
+const mockCookiesGet = jest.fn();
+const mockCookiesSet = jest.fn();
+jest.mock('universal-cookie', () => jest.fn().mockImplementation(() => ({
+  get: mockCookiesGet, // Simulate initial light mode
+  set: mockCookiesSet,
+})));
+
+describe('ThemeToggleButton', () => {
+  beforeEach(() => {
+    getConfig.mockReturnValue({
+      LMS_BASE_URL: 'https://fake.url',
+      INDIGO_ENABLE_DARK_TOGGLE: true,
+    });
+
+    // Reset body class
+    document.body.classList.remove('indigo-dark-theme');
+  });
+
+  it('calls onToggleTheme when Enter key is pressed', () => {
+    mockCookiesGet.mockReturnValue('light');
+
+    const { container } = render(
+      <IntlProvider locale="en" messages={{}}>
+        <ThemeToggleButton />
+      </IntlProvider>,
+    );
+    const checkbox = container.querySelector('#theme-toggle-checkbox');
+    checkbox.focus();
+    fireEvent.keyUp(checkbox, { key: 'Enter' });
+
+    expect(mockCookiesSet).toHaveBeenCalledWith(
+      'indigo-toggle-dark',
+      'dark',
+      expect.objectContaining({
+        domain: 'fake.url',
+        path: '/',
+        expires: expect.any(Date),
+      }),
+    );
+  });
+});

src/__snapshots__/Header.test.jsx.snap

@@ -19,6 +19,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
       <a
         className="logo"
         href="http://localhost:18000/dashboard"
+        title="edX"
       >
         <img
           alt="edX"
@@ -140,6 +141,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
       className="logo"
       href="http://localhost:18000/dashboard"
       itemType="http://schema.org/Organization"
+      title="edX"
     >
       <img
         alt="edX"
@@ -208,6 +210,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
       <a
         className="logo"
         href="http://localhost:18000/dashboard"
+        title="edX"
       >
         <img
           alt="edX"
@@ -379,6 +382,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
       className="logo"
       href="http://localhost:18000/dashboard"
       itemType="http://schema.org/Organization"
+      title="edX"
     >
       <img
         alt="edX"

src/learning-header/LearningHeader.jsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import Responsive from 'react-responsive';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -30,6 +31,13 @@ const LearningHeader = ({
     <header className="learning-header customise indigo-header-version">
       <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
       <div className="container-xl py-2 d-flex align-items-center">
+        {showUserDropdown && authenticatedUser && (
+          <Responsive maxWidth={991}>
+            <AuthenticatedUserDropdown
+              username={authenticatedUser.username}
+            />
+          </Responsive>
+        )}
         {headerLogo}
         <div className="flex-grow-1 course-title-lockup d-flex" style={{ lineHeight: 1 }}>
           <CourseInfoSlot courseOrg={courseOrg} courseNumber={courseNumber} courseTitle={courseTitle} />
@@ -46,12 +54,14 @@ const LearningHeader = ({
         </div>
         <ThemeToggleButton />
         {showUserDropdown && authenticatedUser && (
-        <>
-          <LearningHelpSlot />
-          <AuthenticatedUserDropdown
-            username={authenticatedUser.username}
-          />
-        </>
+          <>
+            <LearningHelpSlot />
+            <Responsive minWidth={992}>
+              <AuthenticatedUserDropdown
+                username={authenticatedUser.username}
+              />
+            </Responsive>
+          </>
         )}
         {showUserDropdown && !authenticatedUser && (
         <AnonymousUserMenu />

src/learning-header/LearningHeader.test.jsx

@@ -4,6 +4,16 @@ import {
 } from '../setupTest';
 import { LearningHeader as Header } from '../index';
 
+jest.mock('react-responsive', () => ({
+  __esModule: true,
+  default: ({ minWidth, maxWidth, children }) => {
+    const screenWidth = 1200; // Simulate desktop
+    const matchesMin = minWidth !== undefined ? screenWidth >= minWidth : true;
+    const matchesMax = maxWidth !== undefined ? screenWidth <= maxWidth : true;
+    return matchesMin && matchesMax ? children : null;
+  },
+}));
+
 describe('Header', () => {
   beforeAll(async () => {
     // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.