Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: github/eslint-plugin-github
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v4.9.1
Choose a base ref
...
head repository: github/eslint-plugin-github
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v4.9.2
Choose a head ref
  • 3 commits
  • 2 files changed
  • 1 contributor

Commits on Jul 18, 2023

  1. Add failing test case

    @khiga8
    khiga8 committed Jul 18, 2023
    Copy the full SHA
    dd3cba1 View commit details

  2. Use literal prop

    @khiga8
    khiga8 committed Jul 18, 2023
    Copy the full SHA
    c2ea115 View commit details

  3. Merge pull request #466 from github/kh-use-literal-prop-for-class 

    Use `getLiteralPropValue` for sr-only class
    @khiga8
    khiga8 authored Jul 18, 2023

    Partially verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    We cannot verify signatures from co-authors, and some of the co-authors attributed to this commit require their commits to be signed.
    Copy the full SHA
    cd17c09 View commit details
Showing with 9 additions and 3 deletions.
  1. +6 −3 lib/rules/a11y-no-visually-hidden-interactive-element.js
  2. +3 −0 tests/a11y-no-visually-hidden-interactive-element.js
9 changes: 6 additions & 3 deletions lib/rules/a11y-no-visually-hidden-interactive-element.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const {getProp, getPropValue} = require('jsx-ast-utils')
const {getProp, getLiteralPropValue} = require('jsx-ast-utils')
const {getElementType} = require('../utils/get-element-type')
const {generateObjSchema} = require('eslint-plugin-jsx-a11y/lib/util/schemas')

@@ -32,9 +32,12 @@ const checkIfInteractiveElement = (context, node) => {
const checkIfVisuallyHiddenAndInteractive = (context, options, node, isParentVisuallyHidden) => {
const {className, componentName} = options
if (node.type === 'JSXElement') {
const classes = getPropValue(getProp(node.openingElement.attributes, 'className'))
const classes = getLiteralPropValue(getProp(node.openingElement.attributes, 'className'))
const isVisuallyHiddenElement = node.openingElement.name.name === componentName
const hasSROnlyClass = typeof classes !== 'undefined' && classes.includes(className)
let hasSROnlyClass = false
if (classes != null) {
hasSROnlyClass = classes.includes(className)
}
let isHidden = false
if (hasSROnlyClass || isVisuallyHiddenElement || !!isParentVisuallyHidden) {
if (checkIfInteractiveElement(context, node)) {
3 changes: 3 additions & 0 deletions tests/a11y-no-visually-hidden-interactive-element.js
View file
Original file line number Diff line number Diff line change
@@ -23,6 +23,9 @@ ruleTester.run('a11y-no-visually-hidden-interactive-element', rule, {
{code: "<span className='sr-only'>Text</span>;"},
{code: "<button className='other'>Submit</button>"},
{code: "<input className='sr-only' />"},
{
code: "<Foo className={({isOn}) => { return isOn || isOnProps ? `${className} selected`.trim() : className ?? ''}}/>",
},
{code: "<a className='other show-on-focus'>skip to main content</a>"},
{code: '<button>Submit</button>'},
{