Skip to content

Instantly share code, notes, and snippets.

@nmlapre
Last active July 31, 2023 22:44
Show Gist options
  • Save nmlapre/4ff2b9cf1e1e0baa31381d86956746f5 to your computer and use it in GitHub Desktop.
Save nmlapre/4ff2b9cf1e1e0baa31381d86956746f5 to your computer and use it in GitHub Desktop.
migration wizard in about:welcome review

(note: all tested with NVDA on Windows 11)

The Import Browser Data Dialog

  • NVDA says "Microsoft Edge Profile 1 button expanded submenu" after selecting "Microsoft Edge Profile 1". Shouldn't it indicate that it's collapsed, not expanded?
    • It doesn't say "collapsed" when collapsed initially, either.
      • "Microsoft Edge Profile 1 button submenu" or "button submenu Microsoft Edge Profile 1"
  • This button: <button data-l10n-id="migration-import-button-label" disabled="">Import</button> reads as "button unavailable" and is present after the "Import" button. It really shouldn't be there since it's not visible and does nothing.
  • After selecting a browser (open button menu, choose an option, press enter), NVDA reads the previously-selected option, even though a new option has been selected.
    • It'll say, "Chrome profile 1 button expanded sub menu" after you press enter on a different option, if Chrome was the previously-selected option.
  • Browser icon graphics are unlabeled. This is not particularly important, but worth noting.
  • Add to the or use aria-labelledby on the fieldset (will this work?), refer to the id of the "import all available data" thing, #resource-selection-summary
  • The selection checkboxes should all have the same html "name" attribute. This will group them so we can have "1 of 4" etc.

Data Import Complete page

  • After importing, NVDA reads: "dialog dialog button import continue button"
    • There's no import button on the screen, why are we being told this?
    • Also I can sometimes have it not land focus on the continue button, but I have no reliable reproducer yet.
    • Could we be told that things worked or didn't work? It's unclear without some searching around the dialog.
  • The yellow caution sign icon is labeled "completed" which is the same label as the green check mark icon. Visually it looks like something went wrong, but as a screen reader user I can't tell the difference.
  • The "Import Browser Data" content from the last page is still available even when it's not visible on screen, or really even interactable. If you keep arrowing down with NVDA you'll hit it. It's not in the tab order, luckily, but it's still in the accessibility tree, so assistive technology clients still see it.
    • This is pretty confusing since it comes immediately after the "continue" button, which makes you think you've done something incorrectly.
  • There's a "skip this step" button even after you've successfully imported things from another browser. But you already did this step. I think? That feels cognitively confusing.
  • role=status on the "data import complete" heading so it announces. If that wouldn't work, maybe we can send focus to the heading.

High Contrast Mode checks

  • Checkboxes don't conform to our HCM standards. Please see this page for guidance on how to color checkboxes.
  • The outlines of checkboxes (i.e., from tab focus) on the first page are partially covered in the top left.
  • The link on the "hop from laptop to phone and back again" screen should use the link color. See this guidance (not fully fleshed out yet).
  • The HCM-ified graphics are okay but not necessary. I am slightly concerned that the brightness of the yellow is a bit overwhelming for people with photosensitivity, particularly against the black background.
    • Consider replacing the yellow (button text) with black (canvas color) and black with white (canvas text).
  • The secondary buttons (Sign in, Skip this step) don't use the button background color, but should.
  • The import browser data button menu doesn't conform to our HCM standards. See this page (in the menu button section).
  • The "Import all available data" button is a button and should be styled that way in HCM.
  • Focus outline on button menu should be white, not white and blue.

General Notes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment