Merge pull request #138 from jerboa88/136-add-aria-labels-to-buttons

136 add aria labels to buttons

gatsby-config.ts

@@ -12,8 +12,7 @@ import {
 } from './src/common/config-manager';
 import { SOCIAL_IMAGES_DIR } from './src/common/constants';
 import { getAbsoluteUrl } from './src/common/utilities';
-// biome-ignore lint/style/noNamespaceImport: We need to import the entire Tailwind CSS configuration file
-import * as tailwindConfig from './tailwind.config';
+import tailwindConfig from './tailwind.config';
 
 const SITE_METADATA = getSiteMetadata();
 const DARK_THEME = getTheme('dark');

src/components/input/base-button.tsx

@@ -42,8 +42,11 @@ export function BaseButton({
 		textClassName,
 	);
 
+	const computedButtonLabel = tooltipText ?? text;
+
 	const buttonElement = (
 		<motion.button
+			aria-label={computedButtonLabel}
 			{...{ type, disabled, layout, layoutRoot, ...buttonClassNameProps }}
 		>
 			<AnimatePresence mode="popLayout" initial={false}>
@@ -70,11 +73,9 @@ export function BaseButton({
 		</motion.button>
 	);
 
-	const computedTooltipText = tooltipText ?? text;
-
-	return computedTooltipText ? (
+	return !disabled && computedButtonLabel ? (
 		<Tooltip
-			text={computedTooltipText}
+			text={computedButtonLabel}
 			position={tooltipPosition}
 			className={tooltipClassName}
 		>

src/components/project-card.tsx

@@ -44,6 +44,7 @@ export function ProjectCard({ repo }: Props) {
 						<Pill text={repo.typeName} className={projectTypeColor} />
 						<GhostButton
 							icon={faGithub}
+							tooltipText={`View ${repo.name} on GitHub`}
 							{...ghostButtonClassNameProps}
 							disabled
 						/>

src/components/seo/page-head.tsx

@@ -71,7 +71,7 @@ export function PageHead({
 			<meta name="twitter:image" content={twitterImageUrl.toString()} />
 
 			<meta name="google" content="nositelinkssearchbox" />
-			<meta content={THEME.primary} name="theme-color" />
+			<meta name="theme-color" content={THEME.primary} />
 
 			<link rel="canonical" href={pageUrl.toString()} />
 

src/config/color-mappings.tsx

@@ -7,16 +7,16 @@ import type { ColorMappingsConfig } from '../common/types';
 
 export const colorMappingsConfig: ColorMappingsConfig = {
 	projectType: {
-		'android app': 'bg-lime-500',
-		extension: 'bg-amber-500',
-		'cli app': 'bg-red-500',
-		'js library': 'bg-green-500',
-		'node.js module': 'bg-green-500',
-		markdown: 'bg-purple-500',
-		website: 'bg-orange-500',
-		'web app': 'bg-orange-500',
-		other: 'bg-blue-500',
-		'gimp plugin': 'bg-blue-500',
+		'android app': 'bg-lime-600',
+		extension: 'bg-amber-600',
+		'cli app': 'bg-red-600',
+		'js library': 'bg-green-600',
+		'node.js module': 'bg-green-600',
+		markdown: 'bg-purple-600',
+		website: 'bg-orange-600',
+		'web app': 'bg-orange-600',
+		other: 'bg-blue-600',
+		'gimp plugin': 'bg-blue-600',
 	},
 	roleType: {
 		internship: 'bg-secondary',

tailwind.config.ts

@@ -3,11 +3,12 @@
 	-------------------------------
 */
 
+import type { Config } from 'tailwindcss';
 import plugin from 'tailwindcss/plugin';
 import { getTheme } from './src/common/config-manager';
 
-module.exports = {
-	content: ['./src/**/*.{js,jsx,ts,tsx}'],
+export default {
+	content: ['src/**/*.{js,jsx,ts,tsx}'],
 	theme: {
 		fontFamily: {
 			sans: [
@@ -69,4 +70,4 @@ module.exports = {
 		themes: [{ dark: getTheme('dark') }, { light: getTheme('light') }],
 		darkTheme: 'dark',
 	},
-};
+} satisfies Config;