[Docs] no-noninteractive-tabindex, no-static-element-interactions…

…: document `allowExpressionValues`
jsx-eslint · Jul 7, 2022 · 0c19f02 · 0c19f02
1 parent e7d405d
commit 0c19f02
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/docs/rules/no-noninteractive-tabindex.md b/docs/rules/no-noninteractive-tabindex.md
@@ -50,7 +50,7 @@ If you know that a particular element will be scrollable, you might want to add
 
 ```jsx
 // eslint-disable-next-line no-noninteractive-tabindex
-<pre tabIndex="0"> 
+<pre tabIndex="0">
   <code>{someLongCode}</code>
 </pre>
 ```
@@ -65,9 +65,16 @@ The recommended options for this rule allow `tabIndex` on elements with the noni
   {
     tags: [],
     roles: ['tabpanel'],
+    allowExpressionValues: true,
   },
 ]
 ```
+The `allowExpressionValues` option determines whether the `role` attribute is allowed to be assigned using an expression. For example, the following would pass in recommended mode if `allowExpressionValues` is set to be `true`:
+```jsx
+<div role={ROLE_BUTTON} onClick={() => {}} tabIndex="0" />;
+// In case of a conditional expression, there should be literals on both sides of ternary operator
+<div role={isButton ? "button" : "link"} onClick={() => {}} tabIndex="0" />;
+```
 
 ### Succeed
 ```jsx

diff --git a/docs/rules/no-static-element-interactions.md b/docs/rules/no-static-element-interactions.md
@@ -55,7 +55,7 @@ Do not use the role `presentation` on the element: it removes the element's sema
 
 ## Rule details
 
-You may configure which handler props should be taken into account when applying this rule. The recommended configuration includes the following 6 handlers.
+You may configure which handler props should be taken into account when applying this rule. The recommended configuration includes the following 6 handlers and the `allowExpressionValues` option.
 
 ```javascript
 'jsx-a11y/no-static-element-interactions': [
@@ -69,12 +69,20 @@ You may configure which handler props should be taken into account when applying
       'onKeyDown',
       'onKeyUp',
     ],
+    allowExpressionValues: true,
   },
 ],
 ```
 
 Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
 
+The `allowExpressionValues` option determines whether the `role` attribute is allowed to be assigned using an expression. For example, the following would pass in recommended mode if `allowExpressionValues` is set to be `true`:
+```jsx
+<div role={ROLE_BUTTON} onClick={() => {}} />;
+// In case of a conditional expression, there should be literals on both sides of ternary operator
+<div role={isButton ? "button" : "link"} onClick={() => {}} />;
+```
+
 ### Succeed
 
 ```jsx