style editor-accessibility

client/modules/IDE/components/EditorAccessibility.js

@@ -6,18 +6,24 @@ class EditorAccessibility extends React.Component {
   }
   render() {
     let messages = [];
-    for (let i = 0; i < this.props.lintMessages.length; i++) {
+    if (this.props.lintMessages.length > 0) {
+      for (let i = 0; i < this.props.lintMessages.length; i++) {
+        messages.push(
+          <li>
+            {this.props.lintMessages[i].severity} in line
+            {this.props.lintMessages[i].line} :
+            {this.props.lintMessages[i].message}
+          </li>
+        );
+      }
+    } else {
       messages.push(
-        <li>
+        <p tabIndex="0"> There are no lint messages </p>
-          {this.props.lintMessages[i].severity} in line
-          {this.props.lintMessages[i].line} :
-          {this.props.lintMessages[i].message}
-        </li>
       );
     }
     return (
-      <div>
+      <div className="editor-accessibility">
-        <p className="editor-linenumber" aria-live="assertive" id="editor-linenumber">line - {this.props.lineNo}</p>
+        <p className="editor-linenumber" aria-live="polite" id="editor-linenumber"> {this.props.lineNo} </p>
         <ul className="editor-lintmessages" id="editor-lintmessages" title="lint messages">
           {messages}
         </ul>
@@ -28,7 +34,7 @@ class EditorAccessibility extends React.Component {
 
 EditorAccessibility.propTypes = {
   lintMessages: PropTypes.array.isRequired,
-  lineNo: PropTypes.number.isRequired,
+  lineNo: PropTypes.string.isRequired,
 };
 
 export default EditorAccessibility;

client/modules/IDE/pages/IDEView.js

@@ -106,10 +106,6 @@ class IDEView extends React.Component {
             updateFileName={this.props.updateFileName}
           />
           <div className="editor-console-container">
-            <EditorAccessibility
-              lintMessages={this.props.editorAccessibility.lintMessages}
-              lineNo={this.props.editorAccessibility.lineNo}
-            />
             <Editor
               lintWarning={this.props.preferences.lintWarning}
               lintMessages={this.props.editorAccessibility.lintMessages}
@@ -123,6 +119,10 @@ class IDEView extends React.Component {
               isTabIndent={this.props.preferences.isTabIndent}
               files={this.props.files}
             />
+            <EditorAccessibility
+              lintMessages={this.props.editorAccessibility.lintMessages}
+              lineNo={this.props.editorAccessibility.lineNo}
+            />
             <Console
               consoleEvent={this.props.ide.consoleEvent}
               isPlaying={this.props.ide.isPlaying}
@@ -194,7 +194,7 @@ IDEView.propTypes = {
   openPreferences: PropTypes.func.isRequired,
   editorAccessibility: PropTypes.shape({
     lintMessages: PropTypes.array.isRequired,
-    lineNo: PropTypes.number.isRequired
+    lineNo: PropTypes.string.isRequired
   }).isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,

client/modules/IDE/reducers/editorAccessibility.js

@@ -1,7 +1,7 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  lineNo: 0,
+  lineNo: 'line',
   lintMessages: []
 };
 
@@ -15,7 +15,7 @@ const editorAccessibility = (state = initialState, action) => {
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });
     case ActionTypes.UPDATE_LINENUMBER:
-      return Object.assign({}, state, { lineNo: action.lineNo });
+      return Object.assign({}, state, { lineNo: `line ${action.lineNo}` });
     default:
       return state;
   }

client/styles/layout/_ide.scss

@@ -27,6 +27,10 @@
   position: absolute;
 }
 
+.editor-accessibility {
+  @extend %hidden-element;
+}
+
 .preview-frame {
 	flex: 1 0 0px;
   min-height: 100%;