filippodb
/
covidpass-greenpass-su-iphone-ios-android-wallet
mirror of https://github.com/covidpass-org/covidpass.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enabled focus outline for accessibility

This commit is contained in:
Jason Liu 2021-10-21 11:33:21 -04:00
parent 56fa772a8c
commit 809a5f2bf6
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Dropdown.tsx
View File

@ -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}>

12
components/Form.tsx
View File

@ -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;