Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

\uD83D\uDDD3 Date

\uD83D\uDC65 Participants

\uD83D\uDDE3 Discussion topics

Time

Item

Presenter

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


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

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

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

✅ Action items

  •  

⤴ Decisions