chore(deps): update dependency @edx/paragon to v21

[renovate]

This PR contains the following updates:

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

---

Release Notes

openedx/paragon (@​edx/paragon)

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 - "before 4am on Monday" in timezone America/New_York, 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.

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (fca4a6b) 81.25% compared to head (f3ec83c) 81.25%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #335   +/-   ##
=======================================
  Coverage   81.25%   81.25%           
=======================================
  Files           4        4           
  Lines          32       32           
  Branches        4        4           
=======================================
  Hits           26       26           
  Misses          6        6           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.