[Bug] [Linter Warning] jsx-a11y/alt-text

[grez96]

npm run linters

generates the following output:

Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text

[alemesa]

I looked into this and we do have alt values so this is something related with the library firing false positives, we have to dig into this or wait for a library update

Reference: jsx-eslint/eslint-plugin-jsx-a11y#812

[DonghyukJacobJang]

it is suggesting alt to be at the root of Props, so I made an update to the Image component. It was originally designed with imageObj that has file and alt. So the linter did not like it. To remedy this, I moved file and altto the root of the Props. In addition to that, it did not like the spreading operator.

Old Prop Type

export type Props = {
  className?: string;
  imageObj: { file: string; alt: string };
  loadingType?: 'lazy' | 'eager';
  sizes?: Partial<SrcSetSizes>;
};

new Prop Type

export type Props = {
  className?: string;
  src: string;
  alt: string;
  loadingType?: 'lazy' | 'eager';
  sizes?: Partial<SrcSetSizes>;
};