Merge branch 'develop' into issue-#2923

.eslintrc

@@ -14,7 +14,8 @@
     "import/named": 0,
     "import/namespace": 0,
     "import/no-unresolved": 0,
-    "import/no-named-as-default": 2,
+    "import/no-named-as-default": 0,
+    "import/no-named-as-default-member": 0,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "indent": 0,
     "no-console": 0,

.github/workflows/deploy-staging.yml

@@ -19,16 +19,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
       - name: Login to Docker Hub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: .
           file: ./Dockerfile

.github/workflows/deploy.yml

@@ -19,20 +19,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: release
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
         with:
           platforms: linux/amd64,linux/arm64
       - name: Login to Docker Hub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: .
           file: ./Dockerfile

.storybook/main.js

@@ -4,7 +4,8 @@ const config = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
     name: '@storybook/react-webpack5',

Dockerfile

@@ -1,12 +1,12 @@
-FROM node:16.14.2 as base
+FROM node:16.14.2 AS base
 ENV APP_HOME=/usr/src/app \
   TERM=xterm
 RUN mkdir -p $APP_HOME
 WORKDIR $APP_HOME
 EXPOSE 8000
 EXPOSE 8002
 
-FROM base as development
+FROM base AS development
 ENV NODE_ENV development
 COPY package.json package-lock.json ./
 RUN npm install
@@ -18,11 +18,11 @@ COPY translations/locales ./translations/locales
 COPY public ./public
 CMD ["npm", "start"]
 
-FROM development as build
+FROM development AS build
 ENV NODE_ENV production
 RUN npm run build
 
-FROM base as production
+FROM base AS production
 ENV NODE_ENV=production
 COPY package.json package-lock.json index.js ./
 RUN npm install --production

README.md

@@ -22,16 +22,9 @@ Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn mo
 If you have found a bug in the p5.js Web Editor, you can file it under the ["issues" tab](https://github.com/processing/p5.js-web-editor/issues). You can also request new features here. A set of templates for reporting issues and requesting features are provided to assist you (and us!). The p5.js Editor is maintained mostly by volunteers, so we thank you for your patience as we try to address your issues as soon as we can. Please post bugs and feature requests in the correct repository if you can:
 
 * p5.js library: [https://github.com/processing/p5.js/issues](https://github.com/processing/p5.js/issues)
-* p5.accessibility: [https://github.com/processing/p5.accessibility/issues](https://github.com/processing/p5.accessibility/issues)
-* p5.sound: [https://github.com/processing/p5.js-sound/issues](https://github.com/processing/p5.js-sound/issues)
 * p5.js website: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues)
 
 
-### How Do I Know My Issue or Pull Request is Getting Reviewed?
-
-To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
-
-
 ## References for Contributing to the p5.js Web Editor
 
 [Code of Conduct](https://editor.p5js.org/code-of-conduct)

client/common/useKeyDownHandlers.js

@@ -33,7 +33,14 @@ export default function useKeyDownHandlers(keyHandlers) {
     const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     const isCtrl = isMac ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
-      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+      handlers.current[
+        `ctrl-shift-${
+          /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
+        }`
+      ]?.(e);
+    } else if (isCtrl && e.altKey && e.code === 'KeyN') {
+      // specifically for creating a new file
+      handlers.current[`ctrl-alt-n`]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }

client/components/Dropdown/DropdownMenu.jsx

@@ -38,7 +38,7 @@ const DropdownMenu = forwardRef(
     };
 
     return (
-      <div ref={anchorRef} className={className}>
+      <div ref={anchorRef} className={className} aria-haspopup="menu">
         <button
           className={classes.button}
           aria-label={ariaLabel}
@@ -51,6 +51,7 @@ const DropdownMenu = forwardRef(
         </button>
         {isOpen && (
           <DropdownWrapper
+            role="menu"
             className={classes.list}
             align={align}
             onMouseUp={() => {

client/components/Dropdown/MenuItem.jsx

@@ -10,7 +10,7 @@ function MenuItem({ hideIf, ...rest }) {
   }
 
   return (
-    <li>
+    <li role="menuitem">
       <ButtonOrLink {...rest} />
     </li>
   );

client/components/Nav/NavBar.jsx

@@ -69,11 +69,11 @@ function NavBar({ children, className }) {
   return (
     <NavBarContext.Provider value={contextValue}>
       <header>
-        <nav className={className} ref={nodeRef}>
+        <div className={className} ref={nodeRef}>
           <MenuOpenContext.Provider value={dropdownOpen}>
             {children}
           </MenuOpenContext.Provider>
-        </nav>
+        </div>
       </header>
     </NavBarContext.Provider>
   );

client/components/Nav/NavDropdownMenu.jsx

@@ -24,15 +24,20 @@ function NavDropdownMenu({ id, title, children }) {
 
   return (
     <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
-      <button {...handlers}>
+      <button
+        {...handlers}
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+      >
         <span className="nav__item-header">{title}</span>
         <TriangleIcon
           className="nav__item-header-triangle"
           focusable="false"
           aria-hidden="true"
         />
       </button>
-      <ul className="nav__dropdown">
+      <ul className="nav__dropdown" role="menu">
         <ParentMenuContext.Provider value={id}>
           {children}
         </ParentMenuContext.Provider>

client/components/Nav/NavMenuItem.jsx

@@ -19,7 +19,7 @@ function NavMenuItem({ hideIf, className, ...rest }) {
 
   return (
     <li className={className}>
-      <ButtonOrLink {...rest} {...handlers} />
+      <ButtonOrLink {...rest} {...handlers} role="menuitem" />
     </li>
   );
 }

client/components/PreviewNav.jsx

@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
     <nav className="nav preview-nav">
       <div className="nav__items-left">
         <div className="nav__item-logo">
-          <LogoIcon
-            role="img"
-            aria-label={t('Common.p5logoARIA')}
-            focusable="false"
-            className="svg__logo"
-          />
+          <Link to={`/${owner.username}/sketches`}>
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </Link>
         </div>
         <Link
           className="nav__item"

client/components/RootPage.jsx

@@ -14,6 +14,11 @@ const RootPage = styled.div`
     height: 100%;
     overflow: hidden;
   }
+  @media print {
+    @page {
+      page-orientation: landscape;
+    }
+  }
 `;
 
 export default RootPage;

client/components/SkipLink.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const SkipLink = ({ targetId, text }) => {
+  const [focus, setFocus] = useState(false);
+  const { t } = useTranslation();
+  const handleFocus = () => {
+    setFocus(true);
+  };
+
+  const handleBlur = () => {
+    setFocus(false);
+  };
+  const linkClasses = classNames('skip_link', { focus });
+
+  return (
+    <a
+      href={`#${targetId}`}
+      className={linkClasses}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {t(`SkipLink.${text}`)}
+    </a>
+  );
+};
+
+SkipLink.propTypes = {
+  targetId: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+export default SkipLink;

client/constants.js

@@ -52,13 +52,9 @@ export const SET_BLOB_URL = 'SET_BLOB_URL';
 export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
-export const CONSOLE_EVENT = 'CONSOLE_EVENT';
-export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
-export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
-export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
 export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
@@ -140,3 +136,6 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 
 export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT';
+
+export const CONSOLE_EVENT = 'CONSOLE_EVENT';
+export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';

client/index.integration.test.jsx

@@ -73,15 +73,15 @@ describe('index.jsx integration', () => {
   });
 
   it('navbar items and the dropdowns in the navbar exist', () => {
-    const navigation = screen.getByRole('navigation');
+    const navigation = screen.getByRole('menubar');
     expect(navigation).toBeInTheDocument();
 
-    const fileButton = within(navigation).getByRole('button', {
+    const fileButton = within(navigation).getByRole('menuitem', {
       name: /^file$/i
     });
     expect(fileButton).toBeInTheDocument();
 
-    const newFileButton = within(navigation).getByRole('button', {
+    const newFileButton = within(navigation).getByRole('menuitem', {
       name: /^new$/i
     });
     expect(newFileButton).toBeInTheDocument();
@@ -91,17 +91,17 @@ describe('index.jsx integration', () => {
     // const exampleFileButton = within(navigation).getByRole('link', {name: /^examples$/i});
     // expect(exampleFileButton).toBeInTheDocument();
 
-    const editButton = within(navigation).getByRole('button', {
+    const editButton = within(navigation).getByRole('menuitem', {
       name: /^edit$/i
     });
     expect(editButton).toBeInTheDocument();
 
-    const sketchButton = within(navigation).getByRole('button', {
+    const sketchButton = within(navigation).getByRole('menuitem', {
       name: /^sketch$/i
     });
     expect(sketchButton).toBeInTheDocument();
 
-    const helpButton = within(navigation).getByRole('button', {
+    const helpButton = within(navigation).getByRole('menuitem', {
       name: /^help$/i
     });
     expect(helpButton).toBeInTheDocument();

client/index.jsx

@@ -9,6 +9,7 @@ import Routing from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
 import './i18n';
+import SkipLink from './components/SkipLink';
 
 require('./styles/main.scss');
 
@@ -20,18 +21,21 @@ const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);
 
 const App = () => (
-  <Provider store={store}>
-    <ThemeProvider>
-      <Router history={browserHistory}>
-        <Routing />
-      </Router>
-    </ThemeProvider>
-  </Provider>
+  <>
+    <Router history={browserHistory}>
+      <SkipLink targetId="play-sketch" text="PlaySketch" />
+      <Routing />
+    </Router>
+  </>
 );
 
 render(
-  <Suspense fallback={<Loader />}>
-    <App />
-  </Suspense>,
+  <Provider store={store}>
+    <ThemeProvider>
+      <Suspense fallback={<Loader />}>
+        <App />
+      </Suspense>
+    </ThemeProvider>
+  </Provider>,
   document.getElementById('root')
 );