[Feature request] Split and refine the Mobile accessibility checklist

[janmaarten-a11y]

Description

The first version of the Mobile accessibility checklist is now live in the repository and on the primer.style docs site (shipped via #41, closing #36).

In practice, the mobile checklist ended up about twice as long as the existing web checklists. That length makes it harder to scan and harder to hand to a single audience without a lot of "skip this section" caveats. This issue tracks the follow-up edits and improvements needed to bring it in line with the rest of the toolkit.

Requested change

Refactor the Mobile checklist into multiple, more focused variants, mirroring how the web checklists are split today:

• Split by audience: Separate the content into a mobile designer checklist and a mobile engineer checklist, so each role only sees items relevant to their phase of work.
• Split by depth: Offer a full checklist (the comprehensive list we have now) and a high-impact short list that surfaces the most critical items for teams who can't run through the full thing on every project.
• Rebuild the Figma component: Update the Checkpoints component in the Figma library so the new variants are selectable as properties, consistent with the existing web checklist component. This is a heavier lift than the markdown work since the current

[aardrian]

At @janmaarten-a11y's suggestion, leaving a comment here.

The second-last checkbox text under "6. Gestures and motion" causes horizontal scroll in my mobile browser (which is a hassle and reflow issue). In a very quick test, two edits can address it.

1. Remove white-space: pre; from the style for <code>;
2. Add <wbr>s to the HTML for those code chunks to look like this:

• <code>UIAccessibility<wbr>.isReduceMotionEnabled</code>
• <code>Settings<wbr>.Global<wbr>.TRANSITION_<wbr>ANIMATION_<wbr>SCALE</code>

That way the browser isn't wrapping at arbitrary points.

I have no idea the knock-on effect this change for other pages.