🇺🇸United States @michaelablackham

johnpicozzi → credited michaelablackham → .

michaelablackham → created an issue.

michaelablackham → created an issue.

michaelablackham → created an issue.

It looks like this may have caused some others bugs

I can click the "close" and focus is brought back to the element that triggered it, so the mouse usage has been updated however

1. I cannot hit "escape" and close it anymore
2. I can use keyboard to choose content once the component modal is open

Screencast: https://share.cleanshot.com/K3MYZz53

Reviewed this locally in a couple different scenarios, and it seems to work great and follows normal keyboard patterns (tab to widget, arrow keys to navigate within the widget)

This is resolved!

I tested this locally in a few different scenarios.

It appears that the styles tab keeps the original width of the modal window when switched. This seems to work really well.

This is resolved.

This was reviewed ina. couple different scenarios and works as expected now. I am no longer gain focus on non-ME links and buttons and form elements

This is working as expected. This is resolved!

I have reviewed this in a few different scenarios using ME on some local tests.

This is no longer happening and is resolved!

I tested this locally in a couple different scenarios and it seems to be working as expected.

This is resolved!

I currently hit "escape" and the modal disappears. However, I am brought back to the top of the page and not to the element that triggered the action.

The ideal functionality is to close the window and return the :focus back to the link or button that triggered the action. that way a user can continue on their tab journey without starting over.

This same action should happen when you hit the "X" (close) icon as well. Currently they both bring focus back to the top of the page.

Screencast showing me hitting "escape" and focus is brought back to top and you next tab shows "skip to main content" https://share.cleanshot.com/G7KfmR27

michaelablackham → created an issue.

michaelablackham → created an issue.

michaelablackham → created an issue.

michaelablackham → created an issue.

michaelablackham → created an issue.

michaelablackham → created an issue.

michaelablackham → created an issue.

michaelablackham → created an issue.

QA & Accessibility

1. For table descriptions, use the caption element.
2. Table caption should default to the top of the table
3. th should be available for both rows or columns
4. Tables should not be wrapped in a figure

For more information and direction, please refer to: https://www.w3.org/WAI/EO/Drafts/tutorials/tables/caption-summary/

QA & Accessibility

1. Must be based off of WAI-ARIA approved Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/
2. Must use default :focus styles for keyboard focus
3. tab to "tab widget", use arrow keys to navigate to the tab, "enter" or "space" keys to select the appropriate tab

QA & Accessibility

1. Alerts must be within a ul to accommodate more than one (if needed)
2. There must be a heading 2 before the list/inside the component
3. If icons are used to convey information, such as urgency, then this must be conveyed in text (aria-label, visually hidden text, image alt etc)
4. Default location of the alert component must be found after the "skip" link and before the header
5. Text links should be descriptive. These can be the alerts themselves, or a descriptive link

michaelablackham → created an issue.

This looks great!

The only change I am looking for is to clean it up a little bit:

1. Add aria-label to the <nav>
2. Remove the aria-labelledby on the <nav>
3. Remove the visually hidden h2.

This way it is just a little cleaner:

<nav aria-label="main" id="block-mainnavigation">

This looks great! the only recommendation I would make it making aria-label="pagination" translatable for proper screen reader support.
Other than that, this follows the recommended WAIARIA guidelines