Skip to content

Commit

Permalink
feat(a11y): add attribute role="img" to the svg element (#750)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sinchang
sinchang committed Sep 28, 2022
1 parent a9d9e98 commit 8b9edc4
Show file tree
Hide file tree
Showing 8 changed files with 253 additions and 60 deletions.
24 changes: 12 additions & 12 deletions packages/babel-preset/src/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('preset', () => {
).toMatchInlineSnapshot(`
"import * as React from \\"react\\";
const SvgComponent = () => <svg foo=\\"bar\\" x={y} />;
const SvgComponent = () => <svg role=\\"img\\" foo=\\"bar\\" x={y} />;
export default SvgComponent;"
`)
Expand All @@ -45,7 +45,7 @@ describe('preset', () => {
const SvgComponent = ({
title,
titleId
}) => <svg aria-labelledby={titleId}>{title ? <title id={titleId}>{title}</title> : null}</svg>;
}) => <svg role=\\"img\\" aria-labelledby={titleId}>{title ? <title id={titleId}>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
Expand All @@ -62,7 +62,7 @@ describe('preset', () => {
const SvgComponent = ({
title,
titleId
}) => <svg aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>Hello</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
}) => <svg role=\\"img\\" aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>Hello</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
Expand All @@ -77,7 +77,7 @@ describe('preset', () => {
const SvgComponent = ({
title,
titleId
}) => <svg aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>{\\"Hello\\"}</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
}) => <svg role=\\"img\\" aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>{\\"Hello\\"}</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
Expand All @@ -94,7 +94,7 @@ describe('preset', () => {
const SvgComponent = ({
desc,
descId
}) => <svg aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
}) => <svg role=\\"img\\" aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
export default SvgComponent;"
`)
Expand All @@ -111,7 +111,7 @@ describe('preset', () => {
const SvgComponent = ({
desc,
descId
}) => <svg aria-describedby={descId}>{desc === undefined ? <desc id={descId}>Hello</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
}) => <svg role=\\"img\\" aria-describedby={descId}>{desc === undefined ? <desc id={descId}>Hello</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
export default SvgComponent;"
`)
Expand All @@ -126,7 +126,7 @@ describe('preset', () => {
const SvgComponent = ({
desc,
descId
}) => <svg aria-describedby={descId}>{desc === undefined ? <desc id={descId}>{\\"Hello\\"}</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
}) => <svg role=\\"img\\" aria-describedby={descId}>{desc === undefined ? <desc id={descId}>{\\"Hello\\"}</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
export default SvgComponent;"
`)
Expand All @@ -146,7 +146,7 @@ describe('preset', () => {
titleId,
desc,
descId
}) => <svg aria-labelledby={titleId} aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}{title ? <title id={titleId}>{title}</title> : null}</svg>;
}) => <svg role=\\"img\\" aria-labelledby={titleId} aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}{title ? <title id={titleId}>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
Expand All @@ -163,7 +163,7 @@ describe('preset', () => {
).toMatchInlineSnapshot(`
"import * as React from \\"react\\";
const SvgComponent = () => <svg a=\\"black\\" b={props.white} />;
const SvgComponent = () => <svg a=\\"black\\" b={props.white} role=\\"img\\" />;
export default SvgComponent;"
`)
Expand All @@ -179,7 +179,7 @@ describe('preset', () => {
).toMatchInlineSnapshot(`
"import * as React from \\"react\\";
const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" {...props} />;
const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" role=\\"img\\" {...props} />;
export default SvgComponent;"
`)
Expand All @@ -195,7 +195,7 @@ describe('preset', () => {
).toMatchInlineSnapshot(`
"import * as React from \\"react\\";
const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} {...props} />;
const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} role=\\"img\\" {...props} />;
export default SvgComponent;"
`)
Expand All @@ -213,7 +213,7 @@ describe('preset', () => {
"import * as React from \\"react\\";
import Svg from \\"react-native-svg\\";
const SvgComponent = props => <Svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} {...props} />;
const SvgComponent = props => <Svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} role=\\"img\\" {...props} />;
export default SvgComponent;"
`)
Expand Down
7 changes: 6 additions & 1 deletion packages/babel-preset/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,12 @@ function replaceMapToValues(replaceMap: { [key: string]: string }): Value[] {

const plugin = (_: ConfigAPI, opts: Options) => {
let toRemoveAttributes = ['version']
let toAddAttributes: Attribute[] = []
let toAddAttributes: Attribute[] = [
{
name: 'role',
value: 'img',
},
]

if (opts.svgProps) {
toAddAttributes = [...toAddAttributes, ...propsToAttributes(opts.svgProps)]
Expand Down

1 comment on commit 8b9edc4

@vercel
Copy link

@vercel vercel bot commented on 8b9edc4 Sep 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

svgr – ./

svgr-gregberge.vercel.app
api.react-svgr.com
svgr-git-main-gregberge.vercel.app

Please sign in to comment.