react-a11y.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. module.exports = {
  2. plugins: [
  3. 'jsx-a11y',
  4. 'react'
  5. ],
  6. parserOptions: {
  7. ecmaFeatures: {
  8. jsx: true,
  9. },
  10. },
  11. rules: {
  12. // ensure emoji are accessible
  13. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md
  14. // disabled; rule is deprecated
  15. 'jsx-a11y/accessible-emoji': 'off',
  16. // Enforce that all elements that require alternative text have meaningful information
  17. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md
  18. 'jsx-a11y/alt-text': ['error', {
  19. elements: ['img', 'object', 'area', 'input[type="image"]'],
  20. img: [],
  21. object: [],
  22. area: [],
  23. 'input[type="image"]': [],
  24. }],
  25. // Enforce that anchors have content
  26. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md
  27. 'jsx-a11y/anchor-has-content': ['error', { components: [] }],
  28. // ensure <a> tags are valid
  29. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/0745af376cdc8686d85a361ce36952b1fb1ccf6e/docs/rules/anchor-is-valid.md
  30. 'jsx-a11y/anchor-is-valid': ['error', {
  31. components: ['Link'],
  32. specialLink: ['to'],
  33. aspects: ['noHref', 'invalidHref', 'preferButton'],
  34. }],
  35. // elements with aria-activedescendant must be tabbable
  36. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md
  37. 'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
  38. // Enforce all aria-* props are valid.
  39. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md
  40. 'jsx-a11y/aria-props': 'error',
  41. // Enforce ARIA state and property values are valid.
  42. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md
  43. 'jsx-a11y/aria-proptypes': 'error',
  44. // Require ARIA roles to be valid and non-abstract
  45. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md
  46. 'jsx-a11y/aria-role': ['error', { ignoreNonDOM: false }],
  47. // Enforce that elements that do not support ARIA roles, states, and
  48. // properties do not have those attributes.
  49. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md
  50. 'jsx-a11y/aria-unsupported-elements': 'error',
  51. // Ensure the autocomplete attribute is correct and suitable for the form field it is used with
  52. // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/29c68596b15c4ff0a40daae6d4a2670e36e37d35/docs/rules/autocomplete-valid.md
  53. 'jsx-a11y/autocomplete-valid': ['off', {
  54. inputComponents: [],
  55. }],
  56. // require onClick be accompanied by onKeyUp/onKeyDown/onKeyPress
  57. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
  58. 'jsx-a11y/click-events-have-key-events': 'error',
  59. // Enforce that a control (an interactive element) has a text label.
  60. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md
  61. 'jsx-a11y/control-has-associated-label': ['error', {
  62. labelAttributes: ['label'],
  63. controlComponents: [],
  64. ignoreElements: [
  65. 'audio',
  66. 'canvas',
  67. 'embed',
  68. 'input',
  69. 'textarea',
  70. 'tr',
  71. 'video',
  72. ],
  73. ignoreRoles: [
  74. 'grid',
  75. 'listbox',
  76. 'menu',
  77. 'menubar',
  78. 'radiogroup',
  79. 'row',
  80. 'tablist',
  81. 'toolbar',
  82. 'tree',
  83. 'treegrid',
  84. ],
  85. depth: 5,
  86. }],
  87. // ensure <hX> tags have content and are not aria-hidden
  88. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md
  89. 'jsx-a11y/heading-has-content': ['error', { components: [''] }],
  90. // require HTML elements to have a "lang" prop
  91. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md
  92. 'jsx-a11y/html-has-lang': 'error',
  93. // ensure iframe elements have a unique title
  94. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md
  95. 'jsx-a11y/iframe-has-title': 'error',
  96. // Prevent img alt text from containing redundant words like "image", "picture", or "photo"
  97. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md
  98. 'jsx-a11y/img-redundant-alt': 'error',
  99. // Elements with an interactive role and interaction handlers must be focusable
  100. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/interactive-supports-focus.md
  101. 'jsx-a11y/interactive-supports-focus': 'error',
  102. // Enforce that a label tag has a text label and an associated control.
  103. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/b800f40a2a69ad48015ae9226fbe879f946757ed/docs/rules/label-has-associated-control.md
  104. 'jsx-a11y/label-has-associated-control': ['error', {
  105. labelComponents: [],
  106. labelAttributes: [],
  107. controlComponents: [],
  108. assert: 'both',
  109. depth: 25
  110. }],
  111. // require HTML element's lang prop to be valid
  112. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/lang.md
  113. 'jsx-a11y/lang': 'error',
  114. // media elements must have captions
  115. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/media-has-caption.md
  116. 'jsx-a11y/media-has-caption': ['error', {
  117. audio: [],
  118. video: [],
  119. track: [],
  120. }],
  121. // require that mouseover/out come with focus/blur, for keyboard-only users
  122. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
  123. 'jsx-a11y/mouse-events-have-key-events': 'error',
  124. // Prevent use of `accessKey`
  125. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md
  126. 'jsx-a11y/no-access-key': 'error',
  127. // prohibit autoFocus prop
  128. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md
  129. 'jsx-a11y/no-autofocus': ['error', { ignoreNonDOM: true }],
  130. // prevent distracting elements, like <marquee> and <blink>
  131. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md
  132. 'jsx-a11y/no-distracting-elements': ['error', {
  133. elements: ['marquee', 'blink'],
  134. }],
  135. // WAI-ARIA roles should not be used to convert an interactive element to non-interactive
  136. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-interactive-element-to-noninteractive-role.md
  137. 'jsx-a11y/no-interactive-element-to-noninteractive-role': ['error', {
  138. tr: ['none', 'presentation'],
  139. }],
  140. // A non-interactive element does not support event handlers (mouse and key handlers)
  141. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md
  142. 'jsx-a11y/no-noninteractive-element-interactions': ['error', {
  143. handlers: [
  144. 'onClick',
  145. 'onMouseDown',
  146. 'onMouseUp',
  147. 'onKeyPress',
  148. 'onKeyDown',
  149. 'onKeyUp',
  150. ]
  151. }],
  152. // WAI-ARIA roles should not be used to convert a non-interactive element to interactive
  153. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md
  154. 'jsx-a11y/no-noninteractive-element-to-interactive-role': ['error', {
  155. ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
  156. ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
  157. li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
  158. table: ['grid'],
  159. td: ['gridcell'],
  160. }],
  161. // Tab key navigation should be limited to elements on the page that can be interacted with.
  162. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-tabindex.md
  163. 'jsx-a11y/no-noninteractive-tabindex': ['error', {
  164. tags: [],
  165. roles: ['tabpanel'],
  166. }],
  167. // require onBlur instead of onChange
  168. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
  169. 'jsx-a11y/no-onchange': 'off',
  170. // ensure HTML elements do not specify redundant ARIA roles
  171. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md
  172. 'jsx-a11y/no-redundant-roles': 'error',
  173. // Enforce that DOM elements without semantic behavior not have interaction handlers
  174. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
  175. 'jsx-a11y/no-static-element-interactions': ['error', {
  176. handlers: [
  177. 'onClick',
  178. 'onMouseDown',
  179. 'onMouseUp',
  180. 'onKeyPress',
  181. 'onKeyDown',
  182. 'onKeyUp',
  183. ]
  184. }],
  185. // Enforce that elements with ARIA roles must have all required attributes
  186. // for that role.
  187. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md
  188. 'jsx-a11y/role-has-required-aria-props': 'error',
  189. // Enforce that elements with explicit or implicit roles defined contain
  190. // only aria-* properties supported by that role.
  191. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md
  192. 'jsx-a11y/role-supports-aria-props': 'error',
  193. // only allow <th> to have the "scope" attr
  194. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md
  195. 'jsx-a11y/scope': 'error',
  196. // Enforce tabIndex value is not greater than zero.
  197. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/tabindex-no-positive.md
  198. 'jsx-a11y/tabindex-no-positive': 'error',
  199. // ----------------------------------------------------
  200. // Rules that no longer exist in eslint-plugin-jsx-a11y
  201. // ----------------------------------------------------
  202. // require that JSX labels use "htmlFor"
  203. // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
  204. // deprecated: replaced by `label-has-associated-control` rule
  205. 'jsx-a11y/label-has-for': ['off', {
  206. components: [],
  207. required: {
  208. every: ['nesting', 'id'],
  209. },
  210. allowChildren: false,
  211. }],
  212. },
  213. };