---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
/* Interactive elements */
<a href="http://x.y.z" role="img" />;
<a href="http://x.y.z" tabIndex="0" role="img" />;
/* All flavors of input */
<input role="img" />;
<input type="img" role="img" />;
<input type="checkbox" role="img" />;
<input type="color" role="img" />;
<input type="date" role="img" />;
<input type="datetime" role="img" />;
<input type="datetime-local" role="img" />;
<input type="email" role="img" />;
<input type="file" role="img" />;
<input type="image" role="img" />;
<input type="month" role="img" />;
<input type="number" role="img" />;
<input type="password" role="img" />;
<input type="radio" role="img" />;
<input type="range" role="img" />;
<input type="reset" role="img" />;
<input type="search" role="img" />;
<input type="submit" role="img" />;
<input type="tel" role="img" />;
<input type="text" role="img" />;
<input type="time" role="img" />;
<input type="url" role="img" />;
<input type="week" role="img" />;
/* End all flavors of input */
<menuitem role="img" />;
<option className="foo" role="img" />;
<select className="foo" role="img" />;
<textarea className="foo" role="img" />;
<tr role="img" />;
/* Interactive elements */
<a href="http://x.y.z" role="listitem" />;
<a href="http://x.y.z" tabIndex="0" role="listitem" />;
/* All flavors of input */
<input role="listitem" />;
<input type="listitem" role="listitem" />;
<input type="checkbox" role="listitem" />;
<input type="color" role="listitem" />;
<input type="date" role="listitem" />;
<input type="datetime" role="listitem" />;
<input type="datetime-local" role="listitem" />;
<input type="email" role="listitem" />;
<input type="file" role="listitem" />;
<input type="image" role="listitem" />;
<input type="month" role="listitem" />;
<input type="number" role="listitem" />;
<input type="password" role="listitem" />;
<input type="radio" role="listitem" />;
<input type="range" role="listitem" />;
<input type="reset" role="listitem" />;
<input type="search" role="listitem" />;
<input type="submit" role="listitem" />;
<input type="tel" role="listitem" />;
<input type="text" role="listitem" />;
<input type="time" role="listitem" />;
<input type="url" role="listitem" />;
<input type="week" role="listitem" />;
/* End all flavors of input */
<menuitem role="listitem" />;
<option className="foo" role="listitem" />;
<select className="foo" role="listitem" />;
<textarea className="foo" role="listitem" />;
<tr role="listitem" />;

```

# Diagnostics
```
invalid.jsx:2:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    1 │ /* Interactive elements */
  > 2 │ <a href="http://x.y.z" role="img" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ <a href="http://x.y.z" tabIndex="0" role="img" />;
    4 │ /* All flavors of input */
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    2 │ <a·href="http://x.y.z"·role="img"·/>;
      │                        -----------   

```

```
invalid.jsx:3:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    1 │ /* Interactive elements */
    2 │ <a href="http://x.y.z" role="img" />;
  > 3 │ <a href="http://x.y.z" tabIndex="0" role="img" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ /* All flavors of input */
    5 │ <input role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    3 │ <a·href="http://x.y.z"·tabIndex="0"·role="img"·/>;
      │                                     -----------   

```

```
invalid.jsx:5:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    3 │ <a href="http://x.y.z" tabIndex="0" role="img" />;
    4 │ /* All flavors of input */
  > 5 │ <input role="img" />;
      │ ^^^^^^^^^^^^^^^^^^^^
    6 │ <input type="img" role="img" />;
    7 │ <input type="checkbox" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    5 │ <input·role="img"·/>;
      │        -----------   

```

```
invalid.jsx:6:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    4 │ /* All flavors of input */
    5 │ <input role="img" />;
  > 6 │ <input type="img" role="img" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    7 │ <input type="checkbox" role="img" />;
    8 │ <input type="color" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    6 │ <input·type="img"·role="img"·/>;
      │                   -----------   

```

```
invalid.jsx:7:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    5 │ <input role="img" />;
    6 │ <input type="img" role="img" />;
  > 7 │ <input type="checkbox" role="img" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    8 │ <input type="color" role="img" />;
    9 │ <input type="date" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    7 │ <input·type="checkbox"·role="img"·/>;
      │                        -----------   

```

```
invalid.jsx:8:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
     6 │ <input type="img" role="img" />;
     7 │ <input type="checkbox" role="img" />;
   > 8 │ <input type="color" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     9 │ <input type="date" role="img" />;
    10 │ <input type="datetime" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    8 │ <input·type="color"·role="img"·/>;
      │                     -----------   

```

```
invalid.jsx:9:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
     7 │ <input type="checkbox" role="img" />;
     8 │ <input type="color" role="img" />;
   > 9 │ <input type="date" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    10 │ <input type="datetime" role="img" />;
    11 │ <input type="datetime-local" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    9 │ <input·type="date"·role="img"·/>;
      │                    -----------   

```

```
invalid.jsx:10:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
     8 │ <input type="color" role="img" />;
     9 │ <input type="date" role="img" />;
  > 10 │ <input type="datetime" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    11 │ <input type="datetime-local" role="img" />;
    12 │ <input type="email" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    10 │ <input·type="datetime"·role="img"·/>;
       │                        -----------   

```

```
invalid.jsx:11:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
     9 │ <input type="date" role="img" />;
    10 │ <input type="datetime" role="img" />;
  > 11 │ <input type="datetime-local" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    12 │ <input type="email" role="img" />;
    13 │ <input type="file" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    11 │ <input·type="datetime-local"·role="img"·/>;
       │                              -----------   

```

```
invalid.jsx:12:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    10 │ <input type="datetime" role="img" />;
    11 │ <input type="datetime-local" role="img" />;
  > 12 │ <input type="email" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    13 │ <input type="file" role="img" />;
    14 │ <input type="image" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    12 │ <input·type="email"·role="img"·/>;
       │                     -----------   

```

```
invalid.jsx:13:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    11 │ <input type="datetime-local" role="img" />;
    12 │ <input type="email" role="img" />;
  > 13 │ <input type="file" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    14 │ <input type="image" role="img" />;
    15 │ <input type="month" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    13 │ <input·type="file"·role="img"·/>;
       │                    -----------   

```

```
invalid.jsx:14:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    12 │ <input type="email" role="img" />;
    13 │ <input type="file" role="img" />;
  > 14 │ <input type="image" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    15 │ <input type="month" role="img" />;
    16 │ <input type="number" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    14 │ <input·type="image"·role="img"·/>;
       │                     -----------   

```

```
invalid.jsx:15:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    13 │ <input type="file" role="img" />;
    14 │ <input type="image" role="img" />;
  > 15 │ <input type="month" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    16 │ <input type="number" role="img" />;
    17 │ <input type="password" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    15 │ <input·type="month"·role="img"·/>;
       │                     -----------   

```

```
invalid.jsx:16:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    14 │ <input type="image" role="img" />;
    15 │ <input type="month" role="img" />;
  > 16 │ <input type="number" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    17 │ <input type="password" role="img" />;
    18 │ <input type="radio" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    16 │ <input·type="number"·role="img"·/>;
       │                      -----------   

```

```
invalid.jsx:17:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    15 │ <input type="month" role="img" />;
    16 │ <input type="number" role="img" />;
  > 17 │ <input type="password" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    18 │ <input type="radio" role="img" />;
    19 │ <input type="range" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    17 │ <input·type="password"·role="img"·/>;
       │                        -----------   

```

```
invalid.jsx:18:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    16 │ <input type="number" role="img" />;
    17 │ <input type="password" role="img" />;
  > 18 │ <input type="radio" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    19 │ <input type="range" role="img" />;
    20 │ <input type="reset" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    18 │ <input·type="radio"·role="img"·/>;
       │                     -----------   

```

```
invalid.jsx:19:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    17 │ <input type="password" role="img" />;
    18 │ <input type="radio" role="img" />;
  > 19 │ <input type="range" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    20 │ <input type="reset" role="img" />;
    21 │ <input type="search" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    19 │ <input·type="range"·role="img"·/>;
       │                     -----------   

```

```
invalid.jsx:20:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    18 │ <input type="radio" role="img" />;
    19 │ <input type="range" role="img" />;
  > 20 │ <input type="reset" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    21 │ <input type="search" role="img" />;
    22 │ <input type="submit" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    20 │ <input·type="reset"·role="img"·/>;
       │                     -----------   

```

```
invalid.jsx:21:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    19 │ <input type="range" role="img" />;
    20 │ <input type="reset" role="img" />;
  > 21 │ <input type="search" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    22 │ <input type="submit" role="img" />;
    23 │ <input type="tel" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    21 │ <input·type="search"·role="img"·/>;
       │                      -----------   

```

```
invalid.jsx:22:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    20 │ <input type="reset" role="img" />;
    21 │ <input type="search" role="img" />;
  > 22 │ <input type="submit" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    23 │ <input type="tel" role="img" />;
    24 │ <input type="text" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    22 │ <input·type="submit"·role="img"·/>;
       │                      -----------   

```

```
invalid.jsx:23:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    21 │ <input type="search" role="img" />;
    22 │ <input type="submit" role="img" />;
  > 23 │ <input type="tel" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    24 │ <input type="text" role="img" />;
    25 │ <input type="time" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    23 │ <input·type="tel"·role="img"·/>;
       │                   -----------   

```

```
invalid.jsx:24:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    22 │ <input type="submit" role="img" />;
    23 │ <input type="tel" role="img" />;
  > 24 │ <input type="text" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    25 │ <input type="time" role="img" />;
    26 │ <input type="url" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    24 │ <input·type="text"·role="img"·/>;
       │                    -----------   

```

```
invalid.jsx:25:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    23 │ <input type="tel" role="img" />;
    24 │ <input type="text" role="img" />;
  > 25 │ <input type="time" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    26 │ <input type="url" role="img" />;
    27 │ <input type="week" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    25 │ <input·type="time"·role="img"·/>;
       │                    -----------   

```

```
invalid.jsx:26:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    24 │ <input type="text" role="img" />;
    25 │ <input type="time" role="img" />;
  > 26 │ <input type="url" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    27 │ <input type="week" role="img" />;
    28 │ /* End all flavors of input */
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    26 │ <input·type="url"·role="img"·/>;
       │                   -----------   

```

```
invalid.jsx:27:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    25 │ <input type="time" role="img" />;
    26 │ <input type="url" role="img" />;
  > 27 │ <input type="week" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    28 │ /* End all flavors of input */
    29 │ <menuitem role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    27 │ <input·type="week"·role="img"·/>;
       │                    -----------   

```

```
invalid.jsx:29:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    27 │ <input type="week" role="img" />;
    28 │ /* End all flavors of input */
  > 29 │ <menuitem role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^
    30 │ <option className="foo" role="img" />;
    31 │ <select className="foo" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    29 │ <menuitem·role="img"·/>;
       │           -----------   

```

```
invalid.jsx:30:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    28 │ /* End all flavors of input */
    29 │ <menuitem role="img" />;
  > 30 │ <option className="foo" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    31 │ <select className="foo" role="img" />;
    32 │ <textarea className="foo" role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    30 │ <option·className="foo"·role="img"·/>;
       │                         -----------   

```

```
invalid.jsx:31:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    29 │ <menuitem role="img" />;
    30 │ <option className="foo" role="img" />;
  > 31 │ <select className="foo" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    32 │ <textarea className="foo" role="img" />;
    33 │ <tr role="img" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    31 │ <select·className="foo"·role="img"·/>;
       │                         -----------   

```

```
invalid.jsx:32:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    30 │ <option className="foo" role="img" />;
    31 │ <select className="foo" role="img" />;
  > 32 │ <textarea className="foo" role="img" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    33 │ <tr role="img" />;
    34 │ /* Interactive elements */
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    32 │ <textarea·className="foo"·role="img"·/>;
       │                           -----------   

```

```
invalid.jsx:33:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    31 │ <select className="foo" role="img" />;
    32 │ <textarea className="foo" role="img" />;
  > 33 │ <tr role="img" />;
       │ ^^^^^^^^^^^^^^^^^
    34 │ /* Interactive elements */
    35 │ <a href="http://x.y.z" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    33 │ <tr·role="img"·/>;
       │     -----------   

```

```
invalid.jsx:35:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    33 │ <tr role="img" />;
    34 │ /* Interactive elements */
  > 35 │ <a href="http://x.y.z" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    36 │ <a href="http://x.y.z" tabIndex="0" role="listitem" />;
    37 │ /* All flavors of input */
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    35 │ <a·href="http://x.y.z"·role="listitem"·/>;
       │                        ----------------   

```

```
invalid.jsx:36:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    34 │ /* Interactive elements */
    35 │ <a href="http://x.y.z" role="listitem" />;
  > 36 │ <a href="http://x.y.z" tabIndex="0" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    37 │ /* All flavors of input */
    38 │ <input role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    36 │ <a·href="http://x.y.z"·tabIndex="0"·role="listitem"·/>;
       │                                     ----------------   

```

```
invalid.jsx:38:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    36 │ <a href="http://x.y.z" tabIndex="0" role="listitem" />;
    37 │ /* All flavors of input */
  > 38 │ <input role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^
    39 │ <input type="listitem" role="listitem" />;
    40 │ <input type="checkbox" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    38 │ <input·role="listitem"·/>;
       │        ----------------   

```

```
invalid.jsx:39:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    37 │ /* All flavors of input */
    38 │ <input role="listitem" />;
  > 39 │ <input type="listitem" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    40 │ <input type="checkbox" role="listitem" />;
    41 │ <input type="color" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    39 │ <input·type="listitem"·role="listitem"·/>;
       │                        ----------------   

```

```
invalid.jsx:40:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    38 │ <input role="listitem" />;
    39 │ <input type="listitem" role="listitem" />;
  > 40 │ <input type="checkbox" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    41 │ <input type="color" role="listitem" />;
    42 │ <input type="date" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    40 │ <input·type="checkbox"·role="listitem"·/>;
       │                        ----------------   

```

```
invalid.jsx:41:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    39 │ <input type="listitem" role="listitem" />;
    40 │ <input type="checkbox" role="listitem" />;
  > 41 │ <input type="color" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    42 │ <input type="date" role="listitem" />;
    43 │ <input type="datetime" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    41 │ <input·type="color"·role="listitem"·/>;
       │                     ----------------   

```

```
invalid.jsx:42:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    40 │ <input type="checkbox" role="listitem" />;
    41 │ <input type="color" role="listitem" />;
  > 42 │ <input type="date" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    43 │ <input type="datetime" role="listitem" />;
    44 │ <input type="datetime-local" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    42 │ <input·type="date"·role="listitem"·/>;
       │                    ----------------   

```

```
invalid.jsx:43:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    41 │ <input type="color" role="listitem" />;
    42 │ <input type="date" role="listitem" />;
  > 43 │ <input type="datetime" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    44 │ <input type="datetime-local" role="listitem" />;
    45 │ <input type="email" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    43 │ <input·type="datetime"·role="listitem"·/>;
       │                        ----------------   

```

```
invalid.jsx:44:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    42 │ <input type="date" role="listitem" />;
    43 │ <input type="datetime" role="listitem" />;
  > 44 │ <input type="datetime-local" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    45 │ <input type="email" role="listitem" />;
    46 │ <input type="file" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    44 │ <input·type="datetime-local"·role="listitem"·/>;
       │                              ----------------   

```

```
invalid.jsx:45:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    43 │ <input type="datetime" role="listitem" />;
    44 │ <input type="datetime-local" role="listitem" />;
  > 45 │ <input type="email" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    46 │ <input type="file" role="listitem" />;
    47 │ <input type="image" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    45 │ <input·type="email"·role="listitem"·/>;
       │                     ----------------   

```

```
invalid.jsx:46:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    44 │ <input type="datetime-local" role="listitem" />;
    45 │ <input type="email" role="listitem" />;
  > 46 │ <input type="file" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    47 │ <input type="image" role="listitem" />;
    48 │ <input type="month" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    46 │ <input·type="file"·role="listitem"·/>;
       │                    ----------------   

```

```
invalid.jsx:47:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    45 │ <input type="email" role="listitem" />;
    46 │ <input type="file" role="listitem" />;
  > 47 │ <input type="image" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    48 │ <input type="month" role="listitem" />;
    49 │ <input type="number" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    47 │ <input·type="image"·role="listitem"·/>;
       │                     ----------------   

```

```
invalid.jsx:48:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    46 │ <input type="file" role="listitem" />;
    47 │ <input type="image" role="listitem" />;
  > 48 │ <input type="month" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    49 │ <input type="number" role="listitem" />;
    50 │ <input type="password" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    48 │ <input·type="month"·role="listitem"·/>;
       │                     ----------------   

```

```
invalid.jsx:49:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    47 │ <input type="image" role="listitem" />;
    48 │ <input type="month" role="listitem" />;
  > 49 │ <input type="number" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    50 │ <input type="password" role="listitem" />;
    51 │ <input type="radio" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    49 │ <input·type="number"·role="listitem"·/>;
       │                      ----------------   

```

```
invalid.jsx:50:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    48 │ <input type="month" role="listitem" />;
    49 │ <input type="number" role="listitem" />;
  > 50 │ <input type="password" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    51 │ <input type="radio" role="listitem" />;
    52 │ <input type="range" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    50 │ <input·type="password"·role="listitem"·/>;
       │                        ----------------   

```

```
invalid.jsx:51:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    49 │ <input type="number" role="listitem" />;
    50 │ <input type="password" role="listitem" />;
  > 51 │ <input type="radio" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    52 │ <input type="range" role="listitem" />;
    53 │ <input type="reset" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    51 │ <input·type="radio"·role="listitem"·/>;
       │                     ----------------   

```

```
invalid.jsx:52:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    50 │ <input type="password" role="listitem" />;
    51 │ <input type="radio" role="listitem" />;
  > 52 │ <input type="range" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    53 │ <input type="reset" role="listitem" />;
    54 │ <input type="search" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    52 │ <input·type="range"·role="listitem"·/>;
       │                     ----------------   

```

```
invalid.jsx:53:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    51 │ <input type="radio" role="listitem" />;
    52 │ <input type="range" role="listitem" />;
  > 53 │ <input type="reset" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    54 │ <input type="search" role="listitem" />;
    55 │ <input type="submit" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    53 │ <input·type="reset"·role="listitem"·/>;
       │                     ----------------   

```

```
invalid.jsx:54:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    52 │ <input type="range" role="listitem" />;
    53 │ <input type="reset" role="listitem" />;
  > 54 │ <input type="search" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    55 │ <input type="submit" role="listitem" />;
    56 │ <input type="tel" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    54 │ <input·type="search"·role="listitem"·/>;
       │                      ----------------   

```

```
invalid.jsx:55:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    53 │ <input type="reset" role="listitem" />;
    54 │ <input type="search" role="listitem" />;
  > 55 │ <input type="submit" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    56 │ <input type="tel" role="listitem" />;
    57 │ <input type="text" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    55 │ <input·type="submit"·role="listitem"·/>;
       │                      ----------------   

```

```
invalid.jsx:56:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    54 │ <input type="search" role="listitem" />;
    55 │ <input type="submit" role="listitem" />;
  > 56 │ <input type="tel" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    57 │ <input type="text" role="listitem" />;
    58 │ <input type="time" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    56 │ <input·type="tel"·role="listitem"·/>;
       │                   ----------------   

```

```
invalid.jsx:57:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    55 │ <input type="submit" role="listitem" />;
    56 │ <input type="tel" role="listitem" />;
  > 57 │ <input type="text" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    58 │ <input type="time" role="listitem" />;
    59 │ <input type="url" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    57 │ <input·type="text"·role="listitem"·/>;
       │                    ----------------   

```

```
invalid.jsx:58:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    56 │ <input type="tel" role="listitem" />;
    57 │ <input type="text" role="listitem" />;
  > 58 │ <input type="time" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    59 │ <input type="url" role="listitem" />;
    60 │ <input type="week" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    58 │ <input·type="time"·role="listitem"·/>;
       │                    ----------------   

```

```
invalid.jsx:59:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    57 │ <input type="text" role="listitem" />;
    58 │ <input type="time" role="listitem" />;
  > 59 │ <input type="url" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    60 │ <input type="week" role="listitem" />;
    61 │ /* End all flavors of input */
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    59 │ <input·type="url"·role="listitem"·/>;
       │                   ----------------   

```

```
invalid.jsx:60:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    58 │ <input type="time" role="listitem" />;
    59 │ <input type="url" role="listitem" />;
  > 60 │ <input type="week" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    61 │ /* End all flavors of input */
    62 │ <menuitem role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    60 │ <input·type="week"·role="listitem"·/>;
       │                    ----------------   

```

```
invalid.jsx:62:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    60 │ <input type="week" role="listitem" />;
    61 │ /* End all flavors of input */
  > 62 │ <menuitem role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    63 │ <option className="foo" role="listitem" />;
    64 │ <select className="foo" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    62 │ <menuitem·role="listitem"·/>;
       │           ----------------   

```

```
invalid.jsx:63:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    61 │ /* End all flavors of input */
    62 │ <menuitem role="listitem" />;
  > 63 │ <option className="foo" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    64 │ <select className="foo" role="listitem" />;
    65 │ <textarea className="foo" role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    63 │ <option·className="foo"·role="listitem"·/>;
       │                         ----------------   

```

```
invalid.jsx:64:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    62 │ <menuitem role="listitem" />;
    63 │ <option className="foo" role="listitem" />;
  > 64 │ <select className="foo" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    65 │ <textarea className="foo" role="listitem" />;
    66 │ <tr role="listitem" />;
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    64 │ <select·className="foo"·role="listitem"·/>;
       │                         ----------------   

```

```
invalid.jsx:65:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    63 │ <option className="foo" role="listitem" />;
    64 │ <select className="foo" role="listitem" />;
  > 65 │ <textarea className="foo" role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    66 │ <tr role="listitem" />;
    67 │ 
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    65 │ <textarea·className="foo"·role="listitem"·/>;
       │                           ----------------   

```

```
invalid.jsx:66:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ! Interactive elements should not be assigned non-interactive roles.
  
    64 │ <select className="foo" role="listitem" />;
    65 │ <textarea className="foo" role="listitem" />;
  > 66 │ <tr role="listitem" />;
       │ ^^^^^^^^^^^^^^^^^^^^^^
    67 │ 
  
  i WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  i Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  i Unsafe fix: Remove the role attribute.
  
    66 │ <tr·role="listitem"·/>;
       │     ----------------   

```