Merge branch 'develop' into pr05/migrate_routes_folder

Author: khanniie

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,3 +8,4 @@ I have verified that this pull request:
 * [ ] has no test errors (`npm run test`)
 * [ ] is from a uniquely-named feature branch and is up to date with the  `develop` branch.
 * [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`
+* [ ] meets the standards outlined in the [accessibility guidelines](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/accessibility.md)

client/index.jsx

@@ -20,21 +20,25 @@ const initialState = window.__INITIAL_STATE__;
 
 const store = configureStore(initialState);
 
-// Add a banner to the page
-const banner = document.createElement('div');
-banner.id = 'processing-banner';
-document.body.appendChild(banner);
+if (
+  window.location.href.indexOf('full') === -1 &&
+  window.location.href.indexOf('embed') === -1
+) {
+  // Add a banner to the page
+  const banner = document.createElement('div');
+  banner.id = 'processing-banner';
+  document.body.appendChild(banner);
 
-const link = document.createElement('link');
-link.rel = 'stylesheet';
-link.href = 'https://foundation-donate-banner.netlify.app/static/css/main.css';
-document.head.appendChild(link);
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href =
+    'https://foundation-donate-banner.netlify.app/static/css/main.css';
+  document.head.appendChild(link);
 
-const script = document.createElement('script');
-script.src = 'https://foundation-donate-banner.netlify.app/static/js/main.js';
-document.body.appendChild(script);
+  const script = document.createElement('script');
+  script.src = 'https://foundation-donate-banner.netlify.app/static/js/main.js';
+  document.body.appendChild(script);
 
-if (window.location.href.indexOf('full') === -1) {
   const buttonScript = document.createElement('script');
   buttonScript.type = 'text/javascript';
   buttonScript.defer = true;

client/modules/IDE/components/Header/MobileNav.jsx

@@ -437,17 +437,16 @@ const MoreMenu = () => {
           <MobileMenuItem onClick={() => dispatch(newFolder(rootFile.id))}>
             {t('Nav.Sketch.AddFolder')}
           </MobileMenuItem>
-          {/* TODO: Add Translations */}
-          <b>Settings</b>
+          <b>{t('MobilePreferences.Settings')}</b>
           <MobileMenuItem
             onClick={() => {
               dispatch(openPreferences());
             }}
           >
-            Preferences
+            {t('MobilePreferences.Preferences')}
           </MobileMenuItem>
           <MobileMenuItem onClick={() => setIsLanguageModalVisible(true)}>
-            Language
+            {t('MobilePreferences.Language')}
           </MobileMenuItem>
           <b>{t('Nav.Help.Title')}</b>
           <MobileMenuItem onClick={() => dispatch(showKeyboardShortcutModal())}>

client/modules/IDE/components/SketchList.jsx

@@ -148,7 +148,8 @@ const SketchList = ({
                   context: mobile ? 'mobile' : ''
                 })
               )}
-              {userIsOwner && renderFieldHeader('visibility', 'Visibility')}
+              {userIsOwner &&
+                renderFieldHeader('visibility', t('Visibility.Label'))}
               <th scope="col"></th>
             </tr>
           </thead>

client/modules/User/components/VisibilityDropdown.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import LockIcon from '../../../images/lock.svg';
 import EarthIcon from '../../../images/earth.svg';
 import CheckmarkIcon from '../../../images/checkmark.svg';
@@ -8,18 +9,20 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange, location }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
+  const { t } = useTranslation();
+
   const visibilityOptions = [
     {
       value: 'Public',
-      label: 'Public',
+      label: t('Visibility.Public.Label'),
       icon: <EarthIcon className="visibility-icon" />,
-      description: 'Anyone can see this sketch'
+      description: t('Visibility.Public.Description')
     },
     {
       value: 'Private',
-      label: 'Private',
+      label: t('Visibility.Private.Label'),
       icon: <LockIcon className="visibility-icon" />,
-      description: 'Only you can see this sketch'
+      description: t('Visibility.Private.Description')
     }
   ];
 

contributor_docs/accessibility.md

@@ -4,6 +4,7 @@ Here is a guide on [how to use the accessible editor](https://gist.github.com/Ma
 
 The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues.
 
+## Screen Reader and Keyboard Access
 **Code Structure**
 
 * Screen Readers are an assistive technology for vision loss that helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader-friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body)
@@ -17,4 +18,45 @@ The code for the p5.js web editor adheres to web accessibility standards. The fo
 * All `<table>`s need to have a `summary` attribute. This will ensure user is given context to what the table is. [code example](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/modules/IDE/components/SketchList.jsx#L491)
 * `ul`s and `nav`s menus need to include a title. [code example](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/components/Nav.jsx#L281)
 
-For more information on accessibility see the [teach access tutorial](https://teachaccess.github.io/tutorial/)
+
+## Color Blind and Low-Vision Accessibility
+
+To make the editor accessible to color blind and low-vision users, it is important to adhere to the [WCAG 2.2 accessibility guidelines](https://www.w3.org/TR/WCAG22/) relating to adequate color contrast and the use of color to convey information.
+
+**Contrast**
+
+* The [WCAG 2.2 accessibility guidelines](https://www.w3.org/TR/WCAG22/) include guidelines [1.4.3: Perceivable - Contrast (minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum) and [1.4.11: Perceivable - Non-text Contrast](https://www.w3.org/TR/WCAG22/#non-text-contrast). The guideline for contrast is to ensure that color blind and low-vision users are able to visually distinguish elements that are different colors from one another.
+
+* These guidelines specify the AA standard of contrast ratios between the foreground and background of different types of text, images, and UI components.
+
+    * Small text (above 14pt and below 18pt and not bold) must have a contrast ratio of at least 4.5:1
+    * [Large text](https://www.w3.org/TR/WCAG22/#dfn-large-scale) (above 18 pt regular/14 pt bold or roughly 1.2-1.5em) must have a contrast ratio of at least 3:1
+    * UI components must have a contrast ratio of at least 3:1 against all adjacent colors
+    * The color marking the state of UI components (ie active vs inactive) must have a contrast ratio of at least 3:1 relative to each other
+    * Graphics that are required for understanding content must have a contrast ratio of at least 3:1 against all adjacent colors
+    * Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
+    * Text that is part of a logo or brand name has no contrast requirement.
+
+* The [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) tool by TPGi is a downloadable app that allows you to check color contrast and see if it complies with requirements for small text, large text, and GUI elements.
+
+* It is recommended that you adhere to the codelens color palettes (light, dark, and contrast)  when contributing to the p5 editor, which define different colors for different parts of the GUI. These colors can be found in client/styles/components/abstracts/variables.scss. Many components come with color defaults that use theme-wide color styles. Some color combinations within the palettes meet foreground/background contrast requirements and others do not, so it is important to check them.
+* A p5 editor contributor [(Izzy Snyder)]([url](https://github.com/Izzy-Snyder)) created a tool to check which colors in the editor palette do and do not comply with contrast standards. You can [check out the Github Repository]([url](https://github.com/Izzy-Snyder/contrast-palette-checker)) to try it out yourself.
+
+**Use of Color**
+* The [WCAG 2.2 accessibility guidelines](https://www.w3.org/TR/WCAG22/) include [guideline 1.4.1 - perceivable: use of color](https://www.w3.org/TR/WCAG22/#use-of-color). This guideline states that “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.” 
+* Essentially, information that the user needs to be aware of such as the presence of links, the state of buttons, and the presence of errors should not be communicated through color (hue) differences alone. Additionally, the user must not be expected to correctly identify a specific color to use the site (e.g saying “errors are marked in red”).
+* This does not mean color cannot be used to convey information - that is great design practice! However, that information should also be conveyed in an additional way. 
+* Ways to convey information include: 
+    * [using text labels in addition to color](https://www.w3.org/WAI/WCAG22/Techniques/general/G14)
+    * [using additional non-color styling cues](https://www.w3.org/WAI/WCAG22/Techniques/general/G182) such as underlining or bolding text to differentiate links from surrounding text
+    * [using different fill patterns](https://www.w3.org/WAI/WCAG22/Techniques/general/G111) to differentiate GUI elements
+    *[using appropriate contrast](https://www.w3.org/WAI/WCAG22/Techniques/general/G183) (meaning differences in lightness/darkness instead of just hue) between differently colored elements. 
+* Using styling that is completely unrelated to color is often the most straightforward way to meet this guideline, compared to color contrast which requires more attention to detail on a per-component basis to implement and maintain.
+
+## Accessible web design resources
+* For more information on accessibility see the [teach access tutorial](https://teachaccess.github.io/tutorial/)
+* [WCAG 2.2 Guidelines](https://www.w3.org/WAI/WCAG22/quickref)
+* [Checklist - The A11Y Project](https://www.a11yproject.com/checklist/) - a basic accessibility checklist based on the WCAG 2.2 guidelines
+* [Resources - The A11Y Project](https://www.a11yproject.com/resources/) - resource library including articles, tools, and classes on accessible web design.
+* [Deque University](https://dequeuniversity.com/) - classes and articles on accessible design
+* [Color accessibility beyond a pass/fail by Lauren Jong](https://medium.com/san-francisco-digital-services/color-accessibility-beyond-a-pass-fail-2ea19be4b3c1) - a more nuanced case study on designing for accessibility with regard to color

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.18.1",
+  "version": "2.18.2",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",
@@ -205,7 +205,7 @@
     "@redux-devtools/log-monitor": "^4.0.2",
     "@reduxjs/toolkit": "^1.9.3",
     "async": "^3.2.3",
-    "axios": "^1.8.2",
+    "axios": "^1.12.1",
     "babel-plugin-styled-components": "^1.13.2",
     "bcryptjs": "^2.4.3",
     "blob-util": "^1.2.1",

package.json

@@ -4,7 +4,7 @@
     "target": "ES2022",
     "module": "commonjs",
     "lib": ["ES2022"],
-    "types": ["node", "jest"],
+    "types": ["node", "jest"]
   },
   "include": ["./**/*"],
   "exclude": ["../node_modules", "../client"]

server/tsconfig.json

@@ -1,14 +1,17 @@
 /**
- * generate file system safe string for a given string
+ * generate file system safe string for a given name
  * that can be used as a valid file name
  * in all operating systems
- * @param {String} string
+ * @param {String} originalName
  * @param {String} replacer (optional) character to replace invalid characters
  */
-export function generateFileSystemSafeName(string: string, replacer: string) {
+export function generateFileSystemSafeName(
+  originalName: string,
+  replacer: string
+) {
   // from here  https://serverfault.com/a/242134
   const INVALID_CHARS_REGEX = /[*/?:\\<>|"\u0000-\u001F]/g; // eslint-disable-line
-  const slug = string.replace(INVALID_CHARS_REGEX, replacer || '');
+  const slug = originalName.replace(INVALID_CHARS_REGEX, replacer || '');
 
   return slug;
 }