From b4c15e70df4ef38360489f35cc8fe6a804702dd7 Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Wed, 13 Jul 2016 15:23:48 -0400
Subject: [PATCH] add more roles + remove menu roles

---
 client/modules/IDE/components/Editor.js       |  2 +-
 client/modules/IDE/components/Preferences.js  | 22 ++++++++++++++++---
 client/modules/IDE/components/PreviewFrame.js |  2 ++
 client/modules/IDE/components/Toolbar.js      |  5 ++++-
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index 92ccd7b9..e8f24f4a 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/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>;
   }
 }
 
diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index f80ad5d0..119dd2e2 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/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>
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 56a14393..d5715b85 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/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"
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index b0f61ac2..89cfec4e 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/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>