feat(eslint-plugin-template): [accessibility-interactive-supports-focus] add rule #1134

sandikbarr · 2022-09-16T15:21:54Z

Adds a new accessibility rule to check that interactive elements are focussable.
- Ported from eslint-plugin-jsx-a11y interactive-supports-focus
- This rule ensures that DOM elements with interaction handlers (click, keydown, keyup, keypress) can receive focus either because the element is interactive by default (button, input, etc.) or by adding a tabindex.
This rule is intended to be used in conjunction with the template rule click-events-have-key-events
- click-events-have-key-events ensures that when DOM elements are given click handlers that are not interactive by default that they also have a corresponding key event; however, elements that are not interactive by default also do not receive keyboard focus without tabindex.
- Also, see my fix for click-events-have-key-events

The accessibility-interactive-supports-focus rule works as follows:

Checks only native HTML DOM elements
Looks for a tabindex attribute or input
Looks for interactive outputs, click, keyup, keydown, or key press
If the element has no interactive outputs, is disabled, aria-disabled, has a presentation role, or is hidden from the screen reader, it returns as valid
If the element has interactive outputs, does not have a tab index, is not contenteditable, and is not an interactive element by default or is not explicitly assigned a non interactive role, it returns an error that the element must be able to receive focus
- The fix is to either use a DOM element that is interactive by default, or
- Add a tabindex to the element to make it focusable. However, it still may lack semantic meaning, so using semantic elements should be preferred.

nx-cloud · 2022-09-16T15:21:56Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 486a6f7. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 7 targets

Sent with 💌 from NxCloud.

packages/eslint-plugin-template/src/rules/interactive-supports-focus.ts

packages/eslint-plugin-template/tests/rules/interactive-supports-focus/cases.ts

codecov · 2022-09-18T09:30:31Z

Codecov Report

Merging #1134 (486a6f7) into main (6c39138) will increase coverage by 0.27%.
The diff coverage is 94.28%.

@@            Coverage Diff             @@
##             main    #1134      +/-   ##
==========================================
+ Coverage   87.40%   87.68%   +0.27%     
==========================================
  Files         150      154       +4     
  Lines        2843     2906      +63     
  Branches      459      467       +8     
==========================================
+ Hits         2485     2548      +63     
- Misses        252      253       +1     
+ Partials      106      105       -1

Flag	Coverage Δ
unittest	`87.68% <94.28%> (+0.27%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/eslint-plugin-template/src/index.ts	`67.34% <0.00%> (+0.68%)`	⬆️
.../rules/accessibility-interactive-supports-focus.ts	`91.66% <91.66%> (ø)`
...t-plugin-template/src/utils/is-content-editable.ts	`100.00% <100.00%> (ø)`
...t-plugin-template/src/utils/is-disabled-element.ts	`100.00% <100.00%> (ø)`
...lement/get-non-interactive-element-role-schemas.ts	`100.00% <100.00%> (ø)`
...template/src/utils/is-interactive-element/index.ts	`100.00% <100.00%> (ø)`
.../accessibility-interactive-supports-focus/cases.ts	`100.00% <100.00%> (ø)`
... and 2 more

…dex to avoid when not needed

…ed test cases

…alid test descriptions

… key events

…us] prefix rule name

…us] supports contenteditable

sandikbarr · 2022-09-18T22:38:58Z

packages/eslint-plugin-template/src/rules/accessibility-interactive-supports-focus.ts

+          !tabIndex &&
+          !isInteractiveElement(node) &&
+          !isNonInteractiveRole(node) &&
+          !isContentEditable(node)


Update to support contenteditable: I was realizing I had used only (click) events in my test cases and updated some to use keyup, keydown, and keypress events and realized those key events might be used for contenteditable which is focusable and interactive by default.

sandikbarr · 2022-09-18T22:41:11Z

packages/eslint-plugin-template/src/configs/all.json

@@ -3,6 +3,7 @@
  "rules": {
    "@angular-eslint/template/accessibility-alt-text": "error",
    "@angular-eslint/template/accessibility-elements-content": "error",
+    "@angular-eslint/template/accessibility-interactive-supports-focus": "error",


I have updated the rule name to follow the accessibility- name prefix convention.

JamesHenry · 2022-09-26T11:56:56Z

@adbaran1 are you happy with the current state of this PR?

abaran30 · 2022-09-26T12:40:52Z

@adbaran1 are you happy with the current state of this PR?

Looks good to me! Thank you for making the adjustments @sandikbarr!

JamesHenry

Thanks @sandikbarr and @adbaran1!

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular-eslint/builder](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.1.2` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2fbuilder/14.1.2/14.2.0) | | [@angular-eslint/eslint-plugin](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.1.2` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2feslint-plugin/14.1.2/14.2.0) | | [@angular-eslint/eslint-plugin-template](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.1.2` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2feslint-plugin-template/14.1.2/14.2.0) | | [@angular-eslint/schematics](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.1.2` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2fschematics/14.1.2/14.2.0) | | [@angular-eslint/template-parser](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.1.2` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2ftemplate-parser/14.1.2/14.2.0) | --- ### Release Notes <details> <summary>angular-eslint/angular-eslint (@angular-eslint/builder)</summary> ### [`v14.2.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/builder/CHANGELOG.md#1420-httpsgithubcomangular-eslintangular-eslintcomparev1412v1420-2022-11-15) [Compare Source](angular-eslint/angular-eslint@v14.1.2...v14.2.0) **Note:** Version bump only for package [@angular-eslint/builder](https://github.com/angular-eslint/builder) #### [14.1.2](angular-eslint/angular-eslint@v14.1.1...v14.1.2) (2022-09-21) ##### Bug Fixes - **builder:** remove nrwl/devkit from builder implementation ([#1142](angular-eslint/angular-eslint#1142)) ([9d5a7fc](angular-eslint/angular-eslint@9d5a7fc)) #### [14.1.1](angular-eslint/angular-eslint@v14.1.0...v14.1.1) (2022-09-18) **Note:** Version bump only for package [@angular-eslint/builder](https://github.com/angular-eslint/builder) </details> <details> <summary>angular-eslint/angular-eslint (@angular-eslint/eslint-plugin)</summary> ### [`v14.2.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/eslint-plugin/CHANGELOG.md#1420-httpsgithubcomangular-eslintangular-eslintcomparev1412v1420-2022-11-15) [Compare Source](angular-eslint/angular-eslint@v14.1.2...v14.2.0) ##### Bug Fixes - update typescript-eslint packages to v5.38.1 ([#1152](angular-eslint/angular-eslint#1152)) ([8f6d0ef](angular-eslint/angular-eslint@8f6d0ef)) - update typescript-eslint packages to v5.43.0 ([#1190](angular-eslint/angular-eslint#1190)) ([2a4716a](angular-eslint/angular-eslint@2a4716a)) ##### Features - update typescript-eslint packages to v5.38.0 ([#1140](angular-eslint/angular-eslint#1140)) ([85b4b47](angular-eslint/angular-eslint@85b4b47)) #### [14.1.2](angular-eslint/angular-eslint@v14.1.1...v14.1.2) (2022-09-21) **Note:** Version bump only for package [@angular-eslint/eslint-plugin](https://github.com/angular-eslint/eslint-plugin) #### [14.1.1](angular-eslint/angular-eslint@v14.1.0...v14.1.1) (2022-09-18) ##### Bug Fixes - **eslint-plugin:** \[sort-ngmodule-metadata-arrays]: add intl support ([#1099](angular-eslint/angular-eslint#1099)) ([30d133b](angular-eslint/angular-eslint@30d133b)) </details> <details> <summary>angular-eslint/angular-eslint (@angular-eslint/eslint-plugin-template)</summary> ### [`v14.2.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/eslint-plugin-template/CHANGELOG.md#1420-httpsgithubcomangular-eslintangular-eslintcomparev1412v1420-2022-11-15) [Compare Source](angular-eslint/angular-eslint@v14.1.2...v14.2.0) ##### Bug Fixes - update dependency aria-query to v5.1.3 ([#1183](angular-eslint/angular-eslint#1183)) ([7c5b299](angular-eslint/angular-eslint@7c5b299)) - update dependency axobject-query to v3.1.1 ([#1184](angular-eslint/angular-eslint#1184)) ([dcfd43d](angular-eslint/angular-eslint@dcfd43d)) - update typescript-eslint packages to v5.38.1 ([#1152](angular-eslint/angular-eslint#1152)) ([8f6d0ef](angular-eslint/angular-eslint@8f6d0ef)) - update typescript-eslint packages to v5.43.0 ([#1190](angular-eslint/angular-eslint#1190)) ([2a4716a](angular-eslint/angular-eslint@2a4716a)) ##### Features - **eslint-plugin-template:** \[accessibility-interactive-supports-focus] add rule ([#1134](angular-eslint/angular-eslint#1134)) ([d99d8c1](angular-eslint/angular-eslint@d99d8c1)) - **eslint-plugin-template:** \[accessibility-role-has-required-aria] add rule ([#1100](angular-eslint/angular-eslint#1100)) ([f684df0](angular-eslint/angular-eslint@f684df0)) - **eslint-plugin-template:** \[attributes-order] add rule with fixer ([#1066](angular-eslint/angular-eslint#1066)) ([4c789c7](angular-eslint/angular-eslint@4c789c7)) - **eslint-plugin-template:** \[no-duplicate-attributes] Add option to ignore properties ([#1104](angular-eslint/angular-eslint#1104)) ([018d390](angular-eslint/angular-eslint@018d390)) - update typescript-eslint packages to v5.38.0 ([#1140](angular-eslint/angular-eslint#1140)) ([85b4b47](angular-eslint/angular-eslint@85b4b47)) #### [14.1.2](angular-eslint/angular-eslint@v14.1.1...v14.1.2) (2022-09-21) **Note:** Version bump only for package [@angular-eslint/eslint-plugin-template](https://github.com/angular-eslint/eslint-plugin-template) #### [14.1.1](angular-eslint/angular-eslint@v14.1.0...v14.1.1) (2022-09-18) ##### Bug Fixes - **eslint-plugin-template:** \[click-events-have-key-events]: handle additional outputs ([#1101](angular-eslint/angular-eslint#1101)) ([c608cdb](angular-eslint/angular-eslint@c608cdb)) </details> <details> <summary>angular-eslint/angular-eslint (@angular-eslint/schematics)</summary> ### [`v14.2.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/schematics/CHANGELOG.md#1420-httpsgithubcomangular-eslintangular-eslintcomparev1412v1420-2022-11-15) [Compare Source](angular-eslint/angular-eslint@v14.1.2...v14.2.0) ##### Bug Fixes - update dependency eslint to v8.27.0 ([#1189](angular-eslint/angular-eslint#1189)) ([d2ae95a](angular-eslint/angular-eslint@d2ae95a)) - update typescript-eslint packages to v5.38.1 ([#1152](angular-eslint/angular-eslint#1152)) ([8f6d0ef](angular-eslint/angular-eslint@8f6d0ef)) - update typescript-eslint packages to v5.43.0 ([#1190](angular-eslint/angular-eslint#1190)) ([2a4716a](angular-eslint/angular-eslint@2a4716a)) ##### Features - update dependency eslint to v8.24.0 ([#1148](angular-eslint/angular-eslint#1148)) ([5f30b2d](angular-eslint/angular-eslint@5f30b2d)) - update typescript-eslint packages to v5.38.0 ([#1140](angular-eslint/angular-eslint#1140)) ([85b4b47](angular-eslint/angular-eslint@85b4b47)) #### [14.1.2](angular-eslint/angular-eslint@v14.1.1...v14.1.2) (2022-09-21) **Note:** Version bump only for package [@angular-eslint/schematics](https://github.com/angular-eslint/schematics) #### [14.1.1](angular-eslint/angular-eslint@v14.1.0...v14.1.1) (2022-09-18) **Note:** Version bump only for package [@angular-eslint/schematics](https://github.com/angular-eslint/schematics) </details> <details> <summary>angular-eslint/angular-eslint (@angular-eslint/template-parser)</summary> ### [`v14.2.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/template-parser/CHANGELOG.md#1420-httpsgithubcomangular-eslintangular-eslintcomparev1412v1420-2022-11-15) [Compare Source](angular-eslint/angular-eslint@v14.1.2...v14.2.0) ##### Bug Fixes - update dependency eslint-scope to v7 ([#1156](angular-eslint/angular-eslint#1156)) ([05bd9e6](angular-eslint/angular-eslint@05bd9e6)) #### [14.1.2](angular-eslint/angular-eslint@v14.1.1...v14.1.2) (2022-09-21) **Note:** Version bump only for package [@angular-eslint/template-parser](https://github.com/angular-eslint/template-parser) #### [14.1.1](angular-eslint/angular-eslint@v14.1.0...v14.1.1) (2022-09-18) **Note:** Version bump only for package [@angular-eslint/template-parser](https://github.com/angular-eslint/template-parser) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1641 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

abaran30 reviewed Sep 16, 2022

View reviewed changes

sandikbarr added 7 commits September 18, 2022 11:47

feat(eslint-plugin-template): [interactive-supports-focus] add rule

fd8d75f

feat(eslint-plugin-template): [interactive-supports-focus] move tabin…

ef14892

…dex to avoid when not needed

feat(eslint-plugin-template): [interactive-supports-focus] add disabl…

355bcc4

…ed test cases

feat(eslint-plugin-template): [interactive-supports-focus] unique inv…

8e455cc

…alid test descriptions

feat(eslint-plugin-template): [interactive-supports-focus] tests with…

8a263ac

… key events

feat(eslint-plugin-template): [accessibility-interactive-supports-foc…

b2d6a47

…us] prefix rule name

feat(eslint-plugin-template): [accessibility-interactive-supports-foc…

486a6f7

…us] supports contenteditable

sandikbarr force-pushed the feat/template/interactive-supports-focus branch from f10937a to 486a6f7 Compare September 18, 2022 22:35

sandikbarr commented Sep 18, 2022

View reviewed changes

sandikbarr changed the title ~~feat(eslint-plugin-template): [interactive-supports-focus] add rule~~ feat(eslint-plugin-template): [accessibility-interactive-supports-focus] add rule Sep 18, 2022

abaran30 approved these changes Sep 26, 2022

View reviewed changes

JamesHenry approved these changes Sep 26, 2022

View reviewed changes

JamesHenry merged commit d99d8c1 into angular-eslint:main Sep 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(eslint-plugin-template): [accessibility-interactive-supports-focus] add rule #1134

feat(eslint-plugin-template): [accessibility-interactive-supports-focus] add rule #1134

sandikbarr commented Sep 16, 2022 •

edited

nx-cloud bot commented Sep 16, 2022 •

edited

codecov bot commented Sep 18, 2022 •

edited

sandikbarr Sep 18, 2022

sandikbarr Sep 18, 2022

JamesHenry commented Sep 26, 2022

abaran30 commented Sep 26, 2022

JamesHenry left a comment

feat(eslint-plugin-template): [accessibility-interactive-supports-focus] add rule #1134

feat(eslint-plugin-template): [accessibility-interactive-supports-focus] add rule #1134

Conversation

sandikbarr commented Sep 16, 2022 • edited

nx-cloud bot commented Sep 16, 2022 • edited

☁️ Nx Cloud Report

codecov bot commented Sep 18, 2022 • edited

Codecov Report

sandikbarr Sep 18, 2022

Choose a reason for hiding this comment

sandikbarr Sep 18, 2022

Choose a reason for hiding this comment

JamesHenry commented Sep 26, 2022

abaran30 commented Sep 26, 2022

JamesHenry left a comment

Choose a reason for hiding this comment

sandikbarr commented Sep 16, 2022 •

edited

nx-cloud bot commented Sep 16, 2022 •

edited

codecov bot commented Sep 18, 2022 •

edited