f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-08-10 12:35:02 +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;
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>
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+3 -2
View File
@@ -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; }
}