From f7f00a83cf770c98d408d811650d1d6248d18748 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Tue, 24 Sep 2019 12:52:01 -0700
Subject: [PATCH] span -> button in background image selector

---
 components/RandomImage.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/RandomImage.js b/components/RandomImage.js
index c053103..3b3ac66 100644
--- a/components/RandomImage.js
+++ b/components/RandomImage.js
@@ -42,12 +42,12 @@ function RandomImage(props) {
   return (
     <div className="random-image-container">
       <div className="controls">
-        <span role="button" tabIndex={0} disabled={loading} onClick={selectImage}>
+        <button disabled={loading} onClick={selectImage}>
           Use Image
-        </span>
-        <span role="button" tabIndex={0} disabled={loading} onClick={() => updateIndex(i => i + 1)}>
+        </button>
+        <button disabled={loading} onClick={() => updateIndex(i => i + 1)}>
           Try Another
-        </span>
+        </button>
       </div>
       <div className="image">{loading && <Spinner />}</div>
       {photographer && <PhotoCredit photographer={photographer} />}
@@ -68,13 +68,19 @@ function RandomImage(props) {
             margin-bottom: 4px;
           }
 
-          span {
+          button {
             opacity: ${loading ? 0.5 : 1};
             cursor: ${loading ? 'not-allowed' : 'pointer'};
             user-select: none;
+            appearance: none;
+            border: none;
+            background: none;
+            color: inherit;
+            font-size: inherit;
+            padding: 0;
           }
 
-          [role='button']:focus {
+          button:focus {
             outline: none;
             text-decoration: underline;
           }