@ledvance/base 1.3.78 → 1.3.79

package/localazy.json

@@ -1200,7 +1200,10 @@
                 "MATCH:setting_set_passwd",
                 "MATCH:camera_user",
                 "MATCH:camera_motiondetection",
-                "MATCH:camera_motiondetectiondescription"
+                "MATCH:camera_motiondetectiondescription",
+                "MATCH:wifi_repeater_title",
+                "MATCH:wifi_repeater_description",
+                "MATCH:wifi_repeater_group_tips"
             ],
             "replacements": {
                 "REGEX:% %1\\$s.*?\\)%": "{0}",

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.3.78",
+  "version": "1.3.79",
   "scripts": {
     "prepublishOnly": "python update-localazy.py"
   },

package/src/components/AdvanceCard.tsx

@@ -53,6 +53,8 @@ const AdvanceCard = (props: AdvanceCardProps) => {
       onPress={props.onPress}>
       {!!statusColor && <View style={styles.dotBg}>
           <View
+              accessibilityLabel={"StatusDot"}
+              accessibilityHint={statusColor}
               style={[
                 styles.dot,
                 {backgroundColor: props.data.statusColor},
@@ -61,7 +63,7 @@ const AdvanceCard = (props: AdvanceCardProps) => {
       {
         props.children ?
           props.children :
-          <View style={styles.titleBg}>
+          <View accessibilityLabel='AdvanceCard' accessibilityHint={props.data.title} style={styles.titleBg}>
             <Text style={{...styles.title, color: props.theme?.global.fontColor}}>{props.data.title}</Text>
             <Spacer height={cx(8)} />
             {

package/src/components/Card.tsx

@@ -32,7 +32,7 @@ const Card = (props: CardProps) => {
         },
         borderRadius: cx(10),
       }, props.style]}>
-      <TouchableOpacity disabled={!(!!props.onPress)} onPress={props.onPress} onLongPress={props.onLongPress}>
+      <TouchableOpacity accessible={false} disabled={!(!!props.onPress)} onPress={props.onPress} onLongPress={props.onLongPress}>
         <View style={props.containerStyle}>{props.children}</View>
       </TouchableOpacity>
     </View>

package/src/components/Cell.tsx

@@ -17,6 +17,8 @@ interface CellProps {
 export default withTheme(function Cell(props: CellProps) {
   return (
     <TouchableOpacity
+      accessibilityLabel={"Cell"}
+      accessibilityHint={props.value}
       style={[{
         height: cx(50),
         paddingHorizontal: cx(24),

package/src/components/ColorAdjustView.tsx

@@ -70,7 +70,7 @@ const NewColorPicker = React.memo((props: ColorAdjustViewProps) => {
       }}>
         <RectColorAndBrightPicker.ColourPicker
           value={hsv}
-          brightOption={{min: scaleUp(minBrightnessValue), minPercent: minBrightness ? minBrightness : 0}}
+          brightOption={{min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0}}
           onGrant={() => state.moving = true}
           onMove={handleMove}
           onRelease={handleComplete}

package/src/components/ColorTempAdjustView.tsx

@@ -92,15 +92,15 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
         {
           isSupportTemperature ? <RectColorAndBrightPicker.WhitePicker
             value={white}
-            brightOption={{min: scaleUp(minBrightnessValue), minPercent: minBrightness ? minBrightness : 0}}
+            brightOption={{min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0}}
             onGrant={() => state.moving = true}
             onMove={handleMove}
             onRelease={handleComplete}
             onPress={handleComplete}
           /> : <RectColorAndBrightPicker.BrightnessSlider
             value={stateBrightness}
-            min={minBrightnessValue}
-            minPercent={minBrightness ? minBrightness : 0}
+            min={scaleUp(minBrightnessValue)}
+            minPercent={minBrightnessValue ? minBrightnessValue : 0}
             clickEnabled={true}
             onGrant={() => state.moving = true}
             onMove={handleBrightnessMove}

package/src/components/DeleteButton.tsx

@@ -19,8 +19,11 @@ const DeleteButton = (props: DeleteButtonProps) => {
   const { text, onPress, style, textStyle, disabled } = props
   return (
     <TouchableOpacity
+      accessibilityLabel={"DeleteButton"}
+      accessibilityHint={text}
+      accessibilityState={{disabled}}
       disabled={disabled}
-      onPress={onPress}
+      onPress={disabled ? undefined : onPress}
       style={[{
         width: '100%',
         height: cx(50),

package/src/components/DrawToolView.tsx

@@ -250,6 +250,7 @@ const DrawToolView = (props: DrawToolViewProps) => {
                     text={I18n.getLang('auto_scan_system_wifi_confirm')}
                     style={{ width: cx(150), height: cx(40), backgroundColor: ledNumValidator(state.ledNum) ? props.theme?.button.primary : props.theme?.button.disabled }}
                     textStyle={{ fontSize: cx(14) }}
+                    disabled={!ledNumValidator(state.ledNum)}
                     onPress={() => {
                       if (!ledNumValidator(state.ledNum)) return
                       props.setLedNum(state.ledNum)

package/src/components/HybridSwitchView.tsx

@@ -91,6 +91,9 @@ const HybridSwitchView = (props: HybridSwitchViewProps) => {
           <View style={styles.container}>
             {props.switchChannels.map((channel, index) => (
               <TouchableOpacity
+                accessibilityLabel={"HybridSwitch"}
+                accessibilityHint={`${index}`}
+                accessibilityState={{checked: channel}}
                 key={index}
                 activeOpacity={Platform.OS === 'ios' ? 0.5 : 0.9}
                 onPress={() => {

package/src/components/OptionGroup.tsx

@@ -71,7 +71,12 @@ const OptionGroup = (props: OptionGroupProps) => {
 
   const OptionItem = (props: OptionItemProps) => {
     return (
-      <TouchableOpacity onPress={() => props.onPress && props.onPress(props.value)}>
+      <TouchableOpacity
+        accessibilityLabel={"OptionItem"}
+        accessibilityHint={props.value}
+        accessibilityState={{checked: props.enable}}
+        onPress={() => props.onPress && props.onPress(props.value)}
+      >
         <View style={styles.itemRoot}>
           <View style={styles.itemTextGroup}>
             <Text style={styles.itemTitle}>{props.title}</Text>

package/src/components/OsramFanAdjustView.tsx

@@ -0,0 +1,93 @@
+import React from "react"
+import { View, Text, TouchableOpacity, Image } from "react-native"
+import LdvSwitch from "./ldvSwitch"
+import I18n from "@i18n"
+import LdvSlider from "./ldvSlider"
+import Spacer from "./Spacer"
+import ThemeType from "config/themeType"
+import { Utils } from "tuya-panel-kit"
+import Popup from "./Popup"
+import res from "@res"
+import Segmented from "./Segmented"
+
+const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
+
+interface OsramFanAdjustProps {
+  theme?: ThemeType
+  hideFanSwitch?: boolean
+  fanSwitch: boolean
+  setFanSwitch: (v: boolean) => void
+  fanSpeed: number
+  minSpeed?: number
+  maxSpeed?: number
+  onFanSpeedChange?: (v: number) => void
+  setFanSpeed: (v: number) => void
+  fanMode: 'fresh' | 'nature'
+  setFanMode: (v: 'fresh' | 'nature') => void
+}
+
+const OsramFanAdjustView = (props: OsramFanAdjustProps) => {
+  const { hideFanSwitch = false, fanSwitch, setFanSwitch, fanSpeed, onFanSpeedChange, setFanSpeed, minSpeed = 1, maxSpeed = 3, fanMode, setFanMode } = props
+  return (
+    <View>
+      {
+        !hideFanSwitch && <LdvSwitch
+          title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
+          enable={fanSwitch}
+          setEnable={setFanSwitch}
+        />
+      }
+      {
+        fanSwitch && (
+          <>
+            <LdvSlider
+              title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_text')}
+              subTitleStr={`${fanSpeed}/${maxSpeed}`}
+              value={fanSpeed}
+              min={minSpeed}
+              max={maxSpeed}
+              onValueChange={onFanSpeedChange}
+              onSlidingComplete={setFanSpeed}
+            />
+            <Spacer />
+            <View style={{ marginHorizontal: cx(16) }}>
+              <View style={{ flexDirection: 'row', marginBottom: cx(2), alignItems: 'center' }}>
+                <Text style={{ marginRight: cx(5), color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_tile_uvc_fan_mode')}</Text>
+                <TouchableOpacity onPress={() => Popup({
+                  title: I18n.getLang('ceiling_fan_mode_info_headline'),
+                  confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
+                  content: <View>
+                    <Text style={{
+                      fontWeight: 'bold',
+                      color: props.theme?.global.fontColor,
+                    }}>{I18n.getLang('ceiling_fan_mode_info_description_text')}</Text>
+                    <Spacer />
+                    <Text style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
+                    <Text style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
+                    <Spacer />
+                    <Text style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
+                    <Text style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
+                  </View>,
+                })}>
+                  <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.icon.primary }} source={{ uri: res.ic_info }} />
+                </TouchableOpacity>
+              </View>
+              <Segmented
+                options={[
+                  { label: I18n.getLang('ceiling_fan_tile_uvc_fan_mode_opt_1'), value: 'fresh' },
+                  { label: I18n.getLang('ceiling_fan_tile_uvc_fan_mode_opt_2'), value: 'nature' },
+                ]}
+                value={fanMode}
+                onChange={setFanMode}
+              />
+            </View>
+            <Spacer />
+          </>
+        )
+      }
+    </View>
+  )
+}
+
+export default withTheme(OsramFanAdjustView)

package/src/components/Page.tsx

@@ -70,7 +70,11 @@ const Page = (props: PageProps) => {
 
   return (
     <>
-      <View style={[{ flex: 1, position: 'relative', backgroundColor: props.theme?.global.background }, props.style]}>
+      <View
+        accessibilityLabel='Page'
+        accessibilityHint={props.headlineText} 
+        style={[{ flex: 1, position: 'relative', backgroundColor: props.theme?.global.background }, props.style]}
+      >
         <LDVTopBar
           title={props.backText}
           onBackPress={

package/src/components/Popup.tsx

@@ -26,6 +26,8 @@ const InformationPopup = (props: InformationPopupProps) => {
           }}>{props.title}</Text>
         </View>
         <TouchableOpacity
+          accessibilityLabel='PopupCloseButton'
+          accessibilityHint={props.confirmText}
           style={{
             flexDirection: 'column-reverse',
             alignItems: 'center',

package/src/components/Segmented.tsx

@@ -57,6 +57,9 @@ const Segmented = (props: SegmentedProps) => {
     <View style={[styles.wrap_container, props.style]}>
       {props.options && props.options.map((item, idx) => (
         <TouchableOpacity
+          accessibilityLabel={"Segmented"}
+          accessibilityHint={item.value}
+          accessibilityState={{checked: item.value === props.value}}
           style={[
             styles.segmented_item,
             idx === 0 && styles.segmented_item_first,

package/src/components/SocketItem.tsx

@@ -13,6 +13,7 @@ interface SocketItemProps extends PropsWithChildren<ViewProps>{
   theme?: ThemeType
   title: string
   name: string
+  placeholder?: string
   icon?: any
   disabledEdit?: boolean
   onNameChange: (value: string) => void
@@ -65,12 +66,19 @@ function SocketItem(props: SocketItemProps) {
             onValueChange={props.onSwitchChange} />
         </View>
         <TouchableOpacity
+          accessibilityLabel={"Description"}
+          accessibilityHint={props.name}
           style={styles.nameLine}
           onPress={() => {
             if(props.disabledEdit) return
             Dialog.prompt({
               title: I18n.getLang('routines_add_edit_name'),
               value: props.name,
+              accessibilityLabel: "DialogInput",
+              accessibilityHint: props.name,
+              confirmAccessibilityLabel: "DialogConfirm",
+              cancelAccessibilityLabel: "DialogCancel",
+              placeholder: props.placeholder,
               cancelText: I18n.getLang('auto_scan_system_cancel'),
               confirmText: I18n.getLang('auto_scan_system_wifi_confirm'),
               inputWrapperStyle: {backgroundColor: props.theme?.textInput.background, borderRadius: cx(10)},
@@ -83,7 +91,7 @@ function SocketItem(props: SocketItemProps) {
               },
             })
           }}>
-          <Text style={styles.name}>{props.name}</Text>
+          <Text style={styles.name}>{props.name || props.placeholder}</Text>
         </TouchableOpacity>
         <Spacer height={cx(16)} />
         {props.children}

package/src/components/Stepper.tsx

@@ -111,12 +111,16 @@ const Stepper = (props: StepperProps) => {
   return (
     <View style={[styles.stepperContainer, props.style]}>
       <TouchableOpacity
+        accessibilityLabel={"StepperMinusButton"}
+        accessibilityHint={`${state.value}`}
         style={[styles.stepperButton, props.buttonStyle]}
         onPress={() => handlePress(false)}
       >
         <Image style={styles.stepperIcon} source={{uri: res.ic_minus}} />
       </TouchableOpacity>
       <TextInput
+        accessibilityLabel={"StepperInput"}
+        accessibilityHint={`${state.value}`}
         style={[styles.stepperInput, props.inputStyle]}
         value={state.value.toString()}
         keyboardType="numeric"
@@ -127,6 +131,8 @@ const Stepper = (props: StepperProps) => {
         editable={props.editable || props.disabled}
       />
       <TouchableOpacity
+        accessibilityLabel={"StepperPlusButton"}
+        accessibilityHint={`${state.value}`}
         style={[styles.stepperButton, props.buttonStyle]}
         onPress={() => handlePress(true)}
       >

package/src/components/StripAdjustView.tsx

@@ -6,6 +6,7 @@ import Spacer from "./Spacer";
 import { TabBar, Utils } from "tuya-panel-kit";
 import { ColorDisk } from "@tuya/tuya-panel-lamp-sdk";
 import res from "../res";
+import ThemeType from "../config/themeType";
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
@@ -14,6 +15,7 @@ type TabsNode = {
   title: string
 }
 interface StripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
+  theme?: ThemeType
   lampTabs: TabsNode[]
   activeKey: number | string
   onActiveKeyChange: (key: number | string) => void

package/src/components/Tag.tsx

@@ -1,6 +1,6 @@
-import {Image, StyleSheet, Text, TouchableOpacity, View, ViewProps} from 'react-native'
+import { Image, StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-native'
 import React from 'react'
-import {Utils} from 'tuya-panel-kit'
+import { Utils } from 'tuya-panel-kit'
 import res from '../res'
 import ThemeType from '../config/themeType'
 
@@ -49,13 +49,17 @@ const Tag = (props: TagProps) => {
       onPress={() => {
         props.onCheckedChange(!props.checked)
       }}>
-      <View style={[styles.root, props.checked ? styles.checked : styles.uncheck, props.style]}>
-        <Text style={[styles.text, {marginEnd: cx(props.checked ? 4 : 12)}]}>{props.text}</Text>
+      <View
+        accessibilityLabel={"Tag"}
+        accessibilityHint={props.text}
+        accessibilityState={{ checked: props.checked }}
+        style={[styles.root, props.checked ? styles.checked : styles.uncheck, props.style]}
+      >
+        <Text style={[styles.text, { marginEnd: cx(props.checked ? 4 : 12) }]}>
+          {props.text}
+        </Text>
         {
-          props.checked &&
-            <Image
-                source={{uri: res.ic_arrows_nav_clear}}
-                style={styles.icon}/>
+          props.checked ? <Image accessibilityLabel='TagClearIcon' source={{ uri: res.ic_arrows_nav_clear }} style={styles.icon} /> : <></>
         }
       </View>
     </TouchableOpacity>

package/src/components/TextButton.tsx

@@ -14,6 +14,8 @@ interface TextButtonProps {
 export default function TextButton(props: TextButtonProps) {
   return (
     <TouchableOpacity
+      accessibilityLabel={"TextButton"}
+      accessibilityHint={props.text}
       style={[{
         justifyContent: 'center',
         alignItems: 'center',
@@ -29,4 +31,4 @@ export default function TextButton(props: TextButtonProps) {
       }, props.textStyle]}>{props.text}</Text>
     </TouchableOpacity>
   )
-}
+}

package/src/components/TextField.tsx

@@ -70,14 +70,15 @@ const TextField = (props: TextFieldProps) => {
     <View style={props.style}>
       <Text style={[styles.topTip, { opacity: (!!props.value) ? 1 : 0 }]}>{props.placeholder}</Text>
       <View style={styles.textInputGroup}>
-        <TextInput{...props} style={styles.textInput} />
+        <TextInput {...props} accessibilityLabel={"TextInput"} accessibilityHint={props.value} style={styles.textInput} />
         {!!props.value && editable &&
             <TouchableOpacity
+                accessibilityLabel={"TextInputClearButton"}
                 style={styles.iconTouchable}
                 onPress={() => {
                   props.onChangeText && props.onChangeText('')
                 }}>
-                <Image source={{ uri: res.ic_cancel }} style={styles.icon} />
+                <Image source={{uri: res.ic_cancel}} style={styles.icon}/>
             </TouchableOpacity>
         }
         <View style={styles.line} />

package/src/components/TextFieldStyleButton.tsx

@@ -67,11 +67,11 @@ const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
       <View style={props.style}>
           <View style={styles.tipParent}>
               <Text style={styles.topTip}>{props.placeholder}</Text>
-              {props.showTipIcon && <TouchableOpacity onPress={props.onTipIconPress}>
+              {props.showTipIcon && <TouchableOpacity accessibilityLabel={"TipIcon"} onPress={props.onTipIconPress}>
                   <Image source={{uri: res.ic_info}} style={styles.tipIcon}/>
               </TouchableOpacity>}
           </View>
-          <TouchableOpacity onPress={props.onPress}>
+          <TouchableOpacity accessibilityLabel={"TextFieldStyleButton"} accessibilityHint={props.text} onPress={props.onPress}>
               <View style={styles.textGroup}>
                   <View style={styles.textParent}>
                       <Text style={styles.text}>{props.text}</Text>

package/src/components/UATabs.tsx

@@ -54,6 +54,9 @@ const UATabs = (props: UATabsProps) => {
           const active = props.active === item.value
 
           return <TouchableOpacity
+            accessibilityLabel={"UATabs"}
+            accessibilityHint={item.value}
+            accessibilityState={{checked: active}}
             key={index}
             style={{ flex: 1 }}
             onPress={() => {

package/src/components/ldvColorBrightness.tsx

@@ -7,6 +7,9 @@ export default function LdvColorBrightness(props) {
   const renderBrightness = () => {
     return (
       <LdvSlider
+        accessibilityLabel={"Brightness"}
+        accessibilityHint={`${value}`}
+        max={100}
         min={minBrightness}
         style={props.style}
         title={I18n.getLang('light_sources_tile_dim_lighting_brightness')}
@@ -16,4 +19,4 @@ export default function LdvColorBrightness(props) {
     )
   }
   return renderBrightness()
-}
+}

package/src/components/ldvColorSlider.tsx

@@ -96,10 +96,11 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
 
   return (
     <View style={[styles.container, props.style]}>
-      <Text style={styles.title}>
+      <Text accessibilityLabel={"Color"} accessibilityHint={`${value}`} style={styles.title}>
         {title}
       </Text>
       <Slider.Horizontal
+        accessibilityLabel={"ColorSliderHorizontal"}
         style={{...styles.shadeSlider, width}}
         styles={{track: styles.sliderTrack, thumb: {...styles.shadeThumb, backgroundColor: thumbColor}}}
         maximumValue={max}

package/src/components/ldvPickerView.tsx

@@ -55,6 +55,8 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
     <View key={props.theme?.type} style={[styles.pickerContainer, props.style]}>
       <View style={styles.picContainer}>
         <Picker
+          accessibilityLabel={"HourPicker"}
+          accessibilityHint={hour}
           itemTextColor='#aeadb5'
           style={[styles.picker, styles.pickerLeft]}
           loop={true}
@@ -76,6 +78,8 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
       </View>
       <View style={styles.picContainer}>
         <Picker
+          accessibilityLabel={"MinutePicker"}
+          accessibilityHint={minute}
           itemTextColor='#aeadb5'
           style={[styles.picker, styles.pickerLeft]}
           loop={true}

package/src/components/ldvPresetView.tsx

@@ -59,6 +59,8 @@ const LdvPresetView = (props) => {
     <View style={styles.container}>
       {dataSource.map((item, index) =>
         <TouchableOpacity
+          accessibilityLabel={"PresetNode"}
+          accessibilityHint={`${item.color}`}
           key={index}
           style={[styles.item, {backgroundColor: item.color}]}
           onPress={() => {
@@ -84,4 +86,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default LdvPresetView
+export default LdvPresetView

package/src/components/ldvSaturation.tsx

@@ -8,6 +8,8 @@ const LdvSaturation = (props) => {
   const renderBrightness = () => {
     return (
       <LdvSlider
+        accessibilityLabel={"Saturation"}
+        accessibilityHint={`${value}`}
         style={props.style}
         title={I18n.getLang('light_sources_tile_rgb_lighting_saturation')}
         value={value}
@@ -20,4 +22,4 @@ const LdvSaturation = (props) => {
   return renderBrightness()
 }
 
-export default LdvSaturation
+export default LdvSaturation

package/src/components/ldvSlider.tsx

@@ -1,13 +1,13 @@
 import {useReactive} from 'ahooks'
 import React, {useEffect} from 'react'
-import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native'
+import {AccessibilityProps, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native'
 import {Slider, Utils} from 'tuya-panel-kit'
 import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
-interface LdvSliderProps {
+interface LdvSliderProps extends AccessibilityProps{
   theme?: ThemeType
   title: string,
   value: number,
@@ -77,7 +77,11 @@ const LdvSlider = (props: LdvSliderProps) => {
 
   return (
     <View style={[styles.container, props.style]}>
-      <View style={styles.titleBg}>
+      <View
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityHint={props.accessibilityHint}
+        style={styles.titleBg}
+      >
         <Text style={[styles.title, titleStyle]}>
           {props.title}
         </Text>
@@ -86,6 +90,7 @@ const LdvSlider = (props: LdvSliderProps) => {
         </Text>
       </View>
       <Slider.Horizontal
+        accessibilityLabel={"SliderHorizontal"}
         style={[styles.slider, sliderStyle]}
         styles={{thumb: styles.thumb}}
         maximumValue={mMax}

package/src/components/ldvSwitch.tsx

@@ -23,7 +23,7 @@ interface Prop {
 const LdvSwitch = (props: Prop) => {
   const {title, color, colorAlpha = 0, enable, description, titleStyle, setEnable, leftValue, rightValue, showSwitch = true} = props
   return (
-    <View style={styles.titleBGView}>
+    <View accessibilityLabel={"LdvSwitch"} accessibilityHint={`${color}`} accessibilityState={{checked: enable}} style={styles.titleBGView}>
       <View style={{flexDirection: 'column', flex: 1}}>
         <View style={{flexDirection: 'row', alignItems: 'center'}}>
           <Text style={[styles.title, {color: props.theme?.global.fontColor}, titleStyle]}>{title}</Text>
@@ -33,7 +33,7 @@ const LdvSwitch = (props: Prop) => {
       </View>
       {showSwitch && <>
         {leftValue && <Text style={{color: props.theme?.global.fontColor, marginRight: cx(5)}}>{leftValue}</Text>}
-          <SwitchButton value={enable} onValueChange={setEnable}/>
+          <SwitchButton accessibilityLabel={"SwitchButton"} value={enable} onValueChange={setEnable}/>
         {rightValue && <Text style={{color: props.theme?.global.fontColor, marginLeft: cx(5)}}>{rightValue}</Text>}
       </>
       }

package/src/components/ldvTemperatureSlider.tsx

@@ -24,6 +24,7 @@ interface LdvTemperatureSliderProps {
   style?: StyleProp<ViewStyle> | undefined
   titleStyle?: StyleProp<TextProps> | undefined
   subTitleStr?: string | undefined
+  accessibilityLabel?: string | undefined
 }
 
 const LdvTemperatureSlider = (props: LdvTemperatureSliderProps) => {
@@ -43,11 +44,12 @@ const LdvTemperatureSlider = (props: LdvTemperatureSliderProps) => {
   return (
     <View style={[styles.container, props.style]}>
       <View style={styles.titleBg}>
-        <Text style={[styles.title, titleStyle]}>
+        <Text accessibilityLabel={"Temperature"} accessibilityHint={`${value}`}  style={[styles.title, titleStyle]}>
           {title}
         </Text>
       </View>
       <Slider.Horizontal
+        accessibilityLabel={"TemperatureSliderHorizontal"}
         style={{...styles.shadeSlider, width}}
         styles={{track: styles.sliderTrack, thumb: {...styles.shadeThumb, backgroundColor: thumbColor}}}
         maximumValue={max}
@@ -137,4 +139,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default LdvTemperatureSlider
+export default LdvTemperatureSlider

package/src/components/ldvTopBar.tsx

@@ -29,7 +29,7 @@ const LDVTopBar = (props: TopBarProps) => {
         marginTop: Platform.OS === 'ios' ? Utils.RatioUtils.statusBarHeight : 0,
         justifyContent: 'space-between',
       }}>
-      <TouchableOpacity onPress={props.onBackPress} style={{flex: 1, maxWidth: cx(290)}} >
+      <TouchableOpacity accessibilityLabel={"GoBack"} onPress={props.onBackPress} style={{flex: 1, maxWidth: cx(290)}} >
         <View
           style={{
             flexDirection: 'row',
@@ -52,6 +52,8 @@ const LDVTopBar = (props: TopBarProps) => {
       </TouchableOpacity>
       {!!props.rightButtonIcon &&
           <TouchableOpacity
+              accessibilityLabel={"RightButton"}
+              accessibilityState={{disabled: props.rightButtonDisabled}}
               style={{
                 width: cx(44),
                 height: cx(44),

package/src/components/ldvTopName.tsx

@@ -54,6 +54,7 @@ const LdvTopName = (props: LdvTopNameProps) => {
           /> || null}
         </View>}
         {props.rightIcon && <TouchableOpacity
+            accessibilityLabel={"RightIcon"}
           onPress={props.rightIconClick}>
           <Image
             style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.brand }}

package/src/components/rect-color-and-bright-picker/ColourPicker.tsx

@@ -233,6 +233,8 @@ export default class ColourPicker extends Component<ColourProps, IState> {
     return (
       <View style={[{ flex: 1 }, style]}>
         <RectPicker
+          accessibilityLabel={"RectColorPicker"}
+          accessibilityHint={`${hue}, ${ Math.round(saturation / 10)}`}
           coorToValue={this.coorToValue}
           valueToColor={this.valueToColor}
           valueToCoor={this.valueToCoor}