feat(settings): add shared pairing illustrations - #20979
Conversation
|
|
||
| export const SyncSuccessImage = ({ className, ariaHidden }: ImageProps) => ( | ||
| <PreparedImage | ||
| ariaLabel="The Firefox fox mascot looking up at floating cards showing an extension, a shield and a lock, and a list of saved items, representing data synced across devices" |
There was a problem hiding this comment.
@LZoog I'm not entirely sure this a good aria... Is this too long?
There was a problem hiding this comment.
Yeah it's pretty long. Since these are basically decorative images I'd make them shorter like, "The Firefox fox mascot balancing extensions, privacy, and menu icons on its nose" or something? It's cute so there's a "user delight" angle that could go into the description. I think as long as we later ask the #a11y folks about what makes sense to hide (in case it's more of a distraction than adding to their experience) vs what we want for low vision users vs the user delight angle then we can update these later.
Btw, is "Firefox fox mascot" what we want to use here? That's probably my main question, on if we should be calling it Kit, or something else.
There was a problem hiding this comment.
We'll need to check-in with ally. I'll file a follow up for the aria labels
cc58b5b to
b9f9756
Compare
| sync-success-image-aria-label = | ||
| .aria-label = The { -brand-firefox } fox mascot looking up at floating cards showing an extension, a shield and a lock, and a list of saved items, representing data synced across devices | ||
| pairing-interrupted-image-aria-label = | ||
| .aria-label = A browser window with a curled-up fox and a mobile device with the fox peeking out, with an exclamation mark between them, showing the connection was interrupted |
There was a problem hiding this comment.
Given that this image is going to be shown on a "Canceled" screen and the "Still want to connect another device?" screen, and there's text directly above the image giving context on timing out / canceling etc., I think keeping it short like, "The Firefox fox mascot shown across devices with an exclamation mark between them" would be good for this one
bcolsson
left a comment
bcolsson
left a comment
There was a problem hiding this comment.
It sounds like these .aria-labels might be changed during a a11y review. It'd be good to finalize those before exposing for localization.
| ); | ||
|
|
||
| /** | ||
| * The decorative surround only — `components/QRCode` renders the QR itself over |
There was a problem hiding this comment.
👍 This comment might go better where we're using it, since this component takes the ariaHidden in as an option rather than just always using aria-hidden on it here.
| pairing-interrupted-image-aria-label = | ||
| .aria-label = A browser window with a curled-up fox and a mobile device with the fox peeking out, with an exclamation mark between them, showing the connection was interrupted | ||
| laptop-qr-code-image-aria-label = | ||
| .aria-label = A laptop showing a QR code next to a mobile device with a scanning frame, with the { -brand-firefox } flame and fox mascot alongside |
There was a problem hiding this comment.
Maybe a bit shorter, "Firefox fox mascot beside a phone and laptop displaying a QR code"? The user will already have the "To connect a device" context at the top and I'm sure we'll edit this page later for a11y.
|
@bcolsson We already did the ally review. Let me track back and make sure this is really what they wanted. |
b9f9756 to
eb1785c
Compare
Because: - We are updating pairing flows and want to land UI components / pages first. - The Pair2 cards share a handful of illustrations. This commit: - Adds five illustrations to `packages/fxa-settings/src/components/images`. - Adds storybook stories and l10n aria labels for each. Closes #FXA-12855
eb1785c to
78a19c3
Compare
3 participants
Because
This pull request
packages/fxa-settings/src/components/images.Issue that this pull request solves
Closes: FXA-12855
Checklist
Put an
xin the boxes that applyHow to review (Optional)
Check out the storybook output here. Compare against figma designs (linked in ticket). Check out code for AI slop and over all adherence to patterns set forth in FxA.
Note, that this is just UI work, wiring up functionality comes later.
Screenshots (Optional)
See story books.
Other information (Optional)
Foundation for the remaining FXA-12855 card PRs, which import these.