From 147aca76c5ba37175fccc0d2823d66b5fc77d771 Mon Sep 17 00:00:00 2001
From: Hikaru Yoshino <osushicrusher@gmail.com>
Date: Sun, 17 Dec 2023 20:38:05 +0900
Subject: [PATCH 1/4] feat(linter): eslint-plugin-jsx-a11y no-access-key rule

---
 crates/oxc_linter/src/rules.rs                |  2 +
 .../src/rules/jsx_a11y/no_access_key.rs       | 92 ++++++++++++++++++
 .../src/snapshots/no_access_key.snap.new      | 94 +++++++++++++++++++
 3 files changed, 188 insertions(+)
 create mode 100644 crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
 create mode 100644 crates/oxc_linter/src/snapshots/no_access_key.snap.new

diff --git a/crates/oxc_linter/src/rules.rs b/crates/oxc_linter/src/rules.rs
index c1a9d3989a6df..aa6d7efedd7ac 100644
--- a/crates/oxc_linter/src/rules.rs
+++ b/crates/oxc_linter/src/rules.rs
@@ -234,6 +234,7 @@ mod jsx_a11y {
     pub mod html_has_lang;
     pub mod iframe_has_title;
     pub mod img_redundant_alt;
+    pub mod no_access_key;
     pub mod no_autofocus;
     pub mod scope;
     pub mod tab_index_no_positive;
@@ -450,6 +451,7 @@ oxc_macros::declare_all_lint_rules! {
     jsx_a11y::html_has_lang,
     jsx_a11y::iframe_has_title,
     jsx_a11y::img_redundant_alt,
+    jsx_a11y::no_access_key,
     jsx_a11y::no_autofocus,
     jsx_a11y::scope,
     jsx_a11y::tab_index_no_positive,
diff --git a/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs b/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
new file mode 100644
index 0000000000000..4b3ea77f2c5cf
--- /dev/null
+++ b/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
@@ -0,0 +1,92 @@
+use oxc_ast::{
+    ast::{JSXAttributeValue, JSXElementName, JSXExpression, JSXExpressionContainer},
+    AstKind,
+};
+use oxc_diagnostics::{
+    miette::{self, Diagnostic},
+    thiserror::Error,
+};
+use oxc_macros::declare_oxc_lint;
+use oxc_span::Span;
+
+use crate::{
+    context::LintContext,
+    rule::Rule,
+    utils::{get_prop_value, has_jsx_prop_lowercase},
+    AstNode,
+};
+
+#[derive(Debug, Error, Diagnostic)]
+#[error("eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.")]
+#[diagnostic(severity(warning), help("Remove the accessKey attribute."))]
+struct NoAccessKeyDiagnostic(#[label] pub Span);
+
+#[derive(Debug, Default, Clone)]
+pub struct NoAccessKey;
+
+declare_oxc_lint!(
+    /// ### What it does
+    /// Enforces that the `accessKey` prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
+    ///
+    /// ### Why is this bad?
+    /// Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements.
+    /// Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create accessibility complications so to avoid complications, access keys should not be used.
+    ///
+    /// ### Example
+    /// ```javascript
+    /// // Bad
+    /// <div accessKey="h" />
+    ///
+    /// // Good
+    /// <div />
+    /// ```
+    NoAccessKey,
+    correctness
+);
+
+impl Rule for NoAccessKey {
+    fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) {
+        let AstKind::JSXOpeningElement(jsx_el) = node.kind() else { return };
+        let JSXElementName::Identifier(iden) = &jsx_el.name else {
+            return;
+        };
+        if let Some(access_key_prop) = has_jsx_prop_lowercase(jsx_el, "accessKey") {
+            if let Some(JSXAttributeValue::StringLiteral(_)) = get_prop_value(access_key_prop) {
+                ctx.diagnostic(NoAccessKeyDiagnostic(iden.span));
+            }
+            if let Some(JSXAttributeValue::ExpressionContainer(JSXExpressionContainer {
+                expression: JSXExpression::Expression(expr),
+                ..
+            })) = get_prop_value(access_key_prop)
+            {
+                if expr.is_identifier_reference() & expr.is_undefined() {
+                    return;
+                }
+                ctx.diagnostic(NoAccessKeyDiagnostic(iden.span));
+            }
+        }
+    }
+}
+
+#[test]
+fn test() {
+    use crate::tester::Tester;
+
+    let pass = vec![r"<div />;", r"<div {...props} />", r"<div accessKey={undefined} />"];
+
+    let fail = vec![
+        r#"<div accesskey="h" />"#,
+        r#"<div accessKey="h" />"#,
+        r#"<div accessKey="h" {...props} />"#,
+        r#"<div acCesSKeY="y" />"#,
+        r#"<div accessKey={"y"} />"#,
+        r"<div accessKey={`${y}`} />",
+        r"<div accessKey={`${undefined}y${undefined}`} />",
+        r"<div accessKey={`This is ${bad}`} />",
+        r"<div accessKey={accessKey} />",
+        r"<div accessKey={`${undefined}`} />",
+        r"<div accessKey={`${undefined}${undefined}`} />",
+    ];
+
+    Tester::new_without_config(NoAccessKey::NAME, pass, fail).test_and_snapshot();
+}
diff --git a/crates/oxc_linter/src/snapshots/no_access_key.snap.new b/crates/oxc_linter/src/snapshots/no_access_key.snap.new
new file mode 100644
index 0000000000000..3f0a4d65d2be0
--- /dev/null
+++ b/crates/oxc_linter/src/snapshots/no_access_key.snap.new
@@ -0,0 +1,94 @@
+---
+source: crates/oxc_linter/src/tester.rs
+assertion_line: 119
+expression: no_access_key
+---
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accesskey="h" />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey="h" />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey="h" {...props} />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div acCesSKeY="y" />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey={"y"} />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey={`${y}`} />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey={`${undefined}y${undefined}`} />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey={`This is ${bad}`} />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey={accessKey} />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey={`${undefined}`} />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
+  │ a11y complications.
+   ╭─[no_access_key.tsx:1:1]
+ 1 │ <div accessKey={`${undefined}${undefined}`} />
+   ·  ───
+   ╰────
+  help: Remove the accessKey attribute.
+
+

From 59750ddedc8694207be9e102a031a67198768279 Mon Sep 17 00:00:00 2001
From: Hikaru Yoshino <osushicrusher@gmail.com>
Date: Sun, 17 Dec 2023 20:58:19 +0900
Subject: [PATCH 2/4] chore(linter): update snapshot for no_access_key rule

---
 .../src/snapshots/{no_access_key.snap.new => no_access_key.snap} | 1 -
 1 file changed, 1 deletion(-)
 rename crates/oxc_linter/src/snapshots/{no_access_key.snap.new => no_access_key.snap} (99%)

diff --git a/crates/oxc_linter/src/snapshots/no_access_key.snap.new b/crates/oxc_linter/src/snapshots/no_access_key.snap
similarity index 99%
rename from crates/oxc_linter/src/snapshots/no_access_key.snap.new
rename to crates/oxc_linter/src/snapshots/no_access_key.snap
index 3f0a4d65d2be0..d6aebaf29dcd4 100644
--- a/crates/oxc_linter/src/snapshots/no_access_key.snap.new
+++ b/crates/oxc_linter/src/snapshots/no_access_key.snap
@@ -1,6 +1,5 @@
 ---
 source: crates/oxc_linter/src/tester.rs
-assertion_line: 119
 expression: no_access_key
 ---
   ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create

From a76643009a0ae952b3e0402eef71d46e8ad24b44 Mon Sep 17 00:00:00 2001
From: Hikaru Yoshino <osushicrusher@gmail.com>
Date: Mon, 18 Dec 2023 12:24:28 +0900
Subject: [PATCH 3/4] chore(linter): change span to report on the accesskey
 prop

---
 .../src/rules/jsx_a11y/no_access_key.rs       | 39 ++++++++-----------
 .../src/snapshots/no_access_key.snap          | 22 +++++------
 2 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs b/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
index 4b3ea77f2c5cf..002cfb725b917 100644
--- a/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
+++ b/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
@@ -1,5 +1,5 @@
 use oxc_ast::{
-    ast::{JSXAttributeValue, JSXElementName, JSXExpression, JSXExpressionContainer},
+    ast::{JSXAttributeItem, JSXAttributeValue, JSXExpression, JSXExpressionContainer},
     AstKind,
 };
 use oxc_diagnostics::{
@@ -9,12 +9,7 @@ use oxc_diagnostics::{
 use oxc_macros::declare_oxc_lint;
 use oxc_span::Span;
 
-use crate::{
-    context::LintContext,
-    rule::Rule,
-    utils::{get_prop_value, has_jsx_prop_lowercase},
-    AstNode,
-};
+use crate::{context::LintContext, rule::Rule, utils::has_jsx_prop_lowercase, AstNode};
 
 #[derive(Debug, Error, Diagnostic)]
 #[error("eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.")]
@@ -47,22 +42,22 @@ declare_oxc_lint!(
 impl Rule for NoAccessKey {
     fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) {
         let AstKind::JSXOpeningElement(jsx_el) = node.kind() else { return };
-        let JSXElementName::Identifier(iden) = &jsx_el.name else {
-            return;
-        };
-        if let Some(access_key_prop) = has_jsx_prop_lowercase(jsx_el, "accessKey") {
-            if let Some(JSXAttributeValue::StringLiteral(_)) = get_prop_value(access_key_prop) {
-                ctx.diagnostic(NoAccessKeyDiagnostic(iden.span));
-            }
-            if let Some(JSXAttributeValue::ExpressionContainer(JSXExpressionContainer {
-                expression: JSXExpression::Expression(expr),
-                ..
-            })) = get_prop_value(access_key_prop)
-            {
-                if expr.is_identifier_reference() & expr.is_undefined() {
-                    return;
+        if let Some(JSXAttributeItem::Attribute(attr)) = has_jsx_prop_lowercase(jsx_el, "accessKey")
+        {
+            match attr.value.as_ref() {
+                Some(JSXAttributeValue::StringLiteral(_)) => {
+                    ctx.diagnostic(NoAccessKeyDiagnostic(attr.span));
+                }
+                Some(JSXAttributeValue::ExpressionContainer(JSXExpressionContainer {
+                    expression: JSXExpression::Expression(expr),
+                    ..
+                })) => {
+                    if expr.is_identifier_reference() & expr.is_undefined() {
+                        return;
+                    }
+                    ctx.diagnostic(NoAccessKeyDiagnostic(attr.span));
                 }
-                ctx.diagnostic(NoAccessKeyDiagnostic(iden.span));
+                _ => {}
             }
         }
     }
diff --git a/crates/oxc_linter/src/snapshots/no_access_key.snap b/crates/oxc_linter/src/snapshots/no_access_key.snap
index d6aebaf29dcd4..de7612814f9e9 100644
--- a/crates/oxc_linter/src/snapshots/no_access_key.snap
+++ b/crates/oxc_linter/src/snapshots/no_access_key.snap
@@ -6,7 +6,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accesskey="h" />
-   ·  ───
+   ·      ─────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -14,7 +14,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey="h" />
-   ·  ───
+   ·      ─────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -22,7 +22,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey="h" {...props} />
-   ·  ───
+   ·      ─────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -30,7 +30,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div acCesSKeY="y" />
-   ·  ───
+   ·      ─────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -38,7 +38,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={"y"} />
-   ·  ───
+   ·      ───────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -46,7 +46,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`${y}`} />
-   ·  ───
+   ·      ──────────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -54,7 +54,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`${undefined}y${undefined}`} />
-   ·  ───
+   ·      ───────────────────────────────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -62,7 +62,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`This is ${bad}`} />
-   ·  ───
+   ·      ────────────────────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -70,7 +70,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={accessKey} />
-   ·  ───
+   ·      ─────────────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -78,7 +78,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`${undefined}`} />
-   ·  ───
+   ·      ──────────────────────────
    ╰────
   help: Remove the accessKey attribute.
 
@@ -86,7 +86,7 @@ expression: no_access_key
   │ a11y complications.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`${undefined}${undefined}`} />
-   ·  ───
+   ·      ──────────────────────────────────────
    ╰────
   help: Remove the accessKey attribute.
 

From f70b9135dfdaaefae41d5ef8e0df357b712cefd0 Mon Sep 17 00:00:00 2001
From: Hikaru Yoshino <osushicrusher@gmail.com>
Date: Mon, 18 Dec 2023 17:26:44 +0900
Subject: [PATCH 4/4] chore(linter): move a part of the error message to help.

---
 .../src/rules/jsx_a11y/no_access_key.rs       |  4 +-
 .../src/snapshots/no_access_key.snap          | 55 ++++++++-----------
 2 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs b/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
index 002cfb725b917..25aef593b9d1a 100644
--- a/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
+++ b/crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs
@@ -12,8 +12,8 @@ use oxc_span::Span;
 use crate::{context::LintContext, rule::Rule, utils::has_jsx_prop_lowercase, AstNode};
 
 #[derive(Debug, Error, Diagnostic)]
-#[error("eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.")]
-#[diagnostic(severity(warning), help("Remove the accessKey attribute."))]
+#[error("eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.")]
+#[diagnostic(severity(warning), help("Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications."))]
 struct NoAccessKeyDiagnostic(#[label] pub Span);
 
 #[derive(Debug, Default, Clone)]
diff --git a/crates/oxc_linter/src/snapshots/no_access_key.snap b/crates/oxc_linter/src/snapshots/no_access_key.snap
index de7612814f9e9..f24e18d0ed407 100644
--- a/crates/oxc_linter/src/snapshots/no_access_key.snap
+++ b/crates/oxc_linter/src/snapshots/no_access_key.snap
@@ -2,92 +2,81 @@
 source: crates/oxc_linter/src/tester.rs
 expression: no_access_key
 ---
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accesskey="h" />
    ·      ─────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey="h" />
    ·      ─────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey="h" {...props} />
    ·      ─────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div acCesSKeY="y" />
    ·      ─────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={"y"} />
    ·      ───────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`${y}`} />
    ·      ──────────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`${undefined}y${undefined}`} />
    ·      ───────────────────────────────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`This is ${bad}`} />
    ·      ────────────────────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={accessKey} />
    ·      ─────────────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`${undefined}`} />
    ·      ──────────────────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.
 
-  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create
-  │ a11y complications.
+  ⚠ eslint-plugin-jsx-a11y(no-access-key): No access key attribute allowed.
    ╭─[no_access_key.tsx:1:1]
  1 │ <div accessKey={`${undefined}${undefined}`} />
    ·      ──────────────────────────────────────
    ╰────
-  help: Remove the accessKey attribute.
+  help: Remove the accessKey attribute. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create a11y complications.