Proposed CSC Standards
Mobile application standards
Rules for a native screen. These are not the web DOM rules copied into React Native.
Rules
Build the pressable the screen needs
A native action is a pressable with a label and onPress. Do not copy web attributes such as className or a DOM type.
Implementation detail
Web button props do not exist on a native pressable.
Use the platform pressable. Set accessibilityLabel from the visible label. Do not pass className, variant, or a DOM type.
Check: The control is a pressable with accessibilityLabel, not a web button.
Name pressables with accessibilityLabel
Button sets accessibilityLabel from label. TextField sets it from label.
Implementation detail
React Native does not use aria-label. The native prop is accessibilityLabel.
Set accessibilityLabel from the visible label. Do not copy aria-label onto a pressable and expect the web result.
Check: The pressable has accessibilityLabel.
Use at least 48 density-independent pixels for primary press targets
The native button style sets minHeight 48.
Implementation detail
Proposed CSC Standard for the native button. It is not WCAG 2.5.8, which is a web criterion.
Keep minHeight 48 on primary pressables. Do not cite it as a WCAG AA web requirement.
Check: The primary button style minHeight is 48.
Pad screens for the safe area
Screen content is not drawn under the status bar or the home indicator.
Implementation detail
Proposed CSC Standard. Safe-area handling on iOS and Android is a platform inset, not CSS env().
Use the screen padding or the platform safe-area API. Do not paste env(safe-area-inset-top) into a StyleSheet and expect it to work.
Check: The first line of content clears the status bar on both platforms.
Prefer platform dialogs for destructive confirms
A destructive confirm uses the platform alert API, not a web modal port.
Implementation detail
Proposed CSC Standard. A copied web dialog will not run on a native screen.
Use the platform alert API for a destructive confirm.
Check: The confirm is a platform dialog, not a web dialog.
Examples
A pressable uses a label and onPress. accessibilityLabel matches the visible label. The fill is #2A338F.
Imports: None. Dependencies: None. Rules: MOB-001, MOB-002.
export function Submit() {
return <Pressable accessibilityLabel="Submit application" onPress={() => {}} style={{ backgroundColor: '#2A338F', minHeight: 48, borderRadius: 8 }}><Text style={{ color: '#fff' }}>Submit application</Text></Pressable>;
}className, a DOM type, and aria-busy are web attributes. A pressable uses accessibilityLabel and onPress.
Imports: None. Dependencies: None. Rules: MOB-001.
export function Submit() {
return <Pressable type="submit" className="btn-primary">Submit</Pressable>;
}Testing checklist
Reusable prompts for this guideline are in the AI Development Hub.