Skip to content

Include `eslint-disable/eslint-enable` annotation for empty alt attribute

What does this MR do and why?

While working on a new component, I ran into an edge case. I have a strictly decorative image and wanted to add an empty alt attribute for it. But the linter would not allow it. However, our frontend guide rightfully suggests that as a recommended solution. Which in the end is confusing.

I decided to add eslint-disable/eslint-enable annotation. While there is an option to specify role="presentation" for a purely decorative image, empty alt attribute is still best practice.

Screen readers also allow the use of WAI-ARIA to hide elements by using role="presentation". However, currently, this feature is not as widely supported as using a null alt attribute.

Source: https://www.w3.org/WAI/tutorials/images/decorative/#example-1-image-used-as-part-of-page-design

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screenshot_2023-06-29_at_16.53.49 Screenshot_2023-06-29_at_16.53.16

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports