Skip to content

Commit

Permalink
fix a11y-svg-has-accessible-name considering whitespace JSXText (#508)
Browse files Browse the repository at this point in the history
  • Loading branch information
nnmrts authored Feb 29, 2024
1 parent adea305 commit 30f5d80
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 3 deletions.
10 changes: 7 additions & 3 deletions lib/rules/a11y-svg-has-accessible-name.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,14 @@ module.exports = {
const elementType = getElementType(context, node)
if (elementType !== 'svg') return

// Check if there is a nested title element that is the first child of the `<svg>`
// Check if there is a nested title element that is the first non-whitespace child of the `<svg>`
const childrenWithoutWhitespace = node.parent.children?.filter(({type, value}) =>
type === 'JSXText' ? value.trim() !== '' : type !== 'JSXText',
)

const hasNestedTitleAsFirstChild =
node.parent.children?.[0]?.type === 'JSXElement' &&
node.parent.children?.[0]?.openingElement?.name?.name === 'title'
childrenWithoutWhitespace?.[0]?.type === 'JSXElement' &&
childrenWithoutWhitespace?.[0]?.openingElement?.name?.name === 'title'

// Check if `aria-label` or `aria-labelledby` is set
const hasAccessibleName = hasProp(node.attributes, 'aria-label') || hasProp(node.attributes, 'aria-labelledby')
Expand Down
6 changes: 6 additions & 0 deletions tests/a11y-svg-has-accessible-name.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ ruleTester.run('a11y-svg-has-accessible-name', rule, {
{
code: "<svg height='100' width='100'><title>Circle with a black outline and red fill</title><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>",
},
{
code: `<svg height='100' width='100'>
<title>Circle with a black outline and red fill</title>
<circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
</svg>`,
},
{
code: "<svg aria-label='Circle with a black outline and red fill' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>",
},
Expand Down

0 comments on commit 30f5d80

Please sign in to comment.