fix(deps): update dependency @edx/paragon to v21 - autoclosed

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@edx/paragon	^20.46.2 -> ^21.0.0

---

Release Notes

openedx/paragon (@​edx/paragon)

v21.5.0

Compare Source

Features

• add attributes to input and wrapper component (#​2570) (acf452b)

v21.4.0

Compare Source

Features

• add reversed prop to the Stack component (#​2678) (10707c4)

v21.3.1

Compare Source

Bug Fixes

• [BD-46] fixed RTL direction styling in ProgressBar (#​2641) (b67f77c)

v21.3.0

Compare Source

Features

• added new icon in es5 and jsx (5ef216f)

v21.2.0

Compare Source

Features

• add help command for Paragon CLI (#​2603) (c778061)

v21.1.10

Compare Source

Bug Fixes

• center align DataTable's filter items (#​2610) (5c1fdef)

v21.1.9

Compare Source

Bug Fixes

• add ability to truncate text without spaces in Truncate component (#​2584) (3db63e7)

v21.1.8

Compare Source

Bug Fixes

• update Card's border-radius and color in focused state (#​2607) (5eb4c8e)

v21.1.7

Compare Source

Bug Fixes

• add isActive to FormAutosuggest state (#​2517) (4816baa)

v21.1.6

Compare Source

Bug Fixes

• update SearchField's background color to be white (#​2597) (a0e6f3c)

v21.1.5

Compare Source

Bug Fixes

• remove visual glitch for DataTable loading state (#​2599) (e1994a0)

v21.1.4

Compare Source

Bug Fixes

• use Form.Checkbox instead of default checkboxes in DataTable filters (#​2555) (d07827d)

v21.1.3

Compare Source

Bug Fixes

• disable browser autocomplete and edit dropdown items elements (93bf239)

v21.1.2

Compare Source

Reverts

• Revert "fix: [BD-46] skeleton.css for both dev and prod (#​2531)" (#​2562) (4d4577e), closes #​2531 #​2562

v21.1.1

Compare Source

Bug Fixes

• [BD-46] skeleton.css for both dev and prod (#​2531) (7e96a0a)
• move install-theme.js to lib directory (#​2560) (4ec284a)

v21.1.0

Compare Source

Bug Fixes

• filtered dropdown items by display value instead of event target (#​2547) (cac6984)

Features

• [BD-46] add paragon-cli (#​2460) (33a7c74)
• maximum selectable rows on the Datatable (#​2451) (7194fba)

v21.0.1

Compare Source

Bug Fixes

• deps: OEP65. updating to react-intl 6.4.4 (#​2525) (7e5b37d)

v21.0.0

Compare Source

• fix: selectable box set props forwarding (#​2461) (1d6f95e)

BREAKING CHANGES

• aria-label is required when not using aria-labelledby
  in the SelectableBoxSet component. An associated label for the component is a WCAG requirement.

For Consumers

In order to associate a label with the SelectableBoxSet component, developers can use the aria-labelledby attribute. The value of this attribute should match the id of the element that is to be referenced as a label, whether visible or not. If no visible or invisible label is provided in the markup, developers can either make an invisible one (e.g. <h3 className="sr-only">Hello, World</h3>) that only assistive technologies would pick up on, or they can opt to use an aria-label instead.

See the doc site page for SelectableBox to view a live example of using aria-labelledby.

Examples

Using aria-labelledby with the SelectableBoxSet component:

<div className="bg-light-200 p-3">
  {/** `id` provided to the `h3` is the same value as the `aria-labelledby` in `SelectableBox.Set` **/}
  <h3 id="cheese selection" className="mb-4">
    Select your favorite cheese
  </h3>
  <SelectableBox.Set
    value={checkedCheeses}
    type={type}
    onChange={handleChange}
    name="cheeses"
    columns={isExtraSmall ? 1 : 3}
    ariaLabelledby="cheese selection"
  >
    <SelectableBox value="swiss" inputHidden={false} type={type} aria-label="swiss checkbox">
      <h3>
        Swiss
      </h3>
    </SelectableBox>
    <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
      <h3>
        Cheddar
      </h3>
    </SelectableBox>
    <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="pepperjack checkbox">
      <h3>
        Pepperjack
      </h3>
    </SelectableBox>
  </SelectableBox.Set>
</div>

If not using aria-labelledby, developers must provide an aria-label to the component:

<SelectableBox.Set
  value={checkedCheeses}
  type={type}
  onChange={handleChange}
  name="cheeses"
  columns={isExtraSmall ? 1 : 3}
  ariaLabel="cheese selection"
>
  <SelectableBox value="swiss" inputHidden={false} type={type} aria-label="swiss checkbox">
    <h3>
      Swiss
    </h3>
  </SelectableBox>
  <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
    <h3>
      Cheddar
    </h3>
  </SelectableBox>
  <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="pepperjack checkbox">
    <h3>
      Pepperjack
    </h3>
  </SelectableBox>
</SelectableBox.Set>

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[renovate]

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

• any of the package files in this branch needs updating, or
• the branch becomes conflicted, or
• you click the rebase/retry checkbox if found above, or
• you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @edx/[email protected]
npm ERR! Found: @edx/[email protected]
npm ERR! node_modules/@edx/paragon
npm ERR!   @edx/paragon@"^21.0.0" from the root project
npm ERR!   peer @edx/paragon@">= 10.0.0 < 22.0.0" from @edx/[email protected]
npm ERR!   node_modules/@edx/frontend-platform
npm ERR!     @edx/frontend-platform@"5.6.1" from the root project
npm ERR!     peer @edx/frontend-platform@"^4.0.0 || ^5.0.0 || ^6.0.0" from @edx/[email protected]
npm ERR!     node_modules/@edx/frontend-component-footer
npm ERR!       @edx/frontend-component-footer@"^12.3.0" from the root project
npm ERR!     2 more (@edx/frontend-component-header, @edx/frontend-lib-content-components)
npm ERR!   1 more (@edx/frontend-component-footer)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @edx/paragon@"^20.27.0" from @edx/[email protected]
npm ERR! node_modules/@edx/frontend-lib-content-components
npm ERR!   @edx/frontend-lib-content-components@"^1.174.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @edx/[email protected]
npm ERR! node_modules/@edx/paragon
npm ERR!   peer @edx/paragon@"^20.27.0" from @edx/[email protected]
npm ERR!   node_modules/@edx/frontend-lib-content-components
npm ERR!     @edx/frontend-lib-content-components@"^1.174.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /tmp/worker/90ea83/a11292/cache/others/npm/_logs/2023-10-31T16_13_09_263Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /tmp/worker/90ea83/a11292/cache/others/npm/_logs/2023-10-31T16_13_09_263Z-debug-0.log