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

Fix a11y issues on the brew item card so screen reader users and keyboard navigators can use it.

Browse Source
This commit is contained in:
durstann
2026-08-01 01:00:51 -07:00
parent a280304776
commit 5ddc0373b7
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>