Add alt tags for predefined icons

[lunars97]

Short description

The alt texts should be added in order to make them accessible and improve overall SEO ranking. The alt text should be the most concise description possible of the image’s /icon's purpose.

Proposed changes

• Add descriptive alt texts to image attributes, for ex. small icons in content editor (they are mostly used in pages and can be useful for screen readers)
• If there are decorative icons, aria-hidden='true' should be added (using aria-hidden="true" ensures that screenreaders ignores the image).

Side effects

• None?

Resolved issues

Fixes: #2574

---

Pull Request Review Guidelines

[lunars97]

Do we have more icons which I also need to include here or?

[deen13]

Hey @lunars97, this is my first review for this project, so apologies in advance if my suggestions don't align perfectly. I wanted to propose the implementation of a linter to ensure the proper usage of aria tags throughout the codebase. In the react ecosystem, tools like jsx-a11y are available, which could be beneficial for our tech stack as well. Integrating such a linter would help us avoid missing any necessary aria tags, ensuring accessibility compliance and catching any overlooked icons during development.

[lunars97]

heey @deen13 we have been discussing it in front-end, I am not sure about cms. Maybe we can raise this issue in our cms team call :)

[JoeyStk]

Do we have more icons which I also need to include here or?

No, I think you included all icons mentioned in the issue description.

heey @deen13 we have been discussing it in front-end, I am not sure about cms. Maybe we can raise this issue in our cms team call :)

We did discuss this in our Weekly and we thought that you already included all necessary tags and therefore we didn't think there was the need for a new dependency :)

[codeclimate[bot]]

Code Climate has analyzed commit de6a4caa and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 81.9% (0.0% change).

View more on Code Climate.

[charludo]

In the react ecosystem, tools like jsx-a11y are available, which could be beneficial for our tech stack as well.

A bit off-topic, but I think we already are using jsx-a11y, right? See .eslintrc.js. Some rules in there are disabled because they introduce massive amounts of complaints (which we should probably address...), but most rules should be in effect?

[lunars97]

In the react ecosystem, tools like jsx-a11y are available, which could be beneficial for our tech stack as well.

A bit off-topic, but I think we already are using jsx-a11y, right? See .eslintrc.js. Some rules in there are disabled because they introduce massive amounts of complaints (which we should probably address...), but most rules should be in effect?

I had a look and all the rules related to a11y are set to off. I think we should address them from now on.