@fluentui-react-native/tester 0.78.1 → 0.78.4

package/src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -77,7 +77,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         <View style={{ flexDirection: 'row' }}>
           <View>
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Name for generating initials"
+              style={commonStyles.textBox}
               placeholder="Name for generating initials"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -85,7 +86,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
               }}
             />
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Initials"
+              style={commonStyles.textBox}
               placeholder="Initials"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -94,7 +96,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
             />
             <Text style={{ fontWeight: 'bold' }}>Avatar tokens</Text>
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Background color"
+              style={commonStyles.textBox}
               placeholder="Background color"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -103,7 +106,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
             />
 
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Avatar size"
+              style={commonStyles.textBox}
               placeholder="Avatar size"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -112,7 +116,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
             />
 
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Icon size"
+              style={commonStyles.textBox}
               placeholder="Icon size"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -120,7 +125,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
               }}
             />
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Icon color"
+              style={commonStyles.textBox}
               placeholder="Icon color"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -129,7 +135,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
             />
             <Text style={{ fontWeight: 'bold' }}>Ring tokens</Text>
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Ring background color"
+              style={commonStyles.textBox}
               placeholder="Ring background color"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -137,7 +144,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
               }}
             />
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Ring color"
+              style={commonStyles.textBox}
               placeholder="Ring color"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -145,7 +153,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
               }}
             />
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Ring thickness"
+              style={commonStyles.textBox}
               placeholder="Ring thickness"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -156,7 +165,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
           <View style={{ paddingHorizontal: 20 }}>
             <Text style={{ fontWeight: 'bold' }}>Font tokens</Text>
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Initials text color"
+              style={commonStyles.textBox}
               placeholder="Initials text color"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -164,7 +174,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
               }}
             />
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Initials size"
+              style={commonStyles.textBox}
               placeholder="Initials size"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -172,7 +183,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
               }}
             />
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Font weight"
+              style={commonStyles.textBox}
               placeholder="Font weight"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
@@ -180,7 +192,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
               }}
             />
             <TextInput
-              style={[commonStyles.textBox]}
+              accessibilityLabel="Font family"
+              style={commonStyles.textBox}
               placeholder="Font family"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {

package/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx

@@ -124,6 +124,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
       />
 
       <TextInput
+        accessibilityLabel="Background color"
         style={[commonStyles.textBox, textBoxBorderStyle]}
         placeholder="Background color"
         blurOnSubmit={true}
@@ -133,6 +134,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
       />
 
       <TextInput
+        accessibilityLabel="Checkmark color"
         style={[commonStyles.textBox, textBoxBorderStyle]}
         placeholder="Checkmark color"
         blurOnSubmit={true}

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -122,6 +122,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
         defaultChecked={false}
       />
       <TextInput
+        accessibilityLabel="Background color"
         style={[commonStyles.textBox, textBoxBorderStyle]}
         placeholder="Background color"
         blurOnSubmit={true}
@@ -131,6 +132,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
       />
 
       <TextInput
+        accessibilityLabel="Checkmark color"
         style={[commonStyles.textBox, textBoxBorderStyle]}
         placeholder="Checkmark color"
         blurOnSubmit={true}

package/src/FluentTester/TestComponents/Persona/CustomizeUsage.tsx

@@ -48,6 +48,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         </View>
 
         <TextInput
+          accessibilityLabel="Background color"
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Background color"
           blurOnSubmit={true}
@@ -57,6 +58,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         />
 
         <TextInput
+          accessibilityLabel="Initials text color"
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Initials text color"
           blurOnSubmit={true}

package/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -33,7 +33,15 @@ const StyledTextInput = (props) => {
     commonStyles.textBox,
     { flex: 1, marginHorizontal: 5, borderColor: theme.colors.disabledBodyText, color: theme.colors.inputText },
   ];
-  return <TextInput style={textInputStyles} placeholderTextColor={theme.colors.disabledBodyText} blurOnSubmit={true} {...props} />;
+  return (
+    <TextInput
+      accessibilityLabel={props.placeholder}
+      style={textInputStyles}
+      placeholderTextColor={theme.colors.disabledBodyText}
+      blurOnSubmit={true}
+      {...props}
+    />
+  );
 };
 
 const StyledSwitch = (props) => {

package/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.tsx

@@ -74,6 +74,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         </View>
 
         <TextInput
+          accessibilityLabel="Background color"
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Background color"
           blurOnSubmit={true}
@@ -83,6 +84,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         />
 
         <TextInput
+          accessibilityLabel="Initials text color"
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Initials text color"
           blurOnSubmit={true}
@@ -92,6 +94,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         />
 
         <TextInput
+          accessibilityLabel="Icon stroke color"
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Icon stroke color"
           blurOnSubmit={true}
@@ -101,6 +104,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         />
 
         <TextInput
+          accessibilityLabel="Ring color"
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Ring color"
           blurOnSubmit={true}
@@ -110,6 +114,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         />
 
         <TextInput
+          accessibilityLabel="Ring background color"
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Ring background color"
           blurOnSubmit={true}

package/src/FluentTester/TestComponents/Theme/ThemeTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlatList, View, ViewStyle, StyleSheet, ColorValue } from 'react-native';
+import { View, ViewStyle, StyleSheet, ColorValue } from 'react-native';
 import { useTheme, Theme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { commonTestStyles } from '../Common/styles';
@@ -91,9 +91,7 @@ const SwatchList: React.FunctionComponent = () => {
   return (
     <View style={[commonTestStyles.view]}>
       <Text>getHostSettingsWin32(theme: ITheme).palette</Text>
-      <View style={themedStyles.stackStyle}>
-        <FlatList data={paletteAsArray} renderItem={renderSwatch} />
-      </View>
+      <View style={themedStyles.stackStyle}>{paletteAsArray.map((item) => renderSwatch({ item }))}</View>
     </View>
   );
 };

package/src/FluentTester/TestComponents/Tokens/TokenTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlatList, View, ViewStyle, StyleSheet, ColorValue } from 'react-native';
+import { View, ViewStyle, StyleSheet, ColorValue } from 'react-native';
 import { useTheme, Theme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
@@ -87,9 +87,7 @@ const AliasTokensSwatchList: React.FunctionComponent = () => {
   return (
     <View style={[commonTestStyles.view]}>
       <Text>Alias Color Tokens from Token Pipeline</Text>
-      <View style={themedStyles.stackStyle}>
-        <FlatList data={aliasTokensAsArray} renderItem={renderSwatch} />
-      </View>
+      <View style={themedStyles.stackStyle}>{aliasTokensAsArray.map((item) => renderSwatch({ item }))}</View>
     </View>
   );
 };