From 809a5f2bf640afc354f1c5235bfb91d893c9c424 Mon Sep 17 00:00:00 2001
From: Jason Liu <jasonisaliu@gmail.com>
Date: Thu, 21 Oct 2021 11:33:21 -0400
Subject: [PATCH] enabled focus outline for accessibility

---
 components/Dropdown.tsx |  4 ++--
 components/Form.tsx     | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index c57f25c..3962c01 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -16,7 +16,7 @@ export default function Dropdown(props: DropdownProps) {
     const { label, options } = props;
     return (
         <Menu as="div" className="relative inline-block text-left w-full">
-            <Menu.Button className="inline-flex justify-center w-full focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
+            <Menu.Button className="inline-flex justify-center w-full  bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
                 {label}
                 <svg className=" h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10" fill="currentColor" aria-hidden="true">
                     <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
@@ -32,7 +32,7 @@ export default function Dropdown(props: DropdownProps) {
                 leaveFrom="transform opacity-100 scale-100"
                 leaveTo="transform opacity-0 scale-95"
             >
-                <Menu.Items className="origin-top-left w-full absolute left-0 mt-2 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <Menu.Items className="origin-top-left w-full absolute left-0 mt-2 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 ">
                     <div className="py-1">
                         {options.map((option, i) => (
                             <Menu.Item key={i}>
diff --git a/components/Form.tsx b/components/Form.tsx
index 66063c0..974bc6b 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -554,13 +554,13 @@ function Form(): JSX.Element {
                             <button
                                 type="button"
                                 onClick={showFileDialog}
-                                className="focus:outline-none h-20 bg-green-600 hover:bg-gray-700 text-white font-semibold rounded-md">
+                                className="h-20 bg-green-600 hover:bg-gray-700 text-white font-semibold rounded-md">
                                 {t('index:openFile')}
                             </button>
                             <button
                                 type="button"
                                 onClick={isCameraOpen ? hideCameraView : showCameraView}
-                                className="focus:outline-none h-20 bg-green-600 hover:bg-gray-700 text-white font-semibold rounded-md">
+                                className="h-20 bg-green-600 hover:bg-gray-700 text-white font-semibold rounded-md">
                                 {isCameraOpen ? t('index:stopCamera') : t('index:startCamera')}
                             </button>
                             <div id="spin" className={fileLoading ? undefined : "hidden"}>
@@ -639,14 +639,14 @@ function Form(): JSX.Element {
                         </div>
 
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-5 items-center justify-items-stretch">
-                            <button disabled={saveLoading} className="focus:outline-none bg-black outline-apple rounded-md" id="download" type="submit" value='applewallet' name='action'>
+                            <button disabled={saveLoading} className=" bg-black outline-apple rounded-md" id="download" type="submit" value='applewallet' name='action'>
                                 <div className="flex justify-center">
                                     <img src="apple_wallet.svg" />
                                 </div>
                             </button>
 
                             <button id="addToGooglePay" type="button" disabled={saveLoading} value='gpay' name='action' onClick={addToGooglePay}
-                                className="focus:outline-none bg-black rounded-md">
+                                className=" bg-black rounded-md">
                                     <div className="flex justify-center">
                                 <img src="gpay_light.svg" />
                                 </div>
@@ -667,7 +667,7 @@ function Form(): JSX.Element {
                         <div id="shc-image-header" hidden><b>To Save your Vaccination Card as a photo, please click on or save the image below:</b><br />If the image below does not look correct and you are trying to save the photo, please click the Refresh button below - on some older devices, the image does not appear to draw correctly the first time, but refreshing once or twice should fix it. Sorry for the inconvenience.
                             <br />
                             <button id="renderPhoto" type="button" disabled={saveLoading || !payloadBody} value='renderPhoto' name='action' onClick={refreshPhoto}
-                                className="focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
+                                className=" bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
                                 Refresh Photo Card
                             </button>
                         </div>
@@ -728,7 +728,7 @@ function Form(): JSX.Element {
 
                         <div className="flex flex-row items-center justify-start">
                             <button id="faq-redirect" onClick={goToFAQ}
-                                className="focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
+                                className=" bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
                                 Visit our FAQ section for the answers!
                             </button>
                             &nbsp;&nbsp;&nbsp;&nbsp;