f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-08-10 14:45:00 +00:00
Code Wiki Activity

Merge pull request #4944 from firstmatekidd/brew_item

Browse Source 
Fix a11y issues on the brew item card so screen reader users and keyb…
This commit is contained in:
Víctor Losada Hernández
2026-08-08 12:39:39 +02:00
committed by GitHub
parent a280304776 5ddc0373b7
commit 7513d95130
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+14 -13
View File
@@ -39,9 +39,9 @@ const BrewItem = ({
if(!brew.editId) return null; if(!brew.editId) return null;
return ( return (
<a className='deleteLink' onClick={deleteBrew}> <button aria-label={`Delete ${brew.title}`} className='deleteLink' onClick={deleteBrew}>
<i className='fas fa-trash-alt' title='Delete' /> <i className='fas fa-trash-alt' aria-hidden='true' title='Delete' />
</a> </button>
); );
}; };
@@ -52,7 +52,7 @@ const BrewItem = ({
if(brew.googleId && !brew.stubbed) editLink = brew.googleId + editLink; if(brew.googleId && !brew.stubbed) editLink = brew.googleId + editLink;
return ( 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' /> <i className='fas fa-pencil-alt' title='Edit' />
</a> </a>
); );
@@ -67,7 +67,7 @@ const BrewItem = ({
} }
return ( 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' /> <i className='fas fa-share-alt' title='Share' />
</a> </a>
); );
@@ -82,7 +82,7 @@ const BrewItem = ({
} }
return ( 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' /> <i className='fas fa-download' title='Download' />
</a> </a>
); );
@@ -94,7 +94,7 @@ const BrewItem = ({
return ( return (
<span title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}> <span title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}>
<a href={brew.webViewLink} target='_blank'> <a href={brew.webViewLink} target='_blank'>
<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' /> <img className='googleDriveIcon' src={googleDriveIcon} alt='Google Drive Storage' />
</a> </a>
</span> </span>
); );
@@ -102,7 +102,7 @@ const BrewItem = ({
return ( return (
<span title='Homebrewery Storage'> <span title='Homebrewery Storage'>
<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' /> <img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
</span> </span>
); );
}; };
@@ -148,19 +148,20 @@ const BrewItem = ({
))} ))}
</span> </span>
<br /> <br />
<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}> <span aria-label={`Viewed ${brew.views} times`} title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
<i className='fas fa-eye' /> {brew.views} <span aria-hidden='true'><i className='fas fa-eye' /> {brew.views}</span>
</span> </span>
{brew.pageCount && ( {brew.pageCount && (
<span title={`Page count: ${brew.pageCount}`}> <span aria-label={`${brew.pageCount} pages`} title={`Page count: ${brew.pageCount}`}>
<i className='far fa-file' /> {brew.pageCount} <span aria-hidden='true'><i className='far fa-file' /> {brew.pageCount}</span>
</span> </span>
)} )}
<span <span
aria-label={`Last updated ${moment(brew.updatedAt).fromNow()}`}
title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)} title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
Last updated: ${moment(brew.updatedAt).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> </span>
{renderStorageIcon()} {renderStorageIcon()}
</div> </div>
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+3 -2
View File
@@ -89,7 +89,7 @@
&::before { content : '\f518'; } &::before { content : '\f518'; }
} }
} }
&:hover { &:hover, &:focus-within {
.links { opacity : 1; } .links { opacity : 1; }
} }
&:nth-child(2n + 1) { margin-right : 0px; } &:nth-child(2n + 1) { margin-right : 0px; }
@@ -103,7 +103,7 @@
text-align : center; text-align : center;
background-color : fade(black, 60%); background-color : fade(black, 60%);
opacity : 0; opacity : 0;
a { a, button {
.animate(opacity); .animate(opacity);
display : block; display : block;
margin : 8px 0px; margin : 8px 0px;
@@ -111,6 +111,7 @@
color : white; color : white;
text-decoration : unset; text-decoration : unset;
opacity : 0.6; opacity : 0.6;
width : 100%;
&:hover { opacity : 1; } &:hover { opacity : 1; }
i { cursor : pointer; } i { cursor : pointer; }
} }