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.5.6

---

Release Notes

openedx/paragon (@​edx/paragon)

v21.5.6

Compare Source

Bug Fixes

• Update docs for a final publish before we move this package. (22dd0c4)

v21.5.5

Compare Source

Bug Fixes

• properly test untyped selectable box sets (#​2736) (63d4640)

v21.5.4

Compare Source

Bug Fixes

• Update imports to the new brand package. (6719baa)

v21.5.3

Compare Source

Bug Fixes

• avoid duplicate onChange calls in FormRadioSet and FormCheckboxSet (#​2705) (a395042)

v21.5.2

Compare Source

Bug Fixes

• allows focus to return to autosuggest input after hitting esc (#​2556) (34f055a)
• use kebab-case-ids in autosuggest esc test (#​2717) (9face09)

v21.5.1

Compare Source

Bug Fixes

• run leave control logic when tabbing out of autosuggest (#​2663) (5521493)

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>

v20.46.3

Compare Source

---

Configuration

📅 Schedule: Branch creation - "every weekday" (UTC), 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.