[Docs] examples: add language in code block for syntax highlight

jsx-eslint · Oct 25, 2019 · 82f598e · 82f598e
1 parent 00926f2
commit 82f598e
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -169,7 +169,7 @@ Rule | Recommended | Strict
 The following rules have extra options when in *recommended* mode:
 
 #### no-interactive-element-to-noninteractive-role
-```
+```js
 'jsx-a11y/no-interactive-element-to-noninteractive-role': [
   'error',
   {
@@ -179,7 +179,7 @@ The following rules have extra options when in *recommended* mode:
 ```
 
 #### no-noninteractive-element-interactions
-```
+```js
 'jsx-a11y/no-noninteractive-element-interactions': [
   'error',
   {
@@ -196,7 +196,7 @@ The following rules have extra options when in *recommended* mode:
 ```
 
 #### no-noninteractive-element-to-interactive-role
-```
+```js
 'jsx-a11y/no-noninteractive-element-to-interactive-role': [
   'error',
   {
@@ -226,7 +226,7 @@ The following rules have extra options when in *recommended* mode:
 ```
 
 #### no-noninteractive-tabindex
-```
+```js
 'jsx-a11y/no-noninteractive-tabindex': [
   'error',
   {
@@ -237,7 +237,7 @@ The following rules have extra options when in *recommended* mode:
 ```
 
 #### no-static-element-interactions
-```
+```js
 'jsx-a11y/no-noninteractive-element-interactions': [
   'error',
   {

diff --git a/docs/rules/aria-role.md b/docs/rules/aria-role.md
@@ -9,7 +9,7 @@ Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference t
 
 This rule takes one optional object argument of type object:
 
-```
+```json
 {
     "rules": {
         "jsx-a11y/aria-role": [ 2, {

diff --git a/docs/rules/interactive-supports-focus.md b/docs/rules/interactive-supports-focus.md
@@ -10,7 +10,7 @@ This element is a stand-alone control like a button, a link or a form element. A
 
 Add the `tabIndex` property to your component. A value of zero indicates that this element can be tabbed to.
 
-```
+```jsx
 <div
   role="button"
   tabIndex={0} />
@@ -26,7 +26,7 @@ Generally buttons, links and form elements should be reachable via tab key press
 
 This element is part of a group of buttons, links, menu items, etc. Or this element is part of a composite widget. Composite widgets prescribe standard [keyboard interaction patterns](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav). Within a group of similar elements -- like a button bar -- or within a composite widget, elements that can be focused are given a tabindex of -1. This makes the element *focusable* but not *tabbable*. Generally one item in a group should have a tabindex of zero so that a user can tab to the component. Once an element in the component has focus, your key management behaviors will control traversal within the component's pieces. As the UI author, you will need to implement the key handling behaviors such as listening for traversal key (up/down/left/right) presses and moving the page focus between the focusable elements in your widget.
 
-```
+```jsx
 <div role="menu">
   <div role="menuitem" tabIndex="0">Open</div>
   <div role="menuitem" tabIndex="-1">Save</div>
@@ -40,7 +40,7 @@ In the example above, the first item in the group can be tabbed to. The develope
 
 If your element is catching bubbled click or key events from descendant elements, then the proper role for this element is `presentation`.
 
-```
+```jsx
 <div
   onClick={onClickHandler}
   role="presentation">
@@ -60,28 +60,30 @@ Marking an element with the role `presentation` indicates to assistive technolog
 
 This rule takes an options object with the key `tabbable`. The value is an array of interactive ARIA roles that should be considered tabbable, not just focusable. Any interactive role not included in this list will be flagged as needing to be focusable (tabindex of -1).
 
-```
-'jsx-a11y/interactive-supports-focus': [
-  'error',
-  {
-    tabbable: [
-      'button',
-      'checkbox',
-      'link',
-      'searchbox',
-      'spinbutton',
-      'switch',
-      'textbox',
-    ],
-  },
-]
+```js
+{
+  'jsx-a11y/interactive-supports-focus': [
+    'error',
+    {
+      tabbable: [
+        'button',
+        'checkbox',
+        'link',
+        'searchbox',
+        'spinbutton',
+        'switch',
+        'textbox',
+      ],
+    },
+  ]
+}
 ```
 
 The recommended options list interactive roles that act as form elements. Generally, elements with a role like `menuitem` are a part of a composite widget. Focus in a composite widget is controlled and moved programmatically to satisfy the prescribed [keyboard interaction pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav) for the widget.
 
 The list of possible values includes:
 
-```
+```js
 [
   'button',
   'checkbox',

diff --git a/docs/rules/no-autofocus.md b/docs/rules/no-autofocus.md
@@ -9,7 +9,7 @@ Enforce that autoFocus prop is not used on elements. Autofocusing elements can c
 
 This rule takes one optional object argument of type object:
 
-```
+```json
 {
     "rules": {
         "jsx-a11y/no-autofocus": [ 2, {

diff --git a/docs/rules/no-interactive-element-to-noninteractive-role.md b/docs/rules/no-interactive-element-to-noninteractive-role.md
@@ -12,7 +12,7 @@ Non-interactive HTML elements and non-interactive ARIA roles indicate _content_
 
 Wrap your interactive element in a `<div>` with the desired role.
 
-```
+```jsx
 <div role="article">
   <button>Save</button>
 </div>
@@ -22,7 +22,7 @@ Wrap your interactive element in a `<div>` with the desired role.
 
 Put the content inside your interactive element.
 
-```
+```jsx
 <div
   role="button"
   onClick={() => {}}
@@ -45,7 +45,7 @@ The recommended options for this rule allow the `tr` element to be given a role
 
 Options are provided as an object keyed by HTML element name; the value is an array of interactive roles that are allowed on the specified element.
 
-```
+```js
 {
   'no-interactive-element-to-noninteractive-role': [
     'error',
@@ -58,6 +58,6 @@ Options are provided as an object keyed by HTML element name; the value is an ar
 
 Under the recommended options, the following code is valid. It would be invalid under the strict rules.
 
-```
+```jsx
 <tr role="presentation" />
 ```
diff --git a/docs/rules/no-noninteractive-element-interactions.md b/docs/rules/no-noninteractive-element-interactions.md
@@ -29,7 +29,7 @@ see [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://w
 
 Move the event handler function to an inner element like `<div>` and give that element a role of `presentation`. This leaves the _content_ or _container_ semantic value of this element intact.
 
-```
+```jsx
 <div role="article">
   <div
     onClick="onClickHandler"
@@ -65,7 +65,7 @@ You have two options in this case.
 
 For instance, move the button inside the cell:
 
-```
+```jsx
 <table>
   <tr>
     <td><button>Sort</button></td>
@@ -79,7 +79,7 @@ This preserves the table cell semantics and the button semantics; the two are no
 
 If your user interface has a table-like layout, but is filled with interactive components in the cells, consider converting the table into a grid.
 
-```
+```jsx
 <table role="grid">
   <tr>
     <td role="gridcell" onClick={this.sort}>Sort</td>

diff --git a/docs/rules/no-noninteractive-element-to-interactive-role.md b/docs/rules/no-noninteractive-element-to-interactive-role.md
@@ -13,7 +13,7 @@ Interactive HTML elements indicate _controls_ in the user interface. Interactive
 
 Put the control inside the non-interactive container element.
 
-```
+```jsx
 <li>
   <div
     role="button"
@@ -26,7 +26,7 @@ Put the control inside the non-interactive container element.
 
 Or wrap the content inside your interactive element.
 
-```
+```jsx
 <div
   role="button"
   onClick={() => {}}
@@ -47,7 +47,7 @@ Or wrap the content inside your interactive element.
 
 The recommended options for this rule allow several common interactive roles to be applied to a non-interactive element. The options are provided as an object keyed by HTML element name; the value is an array of interactive roles that are allowed on the specified element.
 
-```
+```js
 {
   'no-noninteractive-element-to-interactive-role': [
     'error',
@@ -64,6 +64,6 @@ The recommended options for this rule allow several common interactive roles to
 
 Under the recommended options, the following code is valid. It would be invalid under the strict rules.
 
-```
+```jsx
 <ul role="menu" />
 ```
diff --git a/docs/rules/no-noninteractive-tabindex.md b/docs/rules/no-noninteractive-tabindex.md
@@ -8,7 +8,7 @@ Tab key navigation should be limited to elements on the page that can be interac
 
 The `<a>` tag is tricky. Consider the following:
 
-```
+```jsx
 <a>Edit</a>
 <a href="#">Edit</a>
 <a role="button">Edit</a>

diff --git a/docs/rules/no-redundant-roles.md b/docs/rules/no-redundant-roles.md
@@ -9,7 +9,7 @@ Some HTML elements have native semantics that are implemented by the browser. Th
 
 The default options for this rule allow an implicit role of `navigation` to be applied to a `nav` element as is [advised by w3](https://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example:The_.3Cnav.3E_element). The options are provided as an object keyed by HTML element name; the value is an array of implicit ARIA roles that are allowed on the specified element.
 
-```
+```js
 {
   'jsx-a11y/no-redundant-roles': [
   'error',