Add tooltips and alt attributes to Header and Home components

PandeCode · Mar 3, 2023 · c047556 · c047556
1 parent d8173fa
commit c047556
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -93,7 +93,7 @@ export default function HeaderSimple({ links }: HeaderSimpleProps) {
 	return (
 		<Header height={60} style={{ position: "absolute", top: 0, left: 0 }}>
 			<Container className={classes.header}>
-				<img width={32} height={32} src="https://pandecode.github.io/anode/favicon-32x32.png" />
+				<img width={32} height={32} alt="Anode" src="https://pandecode.github.io/anode/favicon-32x32.png" />
 				<Group spacing={5} className={classes.links}>
 					{links.map((link) => (
 						<a
@@ -143,6 +143,7 @@ export default function HeaderSimple({ links }: HeaderSimpleProps) {
 				<Menu opened={opened}>
 					<Menu.Target>
 						<Burger
+							title="Menu"
 							opened={opened}
 							onClick={toggle}
 							className={classes.burger}

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -6,6 +6,7 @@ import {
 	Popover,
 	Text,
 	TextInput,
+	Tooltip,
 } from "@mantine/core";
 import {
 	IconArrowLeft,
@@ -133,22 +134,25 @@ export default function Home({ }: HomeProps) {
 								}}
 							>
 								<Flex gap={"md"}>
-									<ActionIcon
-										onClick={() => {
-											setType("ANIME");
-											setTypeChooserOpen(false);
-										}}
-									>
-										<IconDeviceTv />{" "}
-									</ActionIcon>
-									<ActionIcon
-										onClick={() => {
-											setType("MANGA");
-											setTypeChooserOpen(false);
-										}}
-									>
-										<IconBook />{" "}
-									</ActionIcon>
+									<Tooltip label="Select Type" withArrow>
+										<ActionIcon
+											title="Select Type"
+											onClick={() => {
+												setType("ANIME");
+												setTypeChooserOpen(false);
+											}}
+										>
+											<IconDeviceTv />{" "}
+										</ActionIcon>
+										<ActionIcon
+											onClick={() => {
+												setType("MANGA");
+												setTypeChooserOpen(false);
+											}}
+										>
+											<IconBook />{" "}
+										</ActionIcon>
+									</Tooltip>
 								</Flex>
 							</Popover.Dropdown>
 						</Popover>