add more roles + remove menu roles

client/modules/IDE/components/Editor.js

@@ -47,7 +47,7 @@ class Editor extends React.Component {
   _cm: CodeMirror.Editor
 
   render() {
-    return <div ref="container" className="editor-holder" tabIndex="0" title="code-editor"></div>;
+    return <div ref="container" className="editor-holder" tabIndex="0" title="code editor" role="region"></div>;
   }
 }
 

client/modules/IDE/components/Preferences.js

@@ -20,7 +20,7 @@ function Preferences(props) {
     'preference__option--selected': !props.isTabIndent
   });
   return (
-    <div className={preferencesContainerClass} tabIndex="0" title="preference-menu" id="preferences-menu">
+    <div 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}>
@@ -35,7 +35,15 @@ function Preferences(props) {
           <h6 className="preference__label">Decrease</h6>
         </button>
 
-        <input className="preference__value" aria-live="status" aria-live="polite" role="status" value={props.fontSize} onChange={props.updateFont}></input>
+        <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}>
           <Isvg src={plusUrl} alt="Increase Font Size" />
           <h6 className="preference__label">Increase</h6>
@@ -48,7 +56,15 @@ function Preferences(props) {
           <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-        <input className="preference__value" aria-live="status" aria-live="polite" role="status" value={props.indentationAmount} onChange={props.updateIndentation}></input>
+        <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}>
           <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>

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/Toolbar.js

@@ -41,7 +41,10 @@ function Toolbar(props) {
           {props.projectName}
         </span>
       </div>
-      <button className={preferencesButtonClass} onClick={props.openPreferences} role="menuitem" aria-haspopup="true" aria-owns="preferences-menu">
+      <button
+        className={preferencesButtonClass}
+        onClick={props.openPreferences}
+      >
         <Isvg src={preferencesUrl} alt="Show Preferences" />
       </button>
     </div>