refactor: use buttons instead of deprecated javascript URLs

src/components/BrowserFilter/BrowserFilter.scss

@@ -138,6 +138,7 @@
 }
 
 .remove {
+  @include buttonReset;
   display: inline-block;
   height: 14px;
   margin: 8px;

src/components/BrowserFilter/FilterRow.react.js

@@ -103,7 +103,7 @@ let FilterRow = ({
       options={constraints.map((c) => Constraints[c].name)}
       onChange={(c) => onChangeConstraint(constraintLookup[c])} />
     {compareValue(compareInfo, compareTo, onChangeCompareTo, active, parentContentId)}
-    <a role='button' href='javascript:;' className={styles.remove} onClick={onDeleteRow}><Icon name='minus-solid' width={14} height={14} fill='rgba(0,0,0,0.4)' /></a>
+    <button type='button' className={styles.remove} onClick={onDeleteRow}><Icon name='minus-solid' width={14} height={14} fill='rgba(0,0,0,0.4)' /></button>
   </div>
 );
 

src/components/Button/Button.react.js

@@ -39,15 +39,14 @@ let Button = (props) => {
     styleOverride = { width: props.width, minWidth: props.width, ...props.additionalStyles };
   }
   return (
-    <a
-      href='javascript:;'
-      role='button'
+    <button
+      type='button'
       style={styleOverride}
       className={classes.join(' ')}
       onClick={clickHandler}
       onFocus={(e) => { if (props.disabled) e.target.blur(); }} >
       <span>{props.value}</span>
-    </a>
+    </button>
   );
 }
 

src/components/Button/Button.scss

@@ -9,17 +9,15 @@
 
 .button {
   @include DosisFont;
+  @include buttonReset($bg: none, $border: 1px solid $blue, $padding: 0 16px);
   display: inline-block;
   height: 30px;
-  border: 1px solid $blue;
   line-height: 28px;
   outline: 0;
   text-decoration: none;
   text-align: center;
   border-radius: 5px;
-  cursor: pointer;
   min-width: 110px;
-  padding: 0 16px;
   font-size: 14px;
 
   color: $blue;

src/components/Calendar/Calendar.react.js

@@ -49,8 +49,8 @@ export default class Calendar extends React.Component {
   renderMonth() {
     return (
       <div className={styles.month}>
-        <a href='javascript:;' role='button' onClick={this.handlePrev.bind(this)} />
-        <a href='javascript:;' role='button' onClick={this.handleNext.bind(this)} />
+        <button type='button' onClick={this.handlePrev.bind(this)} />
+        <button type='button' onClick={this.handleNext.bind(this)} />
         <div>{getMonth(this.state.currentMonth.getMonth()) + ' ' + this.state.currentMonth.getFullYear()}</div>
       </div>
     );
@@ -86,7 +86,7 @@ export default class Calendar extends React.Component {
           new Date(Date.UTC(this.state.currentMonth.getFullYear(), this.state.currentMonth.getMonth(), i))
       );
       labels.push(
-        <a href='javascript:;' role='button' key={'day' + i} className={className} onClick={onChange}>{i}</a>
+        <button type='button' key={'day' + i} className={className} onClick={onChange}>{i}</button>
       );
     }
     let classes = [styles.days];

src/components/Calendar/Calendar.scss

@@ -17,13 +17,13 @@
 .month {
   margin-bottom: 10px;
 
-  a {
+  button {
+    @include buttonReset($border: 1px solid $blue);
     position: relative;
     display: inline-block;
     width: 14px;
     height: 14px;
     border-radius: 100%;
-    border: 1px solid $blue;
     opacity: 0.5;
     margin: 0 6px;
 
@@ -94,8 +94,8 @@
 }
 
 .days {
-  span, a {
-    @include DosisFont;
+  span, button {
+    @include buttonReset;
     display: inline-block;
     vertical-align: bottom;
     width: 26px;
@@ -122,13 +122,13 @@
     background: $darkBlue;
   }
 
-  .selected ~ a {
+  .selected ~ button {
     background: white;
   }
 }
 
 .shadeAfter {
-  .selected ~ a {
+  .selected ~ button {
     background: #efeff1;
   }
 }

src/components/CascadingView/CascadingView.react.js

@@ -20,12 +20,11 @@ export default class CascadingView extends React.Component {
 
   render() {
     let { content, className, children, style } = this.props;
-    let expander = <a
-      href='javascript:;'
-      role='button'
-      className={styles.right}>
+    let expander = <button
+      type='button'
+      className={[styles.arrow, styles.right].join(' ')}>
       <div className={[baseStyles.center, this.state.expanded ? styles.expanded : styles.collapsed].join(' ') } />
-    </a>;
+    </button>;
     let childrenContainer = this.state.expanded ? (<div className={styles.childrenContainer}>
       <div className={styles.children}>{children}</div>
     </div>) : null;

src/components/CascadingView/CascadingView.scss

@@ -27,6 +27,10 @@ $arrowColor: #343445;
   padding: 0;
 }
 
+.arrow {
+  @include buttonReset;
+}
+
 .expanded {
   @include arrow('down', 12px, 10px, $arrowColor);
   content: '';

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -74,13 +74,12 @@ export default class DataBrowserHeaderBar extends React.Component {
       elements.push(
         readonly || preventSchemaEdits ? null : (
           <div key='add' className={styles.addColumn} style={finalStyle}>
-            <a
-              href='javascript:;'
-              role='button'
+            <button
+              type='button'
               className={styles.addColumnButton}
               onClick={onAddColumn}>
               Add a new column
-            </a>
+            </button>
           </div>
         )
       );

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -33,9 +33,8 @@
 }
 
 .addColumnButton {
-  @include DosisFont;
+  @include buttonReset($bg: #343445);
   display: inline-block;
-  background: #343445;
   height: 20px;
   width: 130px;
   text-align: center;

src/components/Dropdown/Dropdown.react.js

@@ -68,7 +68,7 @@ export default class Dropdown extends React.Component {
         <SliderWrap direction={Directions.DOWN} expanded={true}>
           <div style={{ width }} className={styles.menu}>
             {React.Children.map(this.props.children, c => (
-              <a href='javascript:;' onClick={this.select.bind(this, c.props.value)}>{c}</a>
+              <button type='button' onClick={this.select.bind(this, c.props.value)}>{c}</button>
             ))}
           </div>
         </SliderWrap>

src/components/Dropdown/Dropdown.scss

@@ -28,6 +28,12 @@
   background: white;
   overflow: auto;
 
+  button {
+    @include buttonReset;
+    display: block;
+    width: 100%;
+  }
+
   .option {
     color: $blue;
     border-bottom: 1px solid $borderGrey;

src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js

@@ -278,13 +278,14 @@ export default class ExplorerQueryComposer extends React.Component {
     let deleteButton = null;
     if (!this.props.isTimeSeries || index !== 0 ) {
       deleteButton = (
-        <a
-          href='javascript:;'
-          role='button'
-          className={styles.del}
-          onClick={this.removeAdditionalQuery.bind(this, 'aggregates', index)}>
-          &times;
-        </a>
+        <div className={styles.delWrapper}>
+          <button
+            type='button'
+            className={styles.del}
+            onClick={this.removeAdditionalQuery.bind(this, 'aggregates', index)}>
+            &times;
+          </button>
+        </div>
       );
     }
 
@@ -340,13 +341,14 @@ export default class ExplorerQueryComposer extends React.Component {
     let specialGroup = this.props.isTimeSeries && index === 0;
     if (!specialGroup) {
       deleteButton = (
-        <a
-          href='javascript:;'
-          role='button'
-          className={styles.del}
-          onClick={this.removeAdditionalQuery.bind(this, 'groups', index)}>
-          &times;
-        </a>
+        <div className={styles.delWrapper}>
+          <button
+            type='button'
+            className={styles.del}
+            onClick={this.removeAdditionalQuery.bind(this, 'groups', index)}>
+            &times;
+          </button>
+        </div>
       );
     }
 
@@ -519,14 +521,15 @@ export default class ExplorerQueryComposer extends React.Component {
 
         {constraintView}
 
-        <a
-          href='javascript:;'
-          role='button'
-          className={styles.del}
-          onClick={this.removeAdditionalQuery.bind(this, 'filters', index)}>
-          &times;
-        </a>
+        <div className={styles.delWrapper}>
+          <button
+            type='button'
+            className={styles.del}
+            onClick={this.removeAdditionalQuery.bind(this, 'filters', index)}>
+            &times;
+          </button>
         </div>
+      </div>
     );
   }
 
@@ -563,13 +566,14 @@ export default class ExplorerQueryComposer extends React.Component {
             color='blue'
             width='100%' />
 
-          <a
-            href='javascript:;'
-            role='button'
-            className={styles.del}
-            onClick={this.removeAdditionalQuery.bind(this, 'orders', index)}>
-            &times;
-          </a>
+          <div className={styles.delWrapper}>
+            <button
+              type='button'
+              className={styles.del}
+              onClick={this.removeAdditionalQuery.bind(this, 'orders', index)}>
+              &times;
+            </button>
+          </div>
         </div>
       </div>
     );
@@ -613,33 +617,38 @@ export default class ExplorerQueryComposer extends React.Component {
             value={this.state.newName}
             onChange={this.handleNameChange.bind(this)}
             placeholder={'Give your query a name'} />
-          <a
-            href='javascript:;'
-            role='button'
-            className={styles.headerButton}
-            onClick={this.handleSave.bind(this)}>
-            { this.state.isSaved ? 'Rename' : 'Save' }
-          </a>
-          <a
-            href='javascript:;'
-            role='button'
-            className={[styles.headerButton, styles.secondaryColor].join(' ')}
-            onClick={this.toggleEditing.bind(this)}>
-            Cancel
-          </a>
+          <div className={styles.headerButtonCell}>
+            <button
+              type='button'
+              className={styles.headerButton}
+              onClick={this.handleSave.bind(this)}>
+              { this.state.isSaved ? 'Rename' : 'Save' }
+            </button>
+          </div>
+          <div className={styles.headerButtonCell}>
+            <button
+              type='button'
+              className={[styles.headerButton, styles.secondaryColor].join(' ')}
+              onClick={this.toggleEditing.bind(this)}>
+              Cancel
+            </button>
+          </div>
         </div>
       );
     } else {
       headerView = (
         <div className={[baseStyles.center, styles.headerView].join(' ')}>
           <h3 className={styles.headerLabel}>{ this.state.name || 'Build a custom query' }</h3>
-          { isNew ? null : <a
-            href='javascript:;'
-            role='button'
-            className={[styles.headerButton, styles.secondaryColor].join(' ')}
-            onClick={this.toggleEditing.bind(this)}>
-            { this.state.isSaved ? 'Rename' : 'Save' }
-          </a> }
+          { isNew ? null : (
+            <div className={styles.headerButtonCell}>
+              <button
+                type='button'
+                className={[styles.headerButton, styles.secondaryColor].join(' ')}
+                onClick={this.toggleEditing.bind(this)}>
+                { this.state.isSaved ? 'Rename' : 'Save' }
+              </button>
+            </div>
+          )}
         </div>
       );
     }

src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss

@@ -63,10 +63,14 @@ $placeholderColor: rgba(255, 255, 255, 0.5);
     }
   }
 
-  .headerButton {
+  .headerButtonCell {
     display: table-cell;
     width: 40px;
     padding-left: 30px;
+  }
+
+  .headerButton {
+    @include buttonReset;
     color: white;
 
     &.secondaryColor {
@@ -104,11 +108,15 @@ $placeholderColor: rgba(255, 255, 255, 0.5);
     }
   }
 
-  .del {
+  .delWrapper {
     display: table-cell;
     vertical-align: middle;
     width: 24px;
     padding-left: 10px;
+  }
+
+  .del {
+    @include buttonReset;
     color: #d8d8d8;
     font-size: 18px;
     line-height: 18px;