Added accesibility for default system theme to p5.js-web-editor

client/modules/About/pages/About.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 

client/modules/App/App.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
 import { showReduxDevTools } from '../../store';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
@@ -50,11 +51,13 @@ const App = ({ children }) => {
   const hide = hideCookieConsent(location.pathname);
 
   return (
-    <div className="app">
-      <CookieConsent hide={hide} />
-      {isMounted && showReduxDevTools() && <DevTools />}
-      {children}
-    </div>
+    <HelmetProvider>
+      <div className="app">
+        <CookieConsent hide={hide} />
+        {isMounted && showReduxDevTools() && <DevTools />}
+        {children}
+      </div>
+    </HelmetProvider>
   );
 };
 

client/modules/IDE/components/AddToCollectionList.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { addToCollection, removeFromCollection } from '../actions/collections';

client/modules/IDE/components/AssetList.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import AssetListRow from './AssetListRow';
 import Loader from '../../App/components/loader';

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, useMemo } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';

client/modules/IDE/components/Feedback.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import GitHubLogo from '../../../images/github.svg';
 

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -273,7 +273,10 @@ describe('<Preferences />', () => {
 
     describe('dark mode', () => {
       it('switch to light', () => {
-        subject({ theme: 'dark' });
+        const { store } = subject({ theme: 'dark' });
+
+        // Ensure the theme is actually set to dark in the Redux store
+        expect(store.getState().preferences.theme).toBe('dark');
 
         const themeRadioCurrent = screen.getByRole('radio', {
           name: /dark theme on/i

client/modules/IDE/components/Preferences/index.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useRef, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useDispatch, useSelector } from 'react-redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { useTranslation } from 'react-i18next';

client/modules/IDE/components/SketchList.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { bindActionCreators } from 'redux';

client/modules/IDE/pages/FullView.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import PreviewFrame from '../components/PreviewFrame';

client/modules/IDE/pages/IDEView.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useLocation, Prompt, useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import SplitPane from 'react-split-pane';
 import IDEKeyHandlers from '../components/IDEKeyHandlers';
 import Sidebar from '../components/Sidebar';

client/modules/Legal/pages/Legal.jsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import RouterTab from '../../../common/RouterTab';

client/modules/User/components/Collection.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import * as CollectionsActions from '../../IDE/actions/collections';

client/modules/User/components/CollectionCreate.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 

client/modules/User/pages/AccountView.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import { parse } from 'query-string';

client/modules/User/pages/EmailVerificationView.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useLocation, useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';

client/modules/User/pages/LoginView.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import LoginForm from '../components/LoginForm';
 import SocialAuthButton from '../components/SocialAuthButton';

client/modules/User/pages/NewPasswordView.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import NewPasswordForm from '../components/NewPasswordForm';

client/modules/User/pages/ResetPasswordView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import ResetPasswordForm from '../components/ResetPasswordForm';
 import RootPage from '../../../components/RootPage';

client/modules/User/pages/SignupView.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useTranslation, Trans } from 'react-i18next';
 import SignupForm from '../components/SignupForm';
 import SocialAuthButton from '../components/SocialAuthButton';

client/test-utils.js

@@ -20,6 +20,7 @@ import { createMemoryHistory } from 'history';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { Context as ResponsiveContext } from 'react-responsive';
+import { HelmetProvider } from 'react-helmet-async';
 
 import i18n from './i18n-test';
 import ThemeProvider from './modules/App/components/ThemeProvider';
@@ -55,13 +56,15 @@ ResponsiveProvider.defaultProps = {
 
 const Providers = ({ children, ...options }) => (
   // eslint-disable-next-line react/jsx-filename-extension
-  <StyledThemeProvider theme={{ ...theme[Theme.light] }}>
-    <I18nextProvider i18n={i18n}>
-      <ResponsiveProvider {...options}>
-        <Router history={history}>{children}</Router>
-      </ResponsiveProvider>
-    </I18nextProvider>
-  </StyledThemeProvider>
+  <HelmetProvider>
+    <StyledThemeProvider theme={{ ...theme[Theme.light] }}>
+      <I18nextProvider i18n={i18n}>
+        <ResponsiveProvider {...options}>
+          <Router history={history}>{children}</Router>
+        </ResponsiveProvider>
+      </I18nextProvider>
+    </StyledThemeProvider>
+  </HelmetProvider>
 );
 
 Providers.propTypes = {
@@ -98,15 +101,17 @@ function reduxRender(
 ) {
   function Wrapper({ children }) {
     return (
-      <I18nextProvider i18n={i18n}>
-        <Provider store={store}>
-          <ThemeProvider>
-            <ResponsiveProvider {...renderOptions}>
-              <Router history={history}>{children}</Router>
-            </ResponsiveProvider>
-          </ThemeProvider>
-        </Provider>
-      </I18nextProvider>
+      <HelmetProvider>
+        <I18nextProvider i18n={i18n}>
+          <Provider store={store}>
+            <ThemeProvider>
+              <ResponsiveProvider {...renderOptions}>
+                <Router history={history}>{children}</Router>
+              </ResponsiveProvider>
+            </ThemeProvider>
+          </Provider>
+        </I18nextProvider>
+      </HelmetProvider>
     );
   }