refactor: address some deprecations warnings take 1/n

src/view/com/auth/SplashScreen.tsx

@@ -29,8 +29,8 @@ export const SplashScreen = ({
               testID="createAccountButton"
               style={[styles.btn, {backgroundColor: colors.blue3}]}
               onPress={onPressCreateAccount}
-              accessibilityRole="button"
-              accessibilityLabel="Create new account"
+              role="button"
+              aria-label="Create new account"
               accessibilityHint="Opens flow to create a new Bluesky account">
               <Text style={[s.white, styles.btnLabel]}>
                 Create a new account
@@ -40,8 +40,8 @@ export const SplashScreen = ({
               testID="signInButton"
               style={[styles.btn, pal.btn]}
               onPress={onPressSignin}
-              accessibilityRole="button"
-              accessibilityLabel="Sign in"
+              role="button"
+              aria-label="Sign in"
               accessibilityHint="Opens flow to sign into your existing Bluesky account">
               <Text style={[pal.text, styles.btnLabel]}>Sign In</Text>
             </TouchableOpacity>

src/view/com/auth/SplashScreen.web.tsx

@@ -42,8 +42,7 @@ export const SplashScreen = ({
               testID="createAccountButton"
               style={[styles.btn, {backgroundColor: colors.blue3}]}
               onPress={onPressCreateAccount}
-              // TODO: web accessibility
-              accessibilityRole="button">
+              role="button">
               <Text style={[s.white, styles.btnLabel]}>
                 Create a new account
               </Text>
@@ -52,8 +51,7 @@ export const SplashScreen = ({
               testID="signInButton"
               style={[styles.btn, pal.btn]}
               onPress={onPressSignin}
-              // TODO: web accessibility
-              accessibilityRole="button">
+              role="button">
               <Text style={[pal.text, styles.btnLabel]}>Sign In</Text>
             </TouchableOpacity>
           </View>

src/view/com/auth/create/CreateAccount.tsx

@@ -84,7 +84,7 @@ export const CreateAccount = observer(function CreateAccountImpl({
             <TouchableOpacity
               onPress={onPressBackInner}
               testID="backBtn"
-              accessibilityRole="button">
+              role="button">
               <Text type="xl" style={pal.link}>
                 Back
               </Text>
@@ -94,7 +94,7 @@ export const CreateAccount = observer(function CreateAccountImpl({
               <TouchableOpacity
                 testID="nextBtn"
                 onPress={onPressNext}
-                accessibilityRole="button">
+                role="button">
                 {model.isProcessing ? (
                   <ActivityIndicator />
                 ) : (
@@ -107,8 +107,8 @@ export const CreateAccount = observer(function CreateAccountImpl({
               <TouchableOpacity
                 testID="retryConnectBtn"
                 onPress={onPressRetryConnect}
-                accessibilityRole="button"
-                accessibilityLabel="Retry"
+                role="button"
+                aria-label="Retry"
                 accessibilityHint="Retries account creation"
                 accessibilityLiveRegion="polite">
                 <Text type="xl-bold" style={[pal.link, s.pr5]}>

src/view/com/auth/create/Step1.tsx

@@ -80,19 +80,20 @@ export const Step1 = observer(function Step1Impl({
         label="Other"
         onPress={onPressOther}>
         <View style={styles.otherForm}>
-          <Text nativeID="addressProvider" style={[pal.text, s.mb5]}>
+          <Text id="addressProvider" style={[pal.text, s.mb5]}>
             Enter the address of your provider:
           </Text>
           <TextInput
+            accessibilityLabel="Text input field"
             testID="customServerInput"
             icon="globe"
             placeholder="Hosting provider address"
             value={model.serviceUrl}
             editable
             onChange={onChangeServiceUrl}
             accessibilityHint="Input hosting provider address"
-            accessibilityLabel="Hosting provider address"
-            accessibilityLabelledBy="addressProvider"
+            aria-label="Hosting provider address"
+            aria-labelledby="addressProvider"
           />
           {LOGIN_INCLUDE_DEV_SERVERS && (
             <View style={[s.flexRow, s.mt10]}>
@@ -148,10 +149,11 @@ function Option({
   return (
     <View style={[styles.option, pal.border]}>
       <TouchableWithoutFeedback
+        accessibilityRole="button"
         onPress={onPress}
         testID={testID}
-        accessibilityRole="button"
-        accessibilityLabel={label}
+        role="button"
+        aria-label={label}
         accessibilityHint={`Sets hosting provider to ${label}`}>
         <View style={styles.optionHeading}>
           <View style={[styles.circle, pal.border]}>

src/view/com/auth/create/Step2.tsx

@@ -44,13 +44,14 @@ export const Step2 = observer(function Step2Impl({
             Invite code
           </Text>
           <TextInput
+            accessibilityLabel="Text input field"
             testID="inviteCodeInput"
             icon="ticket"
             placeholder="Required for this provider"
             value={model.inviteCode}
             editable
             onChange={model.setInviteCode}
-            accessibilityLabel="Invite code"
+            aria-label="Invite code"
             accessibilityHint="Input invite code to proceed"
           />
         </View>
@@ -60,8 +61,10 @@ export const Step2 = observer(function Step2Impl({
         <Text style={[s.alignBaseline, pal.text]}>
           Don't have an invite code?{' '}
           <TouchableWithoutFeedback
+            accessibilityRole="button"
+            role="button"
             onPress={onPressWaitlist}
-            accessibilityLabel="Join the waitlist."
+            aria-label="Join the waitlist."
             accessibilityHint="">
             <View style={styles.touchable}>
               <Text style={pal.link}>Join the waitlist.</Text>
@@ -71,48 +74,44 @@ export const Step2 = observer(function Step2Impl({
       ) : (
         <>
           <View style={s.pb20}>
-            <Text type="md-medium" style={[pal.text, s.mb2]} nativeID="email">
+            <Text type="md-medium" style={[pal.text, s.mb2]} id="email">
               Email address
             </Text>
             <TextInput
+              accessibilityLabel="Text input field"
               testID="emailInput"
               icon="envelope"
               placeholder="Enter your email address"
               value={model.email}
               editable
               onChange={model.setEmail}
-              accessibilityLabel="Email"
+              aria-label="Email"
               accessibilityHint="Input email for Bluesky waitlist"
-              accessibilityLabelledBy="email"
+              aria-labelledby="email"
             />
           </View>
 
           <View style={s.pb20}>
-            <Text
-              type="md-medium"
-              style={[pal.text, s.mb2]}
-              nativeID="password">
+            <Text type="md-medium" style={[pal.text, s.mb2]} id="password">
               Password
             </Text>
             <TextInput
+              accessibilityLabel="Text input field"
               testID="passwordInput"
               icon="lock"
               placeholder="Choose your password"
               value={model.password}
               editable
               secureTextEntry
               onChange={model.setPassword}
-              accessibilityLabel="Password"
+              aria-label="Password"
               accessibilityHint="Set password"
-              accessibilityLabelledBy="password"
+              aria-labelledby="password"
             />
           </View>
 
           <View style={s.pb20}>
-            <Text
-              type="md-medium"
-              style={[pal.text, s.mb2]}
-              nativeID="birthDate">
+            <Text type="md-medium" style={[pal.text, s.mb2]} id="birthDate">
               Your birth date
             </Text>
             <DateInput
@@ -122,9 +121,9 @@ export const Step2 = observer(function Step2Impl({
               buttonType="default-light"
               buttonStyle={[pal.border, styles.dateInputButton]}
               buttonLabelType="lg"
-              accessibilityLabel="Birthday"
+              aria-label="Birthday"
               accessibilityHint="Enter your birth date"
-              accessibilityLabelledBy="birthDate"
+              aria-labelledby="birthDate"
             />
           </View>
 

src/view/com/auth/create/Step3.tsx

@@ -31,7 +31,7 @@ export const Step3 = observer(function Step3Impl({
           editable
           onChange={model.setHandle}
           // TODO: Add explicit text label
-          accessibilityLabel="User handle"
+          aria-label="User handle"
           accessibilityHint="Input your user handle"
         />
         <Text type="lg" style={[pal.text, s.pl5, s.pt10]}>