refactor: use buttons instead of deprecated javascript URLs (#1940)

Author: visualfanatic

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;