A11y: enable rule jsx-a11y/alt-text (#55832)

* Enable jsx-a11y/alt-text rule

* Fix errors

* Fix tests

* Enable jsx-a11y/alt-text rule after solving merge conflict

* Delete unused import

* Modify files according to the reviewer's comments

* Revert test changes and update snapshot

* tweaks to image alt names

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOption.tsx

@@ -17,7 +17,7 @@ export const SelectOption = (props: ExtendedOptionProps) => {
   return (
     <components.Option {...props}>
       <div className="gf-form-select-box__desc-option">
-        {data.imgUrl && <img className="gf-form-select-box__desc-option__img" src={data.imgUrl} />}
+        {data.imgUrl && <img className="gf-form-select-box__desc-option__img" src={data.imgUrl} alt="" />}
         <div className="gf-form-select-box__desc-option__body">
           <div>{children}</div>
           {data.description && <div className="gf-form-select-box__desc-option__desc">{data.description}</div>}

packages/grafana-ui/src/components/Forms/Legacy/Select/__snapshots__/SelectOption.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`SelectOption renders correctly 1`] = `
     className="gf-form-select-box__desc-option"
   >
     <img
+      alt=""
       className="gf-form-select-box__desc-option__img"
       src="url/to/avatar"
     />

packages/grafana-ui/src/components/Table/ImageCell.tsx

@@ -15,13 +15,13 @@ export const ImageCell: FC<TableCellProps> = (props) => {
 
   return (
     <div {...cellProps} className={tableStyles.cellContainer}>
-      {!hasLinks && <img src={displayValue.text} className={tableStyles.imageCell} />}
+      {!hasLinks && <img src={displayValue.text} className={tableStyles.imageCell} alt="" />}
       {hasLinks && (
         <DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
           {(api) => {
             return (
               <div onClick={api.openMenu} className={cx(tableStyles.imageCellLink, api.targetClassName)}>
-                <img src={displayValue.text} className={tableStyles.imageCell} />
+                <img src={displayValue.text} className={tableStyles.imageCell} alt="" />
               </div>
             );
           }}