Merge pull request #12 from MathuraMG/accessibility

add aria tags and roles

client/components/Nav.js

@@ -3,8 +3,8 @@ import { Link } from 'react-router';
 
 function Nav(props) {
   return (
-    <nav className="nav">
-      <ul className="nav__items-left">
+    <nav className="nav" role="navigation" title="main-navigation">
+      <ul className="nav__items-left" title="project-menu">
         <li className="nav__item">
           <a
             className="nav__new"
@@ -39,7 +39,7 @@ function Nav(props) {
           </a>
         </li>
       </ul>
-      <ul className="nav__items-right">
+      <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
           {props.user.authenticated && <p>Hello, {props.user.username}!</p>}
           {!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}

client/modules/IDE/actions/preferences.js

@@ -44,7 +44,7 @@ export function decreaseIndentation() {
   };
 }
 
-export function updateIndentation() {
+export function updateIndentation(event) {
   const value = event.target.value;
   return {
     type: ActionTypes.UPDATE_INDENTATION,

client/modules/IDE/components/Editor.js

@@ -25,6 +25,7 @@ class Editor extends React.Component {
       value: this.props.file.content,
       lineNumbers: true,
       styleActiveLine: true,
+      inputStyle: 'contenteditable',
       mode: 'javascript',
       lineWrapping: true,
       gutters: ['CodeMirror-lint-markers'],
@@ -75,7 +76,7 @@ class Editor extends React.Component {
   _cm: CodeMirror.Editor
 
   render() {
-    return <div ref="container" className="editor-holder"></div>;
+    return <div ref="container" className="editor-holder" tabIndex="0" title="code editor" role="region"></div>;
   }
 }
 

client/modules/IDE/components/Preferences.js

@@ -20,45 +20,92 @@ function Preferences(props) {
     'preference__option--selected': !props.isTabIndent
   });
   return (
-    <div className={preferencesContainerClass} tabIndex="0">
+    <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
       <div className="preferences__heading">
         <h2 className="preferences__title">Preferences</h2>
-        <button className="preferences__exit-button" onClick={props.closePreferences}>
+        <button
+          className="preferences__exit-button"
+          onClick={props.closePreferences}
+          title="exit"
+        >
           <Isvg src={exitUrl} alt="Exit Preferences" />
         </button>
       </div>
 
       <div className="preference">
         <h4 className="preference__title">Text Size</h4>
-        <button className="preference__plus-button" onClick={props.decreaseFont}>
+        <button
+          className="preference__plus-button"
+          onClick={props.decreaseFont}
+          id="preference-decrease-font-size"
+        >
           <Isvg src={minusUrl} alt="Decrease Font Size" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-
-        <input className="preference__value" value={props.fontSize} onChange={props.updateFont}></input>
-        <button className="preference__minus-button" onClick={props.increaseFont}>
+        <label htmlFor="preference-decrease-font-size" className="preference__button-label">
+          Decrease Font Size
+        </label>
+        <input
+          className="preference__value"
+          aria-live="status"
+          aria-live="polite"
+          role="status"
+          value={props.fontSize}
+          onChange={props.updateFont}
+        >
+        </input>
+        <button
+          className="preference__minus-button"
+          onClick={props.increaseFont}
+          id="preference-increase-font-size"
+        >
           <Isvg src={plusUrl} alt="Increase Font Size" />
           <h6 className="preference__label">Increase</h6>
         </button>
+        <label htmlFor="preference-increase-font-size" className="preference__button-label">
+          Increase Font Size
+        </label>
       </div>
 
       <div className="preference">
         <h4 className="preference__title">Indentation Amount</h4>
-        <button className="preference__plus-button" onClick={props.decreaseIndentation}>
+        <button
+          className="preference__plus-button"
+          onClick={props.decreaseIndentation}
+          id="preference-decrease-indentation"
+        >
           <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-        <input className="preference__value" value={props.indentationAmount} onChange={props.updateIndentation}></input>
-        <button className="preference__minus-button" onClick={props.increaseIndentation}>
+        <label htmlFor="preference-decrease-indentation" className="preference__button-label">
+          Decrease Indentation Amount
+        </label>
+        <input
+          className="preference__value"
+          aria-live="status"
+          aria-live="polite"
+          role="status"
+          value={props.indentationAmount}
+          onChange={props.updateIndentation}
+        >
+        </input>
+        <button
+          className="preference__minus-button"
+          onClick={props.increaseIndentation}
+          id="preference-increase-indentation"
+        >
           <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>
         </button>
+        <label htmlFor="preference-increase-indentation" className="preference__button-label">
+          Increase Indentation Amount
+        </label>
         <div className="preference__vertical-list">
           <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
           <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
 

client/modules/IDE/components/PreviewFrame.js

@@ -83,6 +83,8 @@ class PreviewFrame extends React.Component {
     return (
       <iframe
         className="preview-frame"
+        role="region"
+        tabIndex="0"
         frameBorder="0"
         title="sketch output"
         sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"

client/modules/IDE/components/Sidebar.js

@@ -11,7 +11,7 @@ function Sidebar(props) {
   });
 
   return (
-    <section className={sidebarClass}>
+    <nav className={sidebarClass} title="file-navigation" role="navigation">
       <div className="sidebar__header">
         <h3 className="sidebar__title">Sketch Files</h3>
         <div className="sidebar__icons">
@@ -53,7 +53,7 @@ function Sidebar(props) {
           );
         })}
       </ul>
-    </section>
+    </nav>
   );
 }
 

client/modules/IDE/components/Toolbar.js

@@ -24,12 +24,18 @@ function Toolbar(props) {
   return (
     <div className="toolbar">
       <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
-      <button className={playButtonClass} onClick={props.startSketch}>
+      <button className={playButtonClass} onClick={props.startSketch} id="play-button">
         <Isvg src={playUrl} alt="Play Sketch" />
       </button>
-      <button className={stopButtonClass} onClick={props.stopSketch}>
+      <label htmlFor="play-button" className="toolbar__button-label">
+        play
+      </label>
+      <button className={stopButtonClass} onClick={props.stopSketch} id="stop-button">
         <Isvg src={stopUrl} alt="Stop Sketch" />
       </button>
+      <label htmlFor="stop-button" className="toolbar__button-label">
+        stop
+      </label>
       <div className="toolbar__project-name-container">
         <span
           className="toolbar__project-name"
@@ -48,9 +54,16 @@ function Toolbar(props) {
           }
         })()}
       </div>
-      <button className={preferencesButtonClass} onClick={props.openPreferences}>
+      <button
+        className={preferencesButtonClass}
+        onClick={props.openPreferences}
+        id="preferences-button"
+      >
         <Isvg src={preferencesUrl} alt="Show Preferences" />
       </button>
+      <label htmlFor="preferences-button" className="toolbar__button-label">
+        preferences
+      </label>
     </div>
   );
 }

client/modules/IDE/reducers/preferences.js

@@ -27,7 +27,7 @@ const preferences = (state = initialState, action) => {
       });
     case ActionTypes.UPDATE_FONTSIZE:
       return Object.assign({}, state, {
-        fontSize: action.value
+        fontSize: parseInt(action.value, 10)
       });
     case ActionTypes.INCREASE_INDENTATION:
       return Object.assign({}, state, {
@@ -39,7 +39,7 @@ const preferences = (state = initialState, action) => {
       });
     case ActionTypes.UPDATE_INDENTATION:
       return Object.assign({}, state, {
-        indentationAmount: action.value
+        indentationAmount: parseInt(action.value, 10)
       });
     case ActionTypes.INDENT_WITH_TAB:
       return Object.assign({}, state, {

client/styles/abstracts/_placeholders.scss

@@ -107,3 +107,12 @@
     color: $light-primary-text-color;
   }
 }
+
+%hidden-label {
+	position:absolute;
+	left:-10000px;
+	top:auto;
+	width:1px;
+	height:1px;
+	overflow:hidden;
+}

client/styles/components/_preferences.scss

@@ -2,7 +2,7 @@
 	position: absolute;
 	top: #{66 / $base-font-size}rem;
 	right: #{40 / $base-font-size}rem;
-	width: #{332 / $base-font-size}rem;
+	width: #{336 / $base-font-size}rem;
 	background-color: $light-button-background-color;
 	display: none;
 	padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
@@ -79,3 +79,7 @@
 		@extend %preference-option--selected;
 	}
 }
+
+.preference__button-label {
+	@extend %hidden-label
+}

client/styles/components/_toolbar.scss

@@ -55,6 +55,9 @@
 	}
 }
 
+.toolbar__button-label {
+	@extend %hidden-label
+}
 .toolbar__project-owner {
 	margin-left: #{5 / $base-font-size}rem;
 }

server/models/project.js

@@ -11,7 +11,7 @@ function draw() {
   background(220);
 }`
 
-const defaultHTML = 
+const defaultHTML =
 `<!DOCTYPE html>
 <html>
   <head>