Enable Biome rule "noSvgWithoutTitle" (#1849)

* Turn off noSvgWithoutTitle rule & see how many errors pop up in linting * Commit with .tsx files containing <svg /> elements now have <title /> tags in them (with English localization) * Fixed tabbing in some files
2026-08-25 20:50:14 -05:00 · 2024-08-25 02:10:09 -04:00
parent 97b0f65105
commit f26e040238
63 changed files with 63 additions and 3 deletions
--- a/app/components/icons/Admin.tsx
+++ b/app/components/icons/Admin.tsx
@@ -6,6 +6,7 @@ export function AdminIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Admin Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z"
--- a/app/components/icons/Alert.tsx
+++ b/app/components/icons/Alert.tsx
@@ -6,6 +6,7 @@ export function AlertIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Alert Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
--- a/app/components/icons/ArchiveBox.tsx
+++ b/app/components/icons/ArchiveBox.tsx
@@ -8,6 +8,7 @@ export function ArchiveBoxIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Archive Box Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/ArrowLeft.tsx
+++ b/app/components/icons/ArrowLeft.tsx
@@ -16,6 +16,7 @@ export function ArrowLeftIcon({
 			fill="currentColor"
 			transform="rotate(180)"
 		>
+			<title>Arrow Left Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
--- a/app/components/icons/ArrowLongLeft.tsx
+++ b/app/components/icons/ArrowLongLeft.tsx
@@ -8,6 +8,7 @@ export function ArrowLongLeftIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Arrow Long Left Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/ArrowRight.tsx
+++ b/app/components/icons/ArrowRight.tsx
@@ -15,6 +15,7 @@ export function ArrowRightIcon({
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Arrow Right Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
--- a/app/components/icons/ArrowsPointingIn.tsx
+++ b/app/components/icons/ArrowsPointingIn.tsx
@@ -8,6 +8,7 @@ export function ArrowsPointingInIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Arrows Pointing In Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Battlefy.tsx
+++ b/app/components/icons/Battlefy.tsx
@@ -11,6 +11,7 @@ export function BattlefyIcon() {
 			enableBackground="new 0 0 1152 1152"
 			xmlSpace="preserve"
 		>
+			<title>Battlefy Icon</title>
 			<path
 				display="none"
 				fill="#151B27"
--- a/app/components/icons/Beaker.tsx
+++ b/app/components/icons/Beaker.tsx
@@ -8,6 +8,7 @@ export function BeakerIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Beaker Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/BeakerFilled.tsx
+++ b/app/components/icons/BeakerFilled.tsx
@@ -6,6 +6,7 @@ export function BeakerFilledIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Beaker Filled Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z"
--- a/app/components/icons/Calendar.tsx
+++ b/app/components/icons/Calendar.tsx
@@ -15,6 +15,7 @@ export function CalendarIcon({
 			className={className}
 			style={style}
 		>
+			<title>Calendar Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z"
--- a/app/components/icons/ChartBar.tsx
+++ b/app/components/icons/ChartBar.tsx
@@ -17,6 +17,7 @@ export function ChartBarIcon({
 			className={className}
 			style={style}
 		>
+			<title>Chart Bar Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Chat.tsx
+++ b/app/components/icons/Chat.tsx
@@ -15,6 +15,7 @@ export function ChatIcon({
 			className={className}
 			style={style}
 		>
+			<title>Chat Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M4.848 2.771A49.144 49.144 0 0112 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97-1.94.284-3.916.455-5.922.505a.39.39 0 00-.266.112L8.78 21.53A.75.75 0 017.5 21v-3.955a48.842 48.842 0 01-2.652-.316c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97z"
--- a/app/components/icons/CheckIn.tsx
+++ b/app/components/icons/CheckIn.tsx
@@ -6,6 +6,7 @@ export function CheckInIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Check-In Icon</title>
 			<path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z" />
 			<path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
 		</svg>
--- a/app/components/icons/Checkmark.tsx
+++ b/app/components/icons/Checkmark.tsx
@@ -16,6 +16,7 @@ export function CheckmarkIcon({
 			data-testid={testId}
 			onClick={onClick}
 		>
+			<title>Checkmark Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
--- a/app/components/icons/Clipboard.tsx
+++ b/app/components/icons/Clipboard.tsx
@@ -8,6 +8,7 @@ export function ClipboardIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Clipboard Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Clock.tsx
+++ b/app/components/icons/Clock.tsx
@@ -6,6 +6,7 @@ export function ClockIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Clock Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
--- a/app/components/icons/Cross.tsx
+++ b/app/components/icons/Cross.tsx
@@ -6,6 +6,7 @@ export function CrossIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Cross Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
--- a/app/components/icons/Discord.tsx
+++ b/app/components/icons/Discord.tsx
@@ -8,6 +8,7 @@ export function DiscordIcon({ className }: { className?: string }) {
 			viewBox="0 0 640 512"
 			xmlns="http://www.w3.org/2000/svg"
 		>
+			<title>Discord Icon</title>
 			<path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" />
 		</svg>
 	);
--- a/app/components/icons/Download.tsx
+++ b/app/components/icons/Download.tsx
@@ -8,6 +8,7 @@ export function DownloadIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Download Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Edit.tsx
+++ b/app/components/icons/Edit.tsx
@@ -6,6 +6,7 @@ export function EditIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Edit Icon</title>
 			<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
 			<path
 				fillRule="evenodd"
--- a/app/components/icons/Error.tsx
+++ b/app/components/icons/Error.tsx
@@ -6,6 +6,7 @@ export function ErrorIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Error Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
--- a/app/components/icons/Eye.tsx
+++ b/app/components/icons/Eye.tsx
@@ -8,6 +8,7 @@ export function EyeIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Eye Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/EyeSlash.tsx
+++ b/app/components/icons/EyeSlash.tsx
@@ -8,6 +8,7 @@ export function EyeSlashIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Eye Slash Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Filter.tsx
+++ b/app/components/icons/Filter.tsx
@@ -8,6 +8,7 @@ export function FilterIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Filter Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Fire.tsx
+++ b/app/components/icons/Fire.tsx
@@ -17,6 +17,7 @@ export function FireIcon({
 			className={className}
 			style={style}
 		>
+			<title>Fire Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/GitHub.tsx
+++ b/app/components/icons/GitHub.tsx
@@ -9,6 +9,7 @@ export function GitHubIcon({ className }: { className?: string }) {
 			xmlns="http://www.w3.org/2000/svg"
 			className={className}
 		>
+			<title>GitHub Icon</title>
 			<path d="M8 0.198c-4.418 0-8 3.582-8 8 0 3.535 2.292 6.533 5.471 7.591 0.4 0.074 0.547-0.174 0.547-0.385 0-0.191-0.008-0.821-0.011-1.489-2.226 0.484-2.695-0.944-2.695-0.944-0.364-0.925-0.888-1.171-0.888-1.171-0.726-0.497 0.055-0.486 0.055-0.486 0.803 0.056 1.226 0.824 1.226 0.824 0.714 1.223 1.872 0.869 2.328 0.665 0.072-0.517 0.279-0.87 0.508-1.070-1.777-0.202-3.645-0.888-3.645-3.954 0-0.873 0.313-1.587 0.824-2.147-0.083-0.202-0.357-1.015 0.077-2.117 0 0 0.672-0.215 2.201 0.82 0.638-0.177 1.322-0.266 2.002-0.269 0.68 0.003 1.365 0.092 2.004 0.269 1.527-1.035 2.198-0.82 2.198-0.82 0.435 1.102 0.162 1.916 0.079 2.117 0.513 0.56 0.823 1.274 0.823 2.147 0 3.073-1.872 3.749-3.653 3.947 0.287 0.248 0.543 0.735 0.543 1.481 0 1.070-0.009 1.932-0.009 2.195 0 0.213 0.144 0.462 0.55 0.384 3.177-1.059 5.466-4.057 5.466-7.59 0-4.418-3.582-8-8-8z" />
 		</svg>
 	);
--- a/app/components/icons/Heart.tsx
+++ b/app/components/icons/Heart.tsx
@@ -6,6 +6,7 @@ export function HeartIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Heart Icon</title>
 			<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
 		</svg>
 	);
--- a/app/components/icons/Info.tsx
+++ b/app/components/icons/Info.tsx
@@ -6,6 +6,7 @@ export function InfoIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Info Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
--- a/app/components/icons/Link.tsx
+++ b/app/components/icons/Link.tsx
@@ -6,6 +6,7 @@ export function LinkIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Link Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M19.902 4.098a3.75 3.75 0 00-5.304 0l-4.5 4.5a3.75 3.75 0 001.035 6.037.75.75 0 01-.646 1.353 5.25 5.25 0 01-1.449-8.45l4.5-4.5a5.25 5.25 0 117.424 7.424l-1.757 1.757a.75.75 0 11-1.06-1.06l1.757-1.757a3.75 3.75 0 000-5.304zm-7.389 4.267a.75.75 0 011-.353 5.25 5.25 0 011.449 8.45l-4.5 4.5a5.25 5.25 0 11-7.424-7.424l1.757-1.757a.75.75 0 111.06 1.06l-1.757 1.757a3.75 3.75 0 105.304 5.304l4.5-4.5a3.75 3.75 0 00-1.035-6.037.75.75 0 01-.354-1z"
--- a/app/components/icons/Lock.tsx
+++ b/app/components/icons/Lock.tsx
@@ -6,6 +6,7 @@ export function LockIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Lock Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z"
--- a/app/components/icons/LogIn.tsx
+++ b/app/components/icons/LogIn.tsx
@@ -16,6 +16,7 @@ export function LogInIcon({
 			width={size}
 			height={size}
 		>
+			<title>Login Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/LogOut.tsx
+++ b/app/components/icons/LogOut.tsx
@@ -8,6 +8,7 @@ export function LogOutIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			strokeWidth={2}
 		>
+			<title>LogOut Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Map.tsx
+++ b/app/components/icons/Map.tsx
@@ -6,6 +6,7 @@ export function MapIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Map Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M8.161 2.58a1.875 1.875 0 011.678 0l4.993 2.498c.106.052.23.052.336 0l3.869-1.935A1.875 1.875 0 0121.75 4.82v12.485c0 .71-.401 1.36-1.037 1.677l-4.875 2.437a1.875 1.875 0 01-1.676 0l-4.994-2.497a.375.375 0 00-.336 0l-3.868 1.935A1.875 1.875 0 012.25 19.18V6.695c0-.71.401-1.36 1.036-1.677l4.875-2.437zM9 6a.75.75 0 01.75.75V15a.75.75 0 01-1.5 0V6.75A.75.75 0 019 6zm6.75 3a.75.75 0 00-1.5 0v8.25a.75.75 0 001.5 0V9z"
--- a/app/components/icons/Microphone.tsx
+++ b/app/components/icons/Microphone.tsx
@@ -8,6 +8,7 @@ export function MicrophoneIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Microphone Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/MicrophoneFilled.tsx
+++ b/app/components/icons/MicrophoneFilled.tsx
@@ -6,6 +6,7 @@ export function MicrophoneFilledIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Microphone Filled Icon</title>
 			<path d="M8.25 4.5a3.75 3.75 0 117.5 0v8.25a3.75 3.75 0 11-7.5 0V4.5z" />
 			<path d="M6 10.5a.75.75 0 01.75.75v1.5a5.25 5.25 0 1010.5 0v-1.5a.75.75 0 011.5 0v1.5a6.751 6.751 0 01-6 6.709v2.291h3a.75.75 0 010 1.5h-7.5a.75.75 0 010-1.5h3v-2.291a6.751 6.751 0 01-6-6.709v-1.5A.75.75 0 016 10.5z" />
 		</svg>
--- a/app/components/icons/Minus.tsx
+++ b/app/components/icons/Minus.tsx
@@ -7,6 +7,7 @@ export function MinusIcon({ className }: { className?: string }) {
 			viewBox="0 0 24 24"
 			stroke="currentColor"
 		>
+			<title>Minus Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Patreon.tsx
+++ b/app/components/icons/Patreon.tsx
@@ -9,7 +9,7 @@ export function PatreonIcon({ className }: { className?: string }) {
 			xmlns="http://www.w3.org/2000/svg"
 			className={className}
 		>
-			<title />
+			<title>Patreon Icon</title>
 			<path d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z" />
 		</svg>
 	);
--- a/app/components/icons/Pick.tsx
+++ b/app/components/icons/Pick.tsx
@@ -8,6 +8,7 @@ export function PickIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Pick Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Plus.tsx
+++ b/app/components/icons/Plus.tsx
@@ -8,6 +8,7 @@ export function PlusIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Plus Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Puzzle.tsx
+++ b/app/components/icons/Puzzle.tsx
@@ -6,6 +6,7 @@ export function PuzzleIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Puzzle Icon</title>
 			<path d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 01.878.645 49.17 49.17 0 01.376 5.452.657.657 0 01-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 00-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 01-.595 4.845.75.75 0 01-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 01-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 01-.658.643 49.118 49.118 0 01-4.708-.36.75.75 0 01-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 005.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 00.659-.663 47.703 47.703 0 00-.31-4.82.75.75 0 01.83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 00.657-.642z" />
 		</svg>
 	);
--- a/app/components/icons/Refresh.tsx
+++ b/app/components/icons/Refresh.tsx
@@ -7,6 +7,7 @@ export function RefreshIcon({ className }: { className?: string }) {
 			viewBox="0 0 24 24"
 			stroke="currentColor"
 		>
+			<title>Refresh Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/RefreshArrows.tsx
+++ b/app/components/icons/RefreshArrows.tsx
@@ -8,6 +8,7 @@ export function RefreshArrowsIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Refresh Arrows Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Scale.tsx
+++ b/app/components/icons/Scale.tsx
@@ -6,6 +6,7 @@ export function ScaleIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Scale Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M12 2.25a.75.75 0 01.75.75v.756a49.106 49.106 0 019.152 1 .75.75 0 01-.152 1.485h-1.918l2.474 10.124a.75.75 0 01-.375.84A6.723 6.723 0 0118.75 18a6.723 6.723 0 01-3.181-.795.75.75 0 01-.375-.84l2.474-10.124H12.75v13.28c1.293.076 2.534.343 3.697.776a.75.75 0 01-.262 1.453h-8.37a.75.75 0 01-.262-1.453c1.162-.433 2.404-.7 3.697-.775V6.24H6.332l2.474 10.124a.75.75 0 01-.375.84A6.723 6.723 0 015.25 18a6.723 6.723 0 01-3.181-.795.75.75 0 01-.375-.84L4.168 6.241H2.25a.75.75 0 01-.152-1.485 49.105 49.105 0 019.152-1V3a.75.75 0 01.75-.75zm4.878 13.543l1.872-7.662 1.872 7.662h-3.744zm-9.756 0L5.25 8.131l-1.872 7.662h3.744z"
--- a/app/components/icons/Search.tsx
+++ b/app/components/icons/Search.tsx
@@ -7,6 +7,7 @@ export function SearchIcon({ className }: { className?: string }) {
 			viewBox="0 0 24 24"
 			stroke="currentColor"
 		>
+			<title>Search Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Sort.tsx
+++ b/app/components/icons/Sort.tsx
@@ -8,6 +8,7 @@ export function SortIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Sort Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Speaker.tsx
+++ b/app/components/icons/Speaker.tsx
@@ -8,6 +8,7 @@ export function SpeakerIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Speaker Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/SpeakerFilled.tsx
+++ b/app/components/icons/SpeakerFilled.tsx
@@ -6,6 +6,7 @@ export function SpeakerFilledIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Speaker Filled Icon</title>
 			<path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06 8.25 8.25 0 000-11.668.75.75 0 010-1.06z" />
 			<path d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0 010-1.06z" />
 		</svg>
--- a/app/components/icons/SpeakerX.tsx
+++ b/app/components/icons/SpeakerX.tsx
@@ -8,6 +8,7 @@ export function SpeakerXIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Speaker X Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/SpeechBubble.tsx
+++ b/app/components/icons/SpeechBubble.tsx
@@ -8,6 +8,7 @@ export function SpeechBubbleIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			strokeWidth={2}
 		>
+			<title>Speech Bubble Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Star.tsx
+++ b/app/components/icons/Star.tsx
@@ -8,6 +8,7 @@ export function StarIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Star Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/StarFilled.tsx
+++ b/app/components/icons/StarFilled.tsx
@@ -6,6 +6,7 @@ export function StarFilledIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Star Filled Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
--- a/app/components/icons/Success.tsx
+++ b/app/components/icons/Success.tsx
@@ -6,6 +6,7 @@ export function SuccessIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Success Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
--- a/app/components/icons/Trash.tsx
+++ b/app/components/icons/Trash.tsx
@@ -8,6 +8,7 @@ export function TrashIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			strokeWidth={2}
 		>
+			<title>Trash Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/Twitch.tsx
+++ b/app/components/icons/Twitch.tsx
@@ -8,6 +8,7 @@ export function TwitchIcon({ className }: { className?: string }) {
 			xmlns="http://www.w3.org/2000/svg"
 			className={className}
 		>
+			<title>Twitch Icon</title>
 			<path d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z" />
 		</svg>
 	);
--- a/app/components/icons/Twitter.tsx
+++ b/app/components/icons/Twitter.tsx
@@ -9,6 +9,7 @@ export function TwitterIcon({ className }: { className?: string }) {
 			viewBox="0 0 16 16"
 			xmlns="http://www.w3.org/2000/svg"
 		>
+			<title>Twitter Icon</title>
 			<path d="M16 3.538c-0.588 0.263-1.222 0.438-1.884 0.516 0.678-0.406 1.197-1.050 1.444-1.816-0.634 0.375-1.338 0.65-2.084 0.797-0.6-0.638-1.453-1.034-2.397-1.034-1.813 0-3.281 1.469-3.281 3.281 0 0.256 0.028 0.506 0.084 0.747-2.728-0.138-5.147-1.444-6.766-3.431-0.281 0.484-0.444 1.050-0.444 1.65 0 1.138 0.578 2.144 1.459 2.731-0.538-0.016-1.044-0.166-1.488-0.409 0 0.013 0 0.028 0 0.041 0 1.591 1.131 2.919 2.634 3.219-0.275 0.075-0.566 0.116-0.866 0.116-0.212 0-0.416-0.022-0.619-0.059 0.419 1.303 1.631 2.253 3.066 2.281-1.125 0.881-2.538 1.406-4.078 1.406-0.266 0-0.525-0.016-0.784-0.047 1.456 0.934 3.181 1.475 5.034 1.475 6.037 0 9.341-5.003 9.341-9.341 0-0.144-0.003-0.284-0.009-0.425 0.641-0.459 1.197-1.038 1.637-1.697z" />
 		</svg>
 	);
--- a/app/components/icons/Undo.tsx
+++ b/app/components/icons/Undo.tsx
@@ -6,6 +6,7 @@ export default function UndoIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Undo Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M9.53 2.47a.75.75 0 010 1.06L4.81 8.25H15a6.75 6.75 0 010 13.5h-3a.75.75 0 010-1.5h3a5.25 5.25 0 100-10.5H4.81l4.72 4.72a.75.75 0 11-1.06 1.06l-6-6a.75.75 0 010-1.06l6-6a.75.75 0 011.06 0z"
--- a/app/components/icons/Unlock.tsx
+++ b/app/components/icons/Unlock.tsx
@@ -6,6 +6,7 @@ export function UnlockIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>Unlock Icon</title>
 			<path d="M18 1.5c2.9 0 5.25 2.35 5.25 5.25v3.75a.75.75 0 0 1-1.5 0V6.75a3.75 3.75 0 1 0-7.5 0v3a3 3 0 0 1 3 3v6.75a3 3 0 0 1-3 3H3.75a3 3 0 0 1-3-3v-6.75a3 3 0 0 1 3-3h9v-3c0-2.9 2.35-5.25 5.25-5.25Z" />
 		</svg>
 	);
--- a/app/components/icons/Upload.tsx
+++ b/app/components/icons/Upload.tsx
@@ -8,6 +8,7 @@ export function UploadIcon({ className }: { className?: string }) {
 			stroke="currentColor"
 			className={className}
 		>
+			<title>Upload Icon</title>
 			<path
 				strokeLinecap="round"
 				strokeLinejoin="round"
--- a/app/components/icons/User.tsx
+++ b/app/components/icons/User.tsx
@@ -6,6 +6,7 @@ export function UserIcon({ className }: { className?: string }) {
 			fill="currentColor"
 			className={className}
 		>
+			<title>User Icon</title>
 			<path
 				fillRule="evenodd"
 				d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z"
--- a/app/components/icons/Users.tsx
+++ b/app/components/icons/Users.tsx
@@ -6,6 +6,7 @@ export function UsersIcon({ className }: { className?: string }) {
 			viewBox="0 0 20 20"
 			fill="currentColor"
 		>
+			<title>Users Icon</title>
 			<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
 		</svg>
 	);
--- a/app/components/icons/YouTube.tsx
+++ b/app/components/icons/YouTube.tsx
@@ -8,6 +8,7 @@ export function YouTubeIcon({ className }: { className?: string }) {
 			xmlns="http://www.w3.org/2000/svg"
 			className={className}
 		>
+			<title>YouTube Icon</title>
 			<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
 		</svg>
 	);
--- a/biome.json
+++ b/biome.json
@@ -31,8 +31,7 @@
 				}
 			},
 			"a11y": {
-				"useKeyWithClickEvents": "off",
-				"noSvgWithoutTitle": "off"
+				"useKeyWithClickEvents": "off"
 			},
 			"complexity": {
 				"useLiteralKeys": {