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.
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
feat(eslint-plugin-template): [accessibility-interactive-supports-focus] add rule #1134
Changes from all commits
fd8d75f
ef14892
355bcc4
8e455cc
8a263ac
b2d6a47
486a6f7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
import type { TmplAstElement } from '@angular-eslint/bundled-angular-compiler'; | ||
import { | ||
createESLintRule, | ||
getTemplateParserServices, | ||
} from '../utils/create-eslint-rule'; | ||
import { getDomElements } from '../utils/get-dom-elements'; | ||
import { isHiddenFromScreenReader } from '../utils/is-hidden-from-screen-reader'; | ||
import { | ||
isInteractiveElement, | ||
isNonInteractiveRole, | ||
} from '../utils/is-interactive-element'; | ||
import { isContentEditable } from '../utils/is-content-editable'; | ||
import { isDisabledElement } from '../utils/is-disabled-element'; | ||
import { isPresentationRole } from '../utils/is-presentation-role'; | ||
|
||
type Options = []; | ||
export type MessageIds = 'interactiveSupportsFocus'; | ||
export const RULE_NAME = 'accessibility-interactive-supports-focus'; | ||
|
||
export default createESLintRule<Options, MessageIds>({ | ||
name: RULE_NAME, | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: | ||
'Ensures that elements with interactive handlers like `(click)` are focusable.', | ||
recommended: false, | ||
}, | ||
schema: [], | ||
messages: { | ||
interactiveSupportsFocus: | ||
'Elements with interaction handlers must be focusable.', | ||
}, | ||
}, | ||
defaultOptions: [], | ||
create(context) { | ||
return { | ||
Element$1(node: TmplAstElement) { | ||
const elementType = node.name; | ||
if (!getDomElements().has(elementType)) { | ||
return; | ||
} | ||
|
||
const interactiveOutput = node.outputs.find( | ||
(output: { name: string }) => | ||
output.name === 'click' || | ||
output.name.startsWith('keyup') || | ||
output.name.startsWith('keydown') || | ||
output.name.startsWith('keypress'), | ||
); | ||
|
||
if ( | ||
!interactiveOutput || | ||
isDisabledElement(node) || | ||
isHiddenFromScreenReader(node) || | ||
isPresentationRole(node) | ||
) { | ||
// Presentation is an intentional signal from the author | ||
// that this element is not meant to be perceivable. | ||
// For example, a click screen overlay to close a dialog. | ||
return; | ||
} | ||
|
||
const tabIndex = [...node.attributes, ...node.inputs].find( | ||
(attr) => attr.name === 'tabindex', | ||
); | ||
|
||
if ( | ||
interactiveOutput && | ||
!tabIndex && | ||
!isInteractiveElement(node) && | ||
!isNonInteractiveRole(node) && | ||
!isContentEditable(node) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Update to support |
||
) { | ||
const parserServices = getTemplateParserServices(context); | ||
const loc = parserServices.convertNodeSourceSpanToLoc( | ||
node.sourceSpan, | ||
); | ||
const messageId: MessageIds = 'interactiveSupportsFocus'; | ||
context.report({ | ||
loc, | ||
messageId, | ||
}); | ||
} | ||
}, | ||
}; | ||
}, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import type { TmplAstElement } from '@angular-eslint/bundled-angular-compiler'; | ||
import { getOriginalAttributeName } from './get-original-attribute-name'; | ||
import { getAttributeValue } from './get-attribute-value'; | ||
|
||
export function isContentEditable(node: TmplAstElement): boolean { | ||
const attributesInputs = [...node.attributes, ...node.inputs]; | ||
const contentEditableAttr = attributesInputs.find( | ||
(attr) => getOriginalAttributeName(attr) === 'contenteditable', | ||
); | ||
const contentEditableValue = getAttributeValue(node, 'contenteditable'); | ||
return ( | ||
!!contentEditableAttr && | ||
(contentEditableValue === '' || | ||
String(contentEditableValue).toLowerCase() === 'true') | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import type { TmplAstElement } from '@angular-eslint/bundled-angular-compiler'; | ||
import { getOriginalAttributeName } from './get-original-attribute-name'; | ||
import { getAttributeValue } from './get-attribute-value'; | ||
|
||
export function isDisabledElement(node: TmplAstElement): boolean { | ||
const attributesInputs = [...node.attributes, ...node.inputs]; | ||
const disabledAttr = attributesInputs.find( | ||
(attr) => getOriginalAttributeName(attr) === 'disabled', | ||
); | ||
const disabledValue = getAttributeValue(node, 'disabled'); | ||
const isHTML5Disabled = disabledAttr && disabledValue !== undefined; | ||
if (isHTML5Disabled) { | ||
return true; | ||
} | ||
|
||
const isAriaDisabled = | ||
String(getAttributeValue(node, 'aria-disabled')).toLowerCase() === 'true'; | ||
if (isAriaDisabled) { | ||
return true; | ||
} | ||
|
||
return false; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have updated the rule name to follow the
accessibility-
name prefix convention.