chore: clean up outdated eslint-disable (#3488)

* chore: clean up outdated eslint-disable

* refactor: added some tests

* refactor: after review

* refactor: some refactoring

* refactor: after rebase

* test: added some tests

* refactor: return of the presentation role for the modal backdrop

* refactor: changed Typography Links example

Author: PKulkoRaccoonGang

example/src/MyComponent.jsx

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
-import { Button, Form, Icon, Bubble, Stack, Container } from '@openedx/paragon'; // eslint-disable-line
-import { FavoriteBorder } from '@openedx/paragon/icons'; // eslint-disable-line
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Button, Form, Icon, Bubble, Stack, Container,
+} from '@openedx/paragon';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { FavoriteBorder } from '@openedx/paragon/icons';
 
 function MyComponent() {
   const [value, setValue] = useState('');

lib/version.js

@@ -1,9 +1,8 @@
-/* eslint-disable no-console */
 const chalk = require('chalk');
 const { version } = require('../package.json');
 
 function versionCommand() {
-  console.log(`Paragon CLI version: ${chalk.bold(version)}`);
+  console.log(`Paragon CLI version: ${chalk.bold(version)}`); /* eslint-disable-line no-console */
 }
 
 module.exports = versionCommand;

src/Button/deprecated/index.jsx

@@ -85,28 +85,39 @@ class DeprecatedButton extends React.Component {
 }
 
 export const buttonPropTypes = {
-  /** Used to determine the type of button to be rendered.  See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable button types. For example, `buttonType="light"`. The default is `undefined`. */
+  /** Used to determine the type of button to be rendered.
+   * See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/)
+   * for a list of applicable button types. For example, `buttonType="light"`. The default is `undefined`. */
   buttonType: PropTypes.string,
-  /** Specifies Bootstrap class names to apply to the button. See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable class names. The default is an empty array. */
+  /** Specifies Bootstrap class names to apply to the button.
+   * See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/)
+   * for a list of applicable class names. The default is an empty array. */
   className: PropTypes.string,
   /** Specifies the text that is displayed within the button. */
   children: PropTypes.node.isRequired,
-  // eslint-disable-next-line max-len
-  /** A function that defines a reference for the button. An example `inputRef` from the calling component could look something like: `inputRef={(input) => { this.button = input; }}`. The default is an empty function. */
+  /** A function that defines a reference for the button.
+   * An example `inputRef` from the calling component could look something
+   * like: `inputRef={(input) => { this.button = input; }}`. The default is an empty function. */
   inputRef: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
   ]),
-  /** Used to determine if the button is a "Close" style button to leverage bootstrap styling. Example use case is with the Status Alert [dismiss button](https://getbootstrap.com/docs/4.0/components/alerts/#dismissing). The default is false. */
+  /** Used to determine if the button is a "Close" style button to leverage
+   * bootstrap styling. Example use case is with
+   * the Status Alert [dismiss button](https://getbootstrap.com/docs/4.0/components/alerts/#dismissing).
+   * The default is false. */
   isClose: PropTypes.bool,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onBlur` event is triggered. For example, the button could change in color or `buttonType` when focus is changed. The default is an empty function. */
+  /** A function that would specify what the button should do when
+   * the `onBlur` event is triggered. For example, the button could change
+   * in color or `buttonType` when focus is changed. The default is an empty function. */
   onBlur: PropTypes.func,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onClick` event is triggered. For example, the button could launch a `Modal`. The default is an empty function. */
+  /** A function that would specify what the button should do when
+   * the `onClick` event is triggered. For example, the button could launch
+   * a `Modal`. The default is an empty function. */
   onClick: PropTypes.func,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.  For example, this could handle using the `Escape` key to trigger the button's action. The default is an empty function. */
+  /** A function that would specify what the button should do when
+   * the `onKeyDown` event is triggered.  For example, this could handle
+   * using the `Escape` key to trigger the button's action. The default is an empty function. */
   onKeyDown: PropTypes.func,
   /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */
   type: PropTypes.string,

src/Card/CardCarousel/tests/CardCarousel.test.jsx

@@ -12,7 +12,6 @@ jest.mock('../../../OverflowScroll', () => ({
   OverflowScroll: jest.fn(),
 }));
 
-// eslint-disable-next-line react/prop-types
 OverflowScroll.mockImplementation(({ children }) => {
   const overflowRef = { current: document.createElement('div') };
   const contextValue = {

src/CheckBox/index.jsx

@@ -15,7 +15,6 @@ class Check extends React.Component {
     };
   }
 
-  /* eslint-disable react/no-did-update-set-state */
   componentDidUpdate(prevProps) {
     if (prevProps.checked !== this.props.checked) {
       this.setState({
@@ -50,8 +49,9 @@ class Check extends React.Component {
 }
 
 Check.propTypes = {
-  // eslint-disable-next-line max-len
-  /** (`Boolean`): `true` if the state should be checked, `false` otherwise. This prop can be used to manage the Checkbox more directly, overriding the default Checkbox checked state. */
+  /** (`Boolean`): `true` if the state should be checked, `false` otherwise.
+   * This prop can be used to manage the Checkbox more directly,
+   * overriding the default Checkbox checked state. */
   checked: PropTypes.bool,
   /** (`Boolean`): `true` if the checkbox should be disabled, `false` otherwise */
   onChange: PropTypes.func,

src/CheckBoxGroup/index.jsx

@@ -10,8 +10,10 @@ function CheckBoxGroup(props) {
 }
 
 CheckBoxGroup.propTypes = {
-  // eslint-disable-next-line max-len
-  /** represents the CheckBox components defined within the CheckBoxGroup component and is not a specific named prop that needs to be passed in. At least one CheckBox must be defined within the group. Example: `<CheckBoxGroup><CheckBox .../></CheckBoxGroup>`
+  /** represents the CheckBox components defined within the CheckBoxGroup
+   * component and is not a specific named prop that needs to be passed in.
+   * At least one CheckBox must be defined within the group.
+   * Example: `<CheckBoxGroup><CheckBox .../></CheckBoxGroup>`
    */
   children: PropTypes.arrayOf(PropTypes.element).isRequired,
 };

src/Chip/constants.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const STYLE_VARIANTS = {
   DARK: 'dark',
   LIGHT: 'light',

src/ChipCarousel/ChipCarousel.test.jsx

@@ -1,17 +1,15 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import ChipCarousel from '.';
+import Chip from '../Chip';
 
-const items = [
-  <div onClick={jest.fn()} data-testid="chip">Item 1</div>,
-  <div onClick={jest.fn()} data-testid="chip">Item 2</div>,
-  <div onClick={jest.fn()} data-testid="chip">Item 3</div>,
-  <div onClick={jest.fn()} data-testid="chip" />,
-];
+const items = Array.from({ length: 4 }, (_, i) => (
+  <Chip onClick={jest.fn()}>
+    {`Item ${i + 1}`}
+  </Chip>
+));
 
 const ariaLabel = 'Test aria label';
 function TestingChipCarousel(props) {
@@ -29,9 +27,9 @@ describe('<ChipCarousel />', () => {
     const carousel = screen.getByTestId('chip-carousel');
     expect(carousel).toBeTruthy();
 
-    const chipItems = screen.queryAllByTestId('chip');
-    expect(chipItems).toHaveLength(items.length - 1);
-    for (let i = 0; i < chipItems.length - 1; i++) {
+    const chipItems = screen.queryAllByRole('button');
+    expect(chipItems).toHaveLength(items.length);
+    for (let i = 0; i < chipItems.length; i++) {
       expect(chipItems[i].textContent).toBe(items[i].props.children);
     }
   });

src/Container/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';

src/DataTable/CollapsibleButtonGroup.jsx

@@ -51,7 +51,6 @@ function CollapsibleButtonGroup({
   const cloneAction = (action, index) => React.cloneElement(
     action.component,
     {
-      // eslint-disable-next-line react/no-array-index-key
       key: `${action}${index}`,
       as: Button, // for backwards compatibility this is needed
       ...action.args,