merge main

src/js/react_views/CommandView.jsx

@@ -50,7 +50,7 @@ class CommandView extends React.Component{
     ]);
 
     return (
-      <div id={this.props.id} className="reactCommandView">
+      <output id={this.props.id} className="reactCommandView">
         <p className={commandClass}>
           <span className="prompt">{'$'}</span>
           {' '}
@@ -69,7 +69,7 @@ class CommandView extends React.Component{
         <div className="commandLineWarnings">
           {this.renderFormattedWarnings()}
         </div>
-      </div>
+      </output>
     );
   }
 
@@ -104,9 +104,9 @@ class CommandView extends React.Component{
       }
     }
     return (
-      <div className={'commandLineResult'}>
+      <output className={'commandLineResult'}>
         {result}
-      </div>
+      </output>
     );
   }
 

src/js/react_views/HelperBarView.jsx

@@ -39,7 +39,8 @@ class HelperBarView extends React.Component {
           key={'helper_bar_' + index}
           onClick={item.onClick}
           target="_blank"
-          href={item.href}>
+          href={item.href}
+          title={item.title}>
           <i className={'icon-' + item.icon} />
           {' '}
         </a>
@@ -49,7 +50,8 @@ class HelperBarView extends React.Component {
       <a
         data-testid={testID}
         key={'helper_bar_' + index}
-        onClick={item.onClick}>
+        onClick={item.onClick}
+        title={item.title}>
         {item.text ? item.text :
           <i className={'icon-' + item.icon} />
         }

src/js/react_views/MainHelperBarView.jsx

@@ -56,18 +56,21 @@ class MainHelperBarView extends React.Component {
         this.setState({
           shownBar: BARS.COMMANDS
         });
-      }.bind(this)
+      }.bind(this),
+      title: 'Show commands'
     }, {
       icon: 'globe',
       onClick: function() {
         this.setState({
           shownBar: BARS.INTL
         });
-      }.bind(this)
+      }.bind(this),
+      title: 'Show available languages'
     }, {
       newPageLink: true,
       icon: 'twitter',
-      href: 'https://twitter.com/petermcottle'
+      href: 'https://twitter.com/petermcottle',
+      title: 'Follow me on Twitter'
     }];
   }
 

src/js/views/index.js

@@ -251,6 +251,11 @@ var ModalView = Backbone.View.extend({
   },
 
   show: function() {
+    Array.from(document.body.children).forEach(function(child) {
+      if (child.classList.contains('modalView')) return;
+      child.setAttribute('inert', '');
+    });
+
     this.toggleZ(true);
     // on reflow, change our class to animate. for whatever
     // reason if this is done immediately, chrome might combine
@@ -268,6 +273,12 @@ var ModalView = Backbone.View.extend({
         this.toggleZ(false);
       }
     }.bind(this), this.getAnimationTime());
+
+    
+    Array.from(document.body.children).forEach(function(child) {
+      if (child.classList.contains('modalView')) return;
+      child.removeAttribute('inert');
+    });
   },
 
   getInsideElement: function() {

src/style/main.css

@@ -493,28 +493,28 @@ div.controls div.box.flex1 div.plus {
 }
 
 /* Command Line */
-div.reactCommandView p.commandLine i {
+output.reactCommandView p.commandLine i {
   margin: 0 5px;
 }
 
 p.commandLine,
-div.commandLineResult {
+output.commandLineResult {
   opacity: 1;
   font-size: 1em;
   margin: 0px;
 }
 
 div.commandLineWarnings p,
-div.commandLineResult p {
+output.commandLineResult p {
   margin: 0px;
 }
 
-div.commandLineResult p:first-child,
+output.commandLineResult p:first-child,
 div.commandLineWarnings p:first-child {
   padding-top: 8px;
 }
 
-div.commandLineResult p:last-child,
+output.commandLineResult p:last-child,
 div.commandLineWarnings p:last-child {
   padding-bottom: 8px;
 }
@@ -536,7 +536,7 @@ p.commandLine span.icons i:first-child {
   margin-left: 5px;
 }
 
-div.reactCommandView p.commandLine span.icons i:first-child {
+output.reactCommandView p.commandLine span.icons i:first-child {
   margin-left: 4px;
   position: relative;
   left: 1px;