seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

feat: implement accessibility improvements by ensuring alt text is always present on image error events and initialize accessibility checking in App component

Browse Source
This commit is contained in:
sebseb7
2025-07-21 01:39:50 +02:00
parent d70fac24ed
commit bad176a6d1
4 changed files with 263 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Images.js
View File

@@ -176,6 +176,12 @@ class Images extends Component {
fetchPriority="high"
loading="eager"
alt={this.props.productName || 'Produktbild'}
onError={(e) => {
// Ensure alt text is always present even on error
if (!e.target.alt) {
e.target.alt = this.props.productName || 'Produktbild';
}
}}
sx={{
objectFit: 'contain',
cursor: 'pointer',
@@ -240,6 +246,12 @@ class Images extends Component {
component="img"
height="80"
alt={`${this.props.productName || 'Produktbild'} - Bild ${originalIndex + 1}`}
onError={(e) => {
// Ensure alt text is always present even on error
if (!e.target.alt) {
e.target.alt = `${this.props.productName || 'Produktbild'} - Bild ${originalIndex + 1}`;
}
}}
sx={{
objectFit: 'contain',
cursor: 'pointer',
@@ -314,6 +326,12 @@ class Images extends Component {
<CardMedia
component="img"
alt={this.props.productName || 'Produktbild'}
onError={(e) => {
// Ensure alt text is always present even on error
if (!e.target.alt) {
e.target.alt = this.props.productName || 'Produktbild';
}
}}
sx={{
objectFit: 'contain',
width: '90vw',
@@ -368,6 +386,12 @@ class Images extends Component {
component="img"
height="60"
alt={`${this.props.productName || 'Produktbild'} - Miniaturansicht ${originalIndex + 1}`}
onError={(e) => {
// Ensure alt text is always present even on error
if (!e.target.alt) {
e.target.alt = `${this.props.productName || 'Produktbild'} - Miniaturansicht ${originalIndex + 1}`;
}
}}
sx={{
objectFit: 'contain',
cursor: 'pointer',