a11y: Every image must have an alt attribute

When the image is purely decorative, then `alt=''` is acceptable.

Closes cockpit-project#13069

.eslintrc.json

@@ -54,7 +54,6 @@
         "jsx-a11y/click-events-have-key-events": "off",
         "jsx-a11y/label-has-associated-control": "off",
         "jsx-a11y/anchor-is-valid": "off",
-        "jsx-a11y/alt-text": "off",
         "jsx-a11y/no-autofocus": "off",
         "jsx-a11y/no-noninteractive-element-interactions": "off",
         "jsx-a11y/no-interactive-element-to-noninteractive-role": "off",

pkg/apps/application-list.jsx

@@ -90,7 +90,7 @@ class ApplicationRow extends React.Component {
 
         return (
             <tr onClick={left_click(() => cockpit.location.go(comp.id))}>
-                <td><img src={icon_url(comp.icon)} role="presentation" /></td>
+                <td><img src={icon_url(comp.icon)} role="presentation" alt="" /></td>
                 <td>{name}</td>
                 <td>{summary_or_progress}</td>
                 <td>{button}</td>

pkg/apps/application.jsx

@@ -117,7 +117,7 @@ export class Application extends React.Component {
                     <table className="table app">
                         <tbody>
                             <tr>
-                                <td><img src={icon_url(comp.icon)} role="presentation" /></td>
+                                <td><img src={icon_url(comp.icon)} role="presentation" alt="" /></td>
                                 <td>{comp.summary}</td>
                                 <td>{progress_or_launch}</td>
                                 <td>{button}</td>
@@ -127,7 +127,7 @@ export class Application extends React.Component {
                     {render_homepage_link(comp.urls)}
                     <div className="app-description">{render_description(comp.description)}</div>
                     <center>
-                        { comp.screenshots.map((s, index) => <img key={`comp-${index}`} className="app-screenshot" role="presentation" src={s.full} />) }
+                        { comp.screenshots.map((s, index) => <img key={`comp-${index}`} className="app-screenshot" role="presentation" alt="" src={s.full} />) }
                     </center>
                 </div>
             );

pkg/docker/storage.jsx

@@ -184,7 +184,7 @@ class DriveBox extends React.Component {
                                onChange={ () => null /* click handled by parent element, silence React warning */ }
                                checked={self.driveChecked(drive)} />
                     </td>
-                    <td><img role="presentation" src="images/drive-harddisk-symbolic.svg" /></td>
+                    <td><img role="presentation" src="images/drive-harddisk-symbolic.svg" alt="" /></td>
                     <td>
                         <div>{drive.name}</div>
                         <div>{cockpit.format_bytes(drive.size)} {drive_class_desc(drive.class)}</div>
@@ -257,7 +257,7 @@ class PoolBox extends React.Component {
                 return (
                     <tr key={drive.name}>
                         <td>{cockpit.format_bytes(drive.size)}</td>
-                        <td><img role="presentation" src="images/drive-harddisk-symbolic.svg" /></td>
+                        <td><img role="presentation" src="images/drive-harddisk-symbolic.svg" alt="" /></td>
                         <td>{drive.name}{drive.shared ? _(" (shared with the OS)") : ""}</td>
                     </tr>);
             });
@@ -367,7 +367,7 @@ function add_storage(client, drives, model) {
             return (
                 <tr key={drive.name}>
                     <td>{cockpit.format_bytes(drive.size)}</td>
-                    <td><img role="presentation" src="images/drive-harddisk-symbolic.svg" /></td>
+                    <td><img role="presentation" src="images/drive-harddisk-symbolic.svg" alt="" /></td>
                     <td>{drive.name}</td>
                 </tr>);
         });

pkg/shell/index.html

@@ -345,7 +345,7 @@ <h4 class="modal-title" translatable="yes">Authentication</h4>
                 <div id="machine-dropdown" class="nav-item-pf-header machine-dropdown">
                     <a tabindex="0" id="machine-link" class="dropdown-toggle" data-toggle="dropdown"
                         aria-haspopup="true" role="button" aria-expanded="false">
-                      <img src="../shell/images/server-small.png" id="machine-avatar" role="presentation" class="machine-avatar single-dashboard">
+                      <img src="../shell/images/server-small.png" id="machine-avatar" role="presentation" alt="" class="machine-avatar single-dashboard">
                       <span></span>
                        <b class="caret"></b>
                     </a>

pkg/sosreport/index.html

@@ -30,7 +30,7 @@
   </head>
   <body hidden>
     <div class="page-ct">
-      <img src="sosreport.png">
+      <img src="sosreport.png" alt="">
       <p translatable="yes">This tool will collect system configuration and diagnostic information from this system for use with diagnosing problems with the system.</p>
       <p translatable="yes">The collected information will be stored locally on the system.</p>
       <button translatable="yes" class="btn btn-primary"

pkg/storaged/mdraid-details.jsx

@@ -121,7 +121,7 @@ class MDRaidSidebar extends React.Component {
             return (
                 <tr key={block.path}>
                     <td className="storage-icon">
-                        <img src="images/storage-disk.png" />
+                        <img src="images/storage-disk.png" alt="" />
                     </td>
                     <td>
                         {slot || "-"} <StorageBlockNavLink client={client} block={block} />

pkg/storaged/vgroup-details.jsx

@@ -103,7 +103,7 @@ class VGroupSidebar extends React.Component {
             return (
                 <tr key={pvol.path}>
                     <td className="storage-icon">
-                        <img src="images/storage-disk.png" />
+                        <img src="images/storage-disk.png" alt="" />
                     </td>
                     <td>
                         <StorageBlockNavLink client={client} block={ client.blocks[pvol.path] } />