2023-03-15 Paragon Meeting notes

Default icons for Collapsible (docs)

@Jeff Witt

• Can we use the animated +/- icon(s) used under Market-driven curriculum here: https://business.edx.org/products/microbootcamps for expand/collapse widgets more generally (to disambiguate vs. the down-pointing-carret used for <select>-type listboxes)?

Notes:

• [Adam] Collapsible used to have +/- icons.

  • It was changed to use the current up/down carets in September 2021 (JIRA ticket & PR). I don’t have context into why this design decision was made.

• [Jeff]

  • Will touch base with design team to propose this change. Likely will come back to this group once a design decision is made.

a11y rules for hyperlinks (docs)

@Jeff Witt

• Working with Eugene, I have new rules for links:

  • opens in new tab (internal or external) gets box with NE arrow

  • External link (same tab) gets NE arrow without box

  • File download (link having download attribute) gets download icon.

    • HTML download attribute

  • Other variants that we’re opting to defer on:

    • Links that scroll user further down the same page.

Notes

• “External site” (e.g., non-2U)

• 2 of these icons are in the Paragon icon set

  • But we’ll need a NE arrow (without the box).

• [Mike] Possible edge case:

  • What about courses cards to a new page?

• We tend to prefer linking to external sites in the same tab. We need the affordance for it.

• Jeff will file an issue for implementation.

• [Adam] We will need to refactor Hyperlink to customize the icon and sr-only screenreader text.

• [Adam] Will we update Paragon Design System ?

  • [Jeff] Yes.

WGAG 2.2 finishes next month

@Jeff Witt

• Focus styling

  • We think we satisfy these requirements now, but maybe not on inline links?

  • Currently, underline for inline links is an alpha blend.

    • Proposal: just use underline, not an alpha blend.

Process for merging code into Paragon?

@Max Frank

• After PR merge, semantic-release is called.

• Only fix, feat, perftriggers a release.

Form.AutoSuggest

@Max Frank

PR is up for Form.Autosuggest. Raccoon gang has started to take a look (). Looking for additional feedback, e.g., on accessibility.

Dialog

@Jeff Witt

• HTML dialog element

• <dialog>: The Dialog element - HTML: HyperText Markup Language | MDN

• General advice: use semantic HTML elements where applicable (vs. aria attributes).

• When a dialog is opened, from screen reader POV, it should block the reading of non-dialog elements on the page (inert).

  • Jeff does not consider this a high priority.

  • Solutions:

    • aria-hidden on the rest of the page somehow

    • inert attribute takes items out of the a11y tree.

  • Current dialog focus management:

    • Put focus on first focusable element in the dialog (usually a close icon).

      • This can be kind of unintuitive.

    • With the new dialog element, the entire dialog can be focusable.

  • [Hamzah] Is FullscreenModal an example of not putting focus on the close button, too?

  • [Hamzah] Does this apply to Toasts?

    • [Jeff] will take a look at the current Toast from an a11y perspective (e.g., duplicate role=”alerts” and focus on interactive elements).

      • Same with ProductTour.