feat: improve accessibility

ocwebutils · Jul 22, 2023 · 1cadee8 · 1cadee8
1 parent dfb2372
commit 1cadee8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/packages/client/src/components/form/formSelection.vue b/packages/client/src/components/form/formSelection.vue
@@ -3,7 +3,7 @@
 		<div class="w-full relative inline-block dark:text-white text-black" :class="!supportedOCVersions ? '' : 'sm:mr-3 md:mr-3'">
 			<div class="flex flex-row">
 				<div class="form-control w-full">
-					<label class="label">
+					<label for="cpu_model" class="label">
 						<span class="label-text">CPU</span>
 					</label>
 					<select
@@ -23,7 +23,7 @@
 		</div>
 		<div class="relative inline-block dark:text-white text-black w-full" v-if="supportedOCVersions">
 			<div class="form-control">
-				<label class="label">
+				<label for="oc_version" class="label">
 					<span class="label-text">OC Version</span>
 				</label>
 				<select id="oc_version" class="select select-bordered dark:bg-darkgray-800" v-model="selectedOCVersion">

diff --git a/packages/client/src/components/result/schemaError.vue b/packages/client/src/components/result/schemaError.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="collapse collapse-arrow border border-base-300 bg-base-100 dark:bg-darkgray-800 rounded-box mb-4 ml-2 mr-3">
-		<input type="checkbox" />
+		<input type="checkbox" aria-label="Expand the content" />
 		<div class="collapse-title text-base font-medium">
 			<font-awesome-icon class="mr-2" :icon="getIcon(schemaError.ruleSet.type).icon" :style="getIcon(schemaError.ruleSet.type).style" />
 			<span>{{ displayNormalizedName(schemaError, "schema") }} </span>

diff --git a/packages/client/src/components/result/valueError.vue b/packages/client/src/components/result/valueError.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="collapse collapse-arrow border border-base-300 bg-base-100 dark:bg-darkgray-800 rounded-box mb-4 ml-2 mr-3">
-		<input type="checkbox" />
+		<input type="checkbox" aria-label="Expand the content" />
 		<div class="collapse-title text-base font-medium">
 			<font-awesome-icon class="mr-2" :icon="getIcon(ruleOutput.ruleSet.type).icon" :style="getIcon(ruleOutput.ruleSet.type).style" />
 			<span>{{ displayNormalizedName(ruleOutput, "rule") }} {{ replaceBoolean(ruleOutput.actualValue) }}</span>

diff --git a/packages/client/src/pages/results/[id].vue b/packages/client/src/pages/results/[id].vue
@@ -3,11 +3,11 @@
 		<div class="px-8 py-6 mt-4 text-left dark:bg-darkgray-700 bg-white shadow-lg rounded-xl w-full">
 			<div class="text-center">
 				<div class="float-right space-x-1">
-					<button class="btn btn-sm btn-circle btn-ghost font-medium text-lg hover:text-blue-500 transition-colors">
-						<a href="#" @click.prevent="copyURL"><font-awesome-icon icon="fa-solid fa-copy" /></a>
+					<button class="btn btn-sm btn-circle btn-ghost font-medium text-lg hover:text-blue-500 transition-colors" aria-label="Copy URL to Clipboard">
+						<a href="#" @click.prevent="copyURL" aria-label="Copy URL to Clipboard"><font-awesome-icon icon="fa-solid fa-copy" /></a>
 					</button>
-					<button class="btn btn-sm btn-circle btn-ghost font-medium text-lg hover:text-blue-500 transition-colors">
-						<a href="#" @click.prevent="downloadCsv"><font-awesome-icon icon="fa-solid fa-download" /></a>
+					<button class="btn btn-sm btn-circle btn-ghost font-medium text-lg hover:text-blue-500 transition-colors" aria-label="Download result as CSV">
+						<a href="#" @click.prevent="downloadCsv" aria-label="Download result as CSV"><font-awesome-icon icon="fa-solid fa-download" /></a>
 					</button>
 				</div>
 				<div class="flex flex-col text-left">
@@ -18,11 +18,11 @@
 						<span
 							>{{ result.metadata.cpuCodename.split("_")[0].charAt(0).toUpperCase() + result.metadata.cpuCodename.split("_")[0].slice(1) }} -
 						</span>
-						<span class="text-blue-500">{{ result.metadata.cpuName.replace(/\[|\]/g, "") }}</span>
+						<span class="text-blue-600">{{ result.metadata.cpuName.replace(/\[|\]/g, "") }}</span>
 						• OpenCore
 						<a
 							:href="`https://github.com/acidanthera/OpenCorePkg/releases/tag/${result.metadata.ocVersion}`"
-							class="text-blue-500 hover:text-blue-600 transition-colors link-underline hover:link-underline"
+							class="text-blue-600 hover:text-blue-700 transition-colors link-underline hover:link-underline"
 							>v{{ result.metadata.ocVersion }} <font-awesome-icon icon="fa-solid fa-arrow-up-right-from-square" size="xs" /> </a
 					></span>
 					<p class="font-medium text-sm">Note: This validation doesn't guarantee working config if everything is shown as correct</p>