Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

no-redundant-roles should allow (SVG) images with role="img" #936

Closed
saskaak opened this issue May 31, 2023 · 5 comments
Closed

no-redundant-roles should allow (SVG) images with role="img" #936

saskaak opened this issue May 31, 2023 · 5 comments
Assignees
@jessebeach

Comments

@saskaak
Copy link

saskaak commented May 31, 2023

Hello!

As far as I know<img src="some-image.svg" role="img"> is an actual pattern that can be used to increase browser/screenreader support for SVG images specifically.

Thus, no-redundant-roles should allow images with role="img".

See the difference here comparing pattern 1 (no explicit role) and pattern 2 (with explicit role): https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/
@saskaak saskaak changed the title no-redundant-roles should allow (SVG) images with role="img" no-redundant-roles should allow (SVG) images with role="img" May 31, 2023
@saskaak saskaak changed the title no-redundant-roles should allow (SVG) images with role="img" no-redundant-roles should allow (SVG) images with role="img" May 31, 2023
@saskaak saskaak changed the title no-redundant-roles should allow (SVG) images with role="img" no-redundant-roles should allow (SVG) images with role="img" May 31, 2023
@preetsahil

This comment was marked as resolved.

Sign in to view
@ljharb

This comment was marked as resolved.

Sign in to view
@preetsahil

This comment was marked as resolved.

Sign in to view
@lb-
Copy link
Contributor

lb- commented Oct 23, 2024

Looks like there is a Safari bug that's the cause of this recommendation, Safari have said it's fixed but it appears to be an issue still.

I will see if I can prepare a PR that changes the implicit role for img if src contains svg. This will not work for variables but may be good enough.

lb- added a commit to lb-/eslint-plugin-jsx-a11y that referenced this issue Oct 23, 2024
@lb-
[tests] Add valid aria-role test for <svg role="img" />
cf1d585 
See jsx-eslint#936
lb- added a commit to lb-/eslint-plugin-jsx-a11y that referenced this issue Oct 23, 2024
@lb-
[feature] Improve no-redundant-roles to allow `<img src="*.svg" role=…
8c64e25 
…"img" />`

Setting role="img" is a valid use case to work around a Safari bug for better accessibility when the source image is an SVG file.
This improvement does not account for variables in the `src` attribute but adds a valid exception for when we can parse the string.
Closes jsx-eslint#936
lb- added a commit to lb-/eslint-plugin-jsx-a11y that referenced this issue Oct 23, 2024
@lb-
[feature] Improve no-redundant-roles to allow `<img src="*.svg" role=…
0942f4d 
…"img" />`

Setting role="img" is a valid use case to work around a Safari bug for better accessibility when the source image is an SVG file.
This improvement does not account for variables in the `src` attribute but adds a valid exception for when we can parse the string.
Fixes jsx-eslint#936
@lb-
Copy link
Contributor

lb- commented Oct 23, 2024

PR up #1026

ljharb pushed a commit to lb-/eslint-plugin-jsx-a11y that referenced this issue Oct 25, 2024
@lb- @ljharb
[tests] Add valid aria-role test for <svg role="img" />
63742c4 
See jsx-eslint#936
ljharb pushed a commit to lb-/eslint-plugin-jsx-a11y that referenced this issue Oct 25, 2024
@lb- @ljharb
[patch] no-redundandant-roles: allow <img src="*.svg" role="img" />
4495c4c 
Setting role="img" is a valid use case to work around a Safari bug for better accessibility when the source image is an SVG file.
This improvement does not account for variables in the `src` attribute but adds a valid exception for when we can parse the string.
Fixes jsx-eslint#936
ljharb pushed a commit to lb-/eslint-plugin-jsx-a11y that referenced this issue Oct 25, 2024
@lb- @ljharb
[Tests] aria-role: Add valid test for <svg role="img" />
daba189 
See jsx-eslint#936
@ljharb ljharb closed this as completed in fa9845d Oct 25, 2024
renovate bot added a commit to mmkal/eslint-plugin-mmkal that referenced this issue Oct 26, 2024
@renovate
fix(deps): update dependency eslint-plugin-jsx-a11y to v6.10.2
49b8eac 
##### [v6.10.2](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/CHANGELOG.md#v6102---2024-10-25)

##### Fixed

-   \[patch] `no-redundandant-roles`: allow `&lt;img src="*.svg" role="img" /&gt;` [`#936`](jsx-eslint/eslint-plugin-jsx-a11y#936)

##### Commits

-   \[meta] fix changelog URLs [`0d01a1a`](jsx-eslint/eslint-plugin-jsx-a11y@0d01a1a)
-   \[Refactor] remove no-longer-needed `es-iterator-helpers` [`aa075bd`](jsx-eslint/eslint-plugin-jsx-a11y@aa075bd)
-   \[Refactor] avoid spreading things that are already arrays [`d15d3ab`](jsx-eslint/eslint-plugin-jsx-a11y@d15d3ab)
-   \[Dev Deps] update `@babel/cli`, `@babel/core`, `@babel/eslint-parser`, `@babel/plugin-transform-flow-strip-types`, `@babel/register` [`5dad7c4`](jsx-eslint/eslint-plugin-jsx-a11y@5dad7c4)
-   \[Tests] `aria-role`: Add valid test for `&lt;svg role="img" /&gt;` [`daba189`](jsx-eslint/eslint-plugin-jsx-a11y@daba189)
-   \[Docs] `label-has-associated-control`: add line breaks for readability [`0bc6378`](jsx-eslint/eslint-plugin-jsx-a11y@0bc6378)
-   \[Tests] `label-has-associated-control`: add additional test cases [`30d2318`](jsx-eslint/eslint-plugin-jsx-a11y@30d2318)
-   \[Tests] Add tests to reinforce required attributes for role="heading" [`d92446c`](jsx-eslint/eslint-plugin-jsx-a11y@d92446c)
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this issue Oct 26, 2024
@renovate
Update dependency eslint-plugin-jsx-a11y to v6.10.2
fca2631 
| datasource | package                | from   | to     |
| ---------- | ---------------------- | ------ | ------ |
| npm        | eslint-plugin-jsx-a11y | 6.10.1 | 6.10.2 |


## [v6.10.2](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/CHANGELOG.md#v6102---2024-10-25)

##### Fixed

-   \[patch] `no-redundandant-roles`: allow `&lt;img src="*.svg" role="img" /&gt;` [`#936`](jsx-eslint/eslint-plugin-jsx-a11y#936)

##### Commits

-   \[meta] fix changelog URLs [`0d01a1a`](jsx-eslint/eslint-plugin-jsx-a11y@0d01a1a)
-   \[Refactor] remove no-longer-needed `es-iterator-helpers` [`aa075bd`](jsx-eslint/eslint-plugin-jsx-a11y@aa075bd)
-   \[Refactor] avoid spreading things that are already arrays [`d15d3ab`](jsx-eslint/eslint-plugin-jsx-a11y@d15d3ab)
-   \[Dev Deps] update `@babel/cli`, `@babel/core`, `@babel/eslint-parser`, `@babel/plugin-transform-flow-strip-types`, `@babel/register` [`5dad7c4`](jsx-eslint/eslint-plugin-jsx-a11y@5dad7c4)
-   \[Tests] `aria-role`: Add valid test for `&lt;svg role="img" /&gt;` [`daba189`](jsx-eslint/eslint-plugin-jsx-a11y@daba189)
-   \[Docs] `label-has-associated-control`: add line breaks for readability [`0bc6378`](jsx-eslint/eslint-plugin-jsx-a11y@0bc6378)
-   \[Tests] `label-has-associated-control`: add additional test cases [`30d2318`](jsx-eslint/eslint-plugin-jsx-a11y@30d2318)
-   \[Tests] Add tests to reinforce required attributes for role="heading" [`d92446c`](jsx-eslint/eslint-plugin-jsx-a11y@d92446c)
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this issue Oct 27, 2024
@renovate
Update dependency eslint-plugin-jsx-a11y to v6.10.2
a141708 
| datasource | package                | from   | to     |
| ---------- | ---------------------- | ------ | ------ |
| npm        | eslint-plugin-jsx-a11y | 6.10.1 | 6.10.2 |


## [v6.10.2](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/CHANGELOG.md#v6102---2024-10-25)

##### Fixed

-   \[patch] `no-redundandant-roles`: allow `&lt;img src="*.svg" role="img" /&gt;` [`#936`](jsx-eslint/eslint-plugin-jsx-a11y#936)

##### Commits

-   \[meta] fix changelog URLs [`0d01a1a`](jsx-eslint/eslint-plugin-jsx-a11y@0d01a1a)
-   \[Refactor] remove no-longer-needed `es-iterator-helpers` [`aa075bd`](jsx-eslint/eslint-plugin-jsx-a11y@aa075bd)
-   \[Refactor] avoid spreading things that are already arrays [`d15d3ab`](jsx-eslint/eslint-plugin-jsx-a11y@d15d3ab)
-   \[Dev Deps] update `@babel/cli`, `@babel/core`, `@babel/eslint-parser`, `@babel/plugin-transform-flow-strip-types`, `@babel/register` [`5dad7c4`](jsx-eslint/eslint-plugin-jsx-a11y@5dad7c4)
-   \[Tests] `aria-role`: Add valid test for `&lt;svg role="img" /&gt;` [`daba189`](jsx-eslint/eslint-plugin-jsx-a11y@daba189)
-   \[Docs] `label-has-associated-control`: add line breaks for readability [`0bc6378`](jsx-eslint/eslint-plugin-jsx-a11y@0bc6378)
-   \[Tests] `label-has-associated-control`: add additional test cases [`30d2318`](jsx-eslint/eslint-plugin-jsx-a11y@30d2318)
-   \[Tests] Add tests to reinforce required attributes for role="heading" [`d92446c`](jsx-eslint/eslint-plugin-jsx-a11y@d92446c)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jessebeach jessebeach

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@ljharb @jessebeach @lb- @saskaak @preetsahil