Scheduler a11y: Images must have alternate text (DevExpress#28231)

mpreyskurantov · Oct 24, 2024 · affffdf · affffdf
1 parent 234fe6b
commit affffdf
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 10 deletions.
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.html
@@ -21,7 +21,7 @@
       *ngIf="getMovieById | apply : model.appointmentData.movieId as movie"
     >
       <div class="movie">
-        <img [src]="movie.image" />
+        <img [src]="movie.image" alt="{{ movie.text }} poster" />
         <div class="movie-text">{{ movie.text }}</div>
       </div>
     </ng-container>

diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/AppointmentTemplate.tsx b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/AppointmentTemplate.tsx
@@ -16,7 +16,7 @@ const AppointmentTemplate = (props: AppointmentTemplateProps) => {
 
   return (
     <div className="movie">
-      <img src={movieInfo.image} />
+      <img src={movieInfo.image} alt={movieInfo.text + ' poster'} />
       <div className="movie-text">{movieInfo.text}</div>
     </div>
   );

diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js
@@ -8,7 +8,10 @@ const AppointmentTemplate = (props) => {
   const movieInfo = getMovieById(appointmentData.movieId) || {};
   return (
     <div className="movie">
-      <img src={movieInfo.image} />
+      <img
+        src={movieInfo.image}
+        alt={`${movieInfo.text} poster`}
+      />
       <div className="movie-text">{movieInfo.text}</div>
     </div>
   );

diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/AppointmentTemplate.vue b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/AppointmentTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="movie">
-    <img :src="movieInfo.image">
+    <img :src="movieInfo.image" :alt="`${movieInfo.text} poster`">
     <div class="movie-text">{{ movieInfo.text }}</div>
   </div>
 </template>

diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/index.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/index.js
@@ -18,7 +18,7 @@ $(() => {
       const movieInfo = getMovieById(model.appointmentData.movieId) || {};
 
       return $(`${"<div class='movie'>"
-                + "<img src='"}${movieInfo.image}' />`
+                + "<img src='"}${movieInfo.image}' alt='${movieInfo.text} poster' />`
                 + `<div class='movie-text'>${movieInfo.text}</div>`
                 + '</div>');
     },

diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html
@@ -26,7 +26,7 @@
       <h2>{{ employee.text }}</h2>
     </div>
     <div class="avatar">
-      <img [src]="employee.data.avatar" />
+      <img [src]="employee.data.avatar" alt="{{ employee.text }} photo" />
     </div>
     <div class="info" [style.color]="employee.color">
       Age: {{ employee.data.age }}

diff --git a/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx b/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx
@@ -13,7 +13,10 @@ const ResourceCell = (props: ResourceCellProps) => {
         <h2>{text}</h2>
       </div>
       <div className="avatar">
-        <img src={avatar} />
+        <img
+          src={avatar}
+          alt={`${text} photo`}
+        />
       </div>
       <div className="info" style={{ color }}>
           Age: {age}

diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js
@@ -17,7 +17,10 @@ const ResourceCell = (props) => {
         <h2>{text}</h2>
       </div>
       <div className="avatar">
-        <img src={avatar} />
+        <img
+          src={avatar}
+          alt={`${text} photo`}
+        />
       </div>
       <div
         className="info"

diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
@@ -7,7 +7,7 @@
       <h2>{{ employee.text }}</h2>
     </div>
     <div class="avatar">
-      <img :src="employee.data.avatar">
+      <img :src="employee.data.avatar" :alt="`${employee.text} photo`">
     </div>
     <div
       :style="'color:' + employee.color"

diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/index.js b/apps/demos/Demos/Scheduler/Overview/jQuery/index.js
@@ -42,7 +42,7 @@ $(() => {
 
       const avatar = $('<div>')
         .addClass('avatar')
-        .html(`<img src=${cellData.data.avatar}>`)
+        .html(`<img src=${cellData.data.avatar} alt="${cellData.text} photo">`)
         .attr('title', cellData.text);
 
       const info = $('<div>')