From 5ddc0373b756d674ad188a8d1157b0da5384ac44 Mon Sep 17 00:00:00 2001
From: durstann <durstann@yahoo.com>
Date: Sat, 1 Aug 2026 01:00:51 -0700
Subject: [PATCH] Fix a11y issues on the brew item card so screen reader users
 and keyboard navigators can use it.

---
 .../basePages/listPage/brewItem/brewItem.jsx  | 27 ++++++++++---------
 .../basePages/listPage/brewItem/brewItem.less |  5 ++--
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
index aadadbd3b..5cc02c986 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -39,9 +39,9 @@ const BrewItem = ({
 		if(!brew.editId) return null;
 
 		return (
-			<a className='deleteLink' onClick={deleteBrew}>
-				<i className='fas fa-trash-alt' title='Delete' />
-			</a>
+			<button aria-label={`Delete ${brew.title}`} className='deleteLink' onClick={deleteBrew}>
+				<i className='fas fa-trash-alt' aria-hidden='true' title='Delete' />
+			</button>
 		);
 	};
 
@@ -52,7 +52,7 @@ const BrewItem = ({
 		if(brew.googleId && !brew.stubbed) editLink = brew.googleId + editLink;
 
 		return (
-			<a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
+			<a className='editLink' href={`/edit/${editLink}`} aria-label={`Edit ${brew.title}`} target='_blank' rel='noopener noreferrer'>
 				<i className='fas fa-pencil-alt' title='Edit' />
 			</a>
 		);
@@ -67,7 +67,7 @@ const BrewItem = ({
 		}
 
 		return (
-			<a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
+			<a className='shareLink' href={`/share/${shareLink}`} aria-label={`Share ${brew.title}`} target='_blank' rel='noopener noreferrer'>
 				<i className='fas fa-share-alt' title='Share' />
 			</a>
 		);
@@ -82,7 +82,7 @@ const BrewItem = ({
 		}
 
 		return (
-			<a className='downloadLink' href={`/download/${shareLink}`}>
+			<a className='downloadLink' aria-label={`Download ${brew.title}`} href={`/download/${shareLink}`}>
 				<i className='fas fa-download' title='Download' />
 			</a>
 		);
@@ -94,7 +94,7 @@ const BrewItem = ({
 			return (
 				<span title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}>
 					<a href={brew.webViewLink} target='_blank'>
-						<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
+						<img className='googleDriveIcon' src={googleDriveIcon} alt='Google Drive Storage' />
 					</a>
 				</span>
 			);
@@ -102,7 +102,7 @@ const BrewItem = ({
 
 		return (
 			<span title='Homebrewery Storage'>
-				<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
+				<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
 			</span>
 		);
 	};
@@ -148,19 +148,20 @@ const BrewItem = ({
 					))}
 				</span>
 				<br />
-				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
-					<i className='fas fa-eye' /> {brew.views}
+				<span aria-label={`Viewed ${brew.views} times`} title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
+					<span aria-hidden='true'><i className='fas fa-eye' /> {brew.views}</span>
 				</span>
 				{brew.pageCount && (
-					<span title={`Page count: ${brew.pageCount}`}>
-						<i className='far fa-file' /> {brew.pageCount}
+					<span aria-label={`${brew.pageCount} pages`} title={`Page count: ${brew.pageCount}`}>
+						<span aria-hidden='true'><i className='far fa-file' /> {brew.pageCount}</span>
 					</span>
 				)}
 				<span
+					aria-label={`Last updated ${moment(brew.updatedAt).fromNow()}`}
 					title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
                         Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
 				>
-					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
+					<span aria-hidden='true'><i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}</span>
 				</span>
 				{renderStorageIcon()}
 			</div>
diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
index 93685947c..d48248090 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
@@ -89,7 +89,7 @@
 			&::before { content : '\f518'; }
 		}
 	}
-	&:hover {
+	&:hover, &:focus-within {
 		.links { opacity : 1; }
 	}
 	&:nth-child(2n + 1) { margin-right : 0px; }
@@ -103,7 +103,7 @@
 		text-align       : center;
 		background-color : fade(black, 60%);
 		opacity          : 0;
-		a {
+		a, button {
 			.animate(opacity);
 			display         : block;
 			margin          : 8px 0px;
@@ -111,6 +111,7 @@
 			color           : white;
 			text-decoration : unset;
 			opacity         : 0.6;
+			width           : 100%;
 			&:hover { opacity : 1; }
 			i { cursor : pointer; }
 		}