Improve accessibility (#1122)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Sarah <[email protected]>

Author: 3 people

src/ui/callout.tsx

@@ -40,30 +40,35 @@ const styles = {
 const icons = {
 	tip: (props: { class?: string }) => (
 		<Icon
+			aria-hidden="true"
 			path={lightBulb}
 			class={`${props.class} fill-violet-900 dark:fill-violet-300`}
 		/>
 	),
 	info: (props: { class?: string }) => (
 		<Icon
+			aria-hidden="true"
 			path={bookOpen}
 			class={`${props.class} fill-emerald-800 dark:fill-emerald-300`}
 		/>
 	),
 	advanced: (props: { class?: string }) => (
 		<Icon
+			aria-hidden="true"
 			path={puzzlePiece}
 			class={`${props.class} fill-blue-700 dark:fill-blue-300`}
 		/>
 	),
 	caution: (props: { class?: string }) => (
 		<Icon
+			aria-hidden="true"
 			path={exclamationTriangle}
 			class={`${props.class} fill-amber-500 dark:fill-amber-400`}
 		/>
 	),
 	danger: (props: { class?: string }) => (
 		<Icon
+			aria-hidden="true"
 			path={xCircle}
 			class={`${props.class} fill-red-500 dark:fill-red-400`}
 		/>

src/ui/edit-page-link.tsx

@@ -17,7 +17,7 @@ export const EditPageLink: Component = () => {
 					href={editLink()}
 					target="_blank"
 				>
-					<Icon class="mr-1 w-[16px]" path={pencilSquare} />
+					<Icon aria-hidden="true" class="mr-1 w-[16px]" path={pencilSquare} />
 					{i18n.t("contribute.edit")}
 				</a>
 			)}

src/ui/layout/main-navigation.tsx

@@ -105,6 +105,7 @@ function DirList(props: { list: Entry[]; sortAlphabeticaly?: boolean }) {
 																{child.title}
 															</span>
 															<Icon
+																aria-hidden="true"
 																path={chevronDown}
 																class="h-4 my-auto transition-transform  kb-group-closed:rotate-180"
 															/>

src/ui/quick-links.tsx

@@ -30,7 +30,11 @@ export const QuickLinks: ParentComponent<QuickLinksProps> = (props) => {
 			<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.200)),var(--quick-links-hover-bg,theme(colors.sky.200)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
 			<div class="relative overflow-hidden rounded-xl px-5 py-4">
 				<div class="flex items-center">
-					<Icon path={icons[props.icon as keyof typeof icons]} class="h-7 w-7 fill-blue-500" />
+					<Icon
+						aria-hidden="true"
+						path={icons[props.icon as keyof typeof icons]}
+						class="h-7 w-7 fill-blue-500"
+					/>
 					<div class="text-xl text-slate-900 dark:text-white capitalize no-underline pl-3">
 						<Show
 							when={isExternalURL(props.href)}