fix(core): Fix dont parse accessiblity props or ID if already passing…

… to RNW
tamagui · Oct 30, 2022 · 2797532 · 2797532 · vercel · Oct 30, 2022
1 parent 05bedff
commit 2797532
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 60 deletions.
diff --git a/apps/sandbox/Sandbox.tsx b/apps/sandbox/Sandbox.tsx
@@ -6,7 +6,7 @@ import '../site/app.css'
 
 // import { AppRegistry, useColorScheme } from 'react-native'
 import { TamaguiProvider, styled } from '@tamagui/core'
-import { SheetDemo } from '@tamagui/demos'
+import { LabelDemo, SheetDemo } from '@tamagui/demos'
 // import { SliderDemo, SwitchDemo } from '@tamagui/demos'
 import { AnimationsDemo, AnimationsPresenceDemo } from '@tamagui/demos'
 // import { SliderDemo, SwitchDemo } from '@tamagui/demos'
@@ -99,11 +99,14 @@ export const Sandbox = () => {
 
         {/* <SheetDemo /> */}
 
-        <YStack space="$2" $gtMd={{ space: '$10' }}>
+        {/* space */}
+        {/* <YStack space="$2" $gtMd={{ space: '$10' }}>
           <Circle bc="red" size="$10" />
           <Circle bc="red" size="$10" />
           <Circle bc="red" size="$10" />
-        </YStack>
+        </YStack> */}
+
+        <LabelDemo />
 
         {/* <Square size={100} bc="red" /> */}
         {/* <SheetDemo /> */}

diff --git a/next.md b/next.md
@@ -2,7 +2,6 @@
 
   - When you focus an input in a dialog on mobile or a propover etc. then it disappears
   - select had a perf regression
-  - label htmlFor broke
   - site design system docs (for use in cli later)
   - blog post / home: lighthouse score diff between compiler on / off
   - runthrough and check:

diff --git a/packages/core/src/helpers/getSplitStyles.tsx b/packages/core/src/helpers/getSplitStyles.tsx
@@ -257,70 +257,81 @@ export const getSplitStyles: StyleSplitter = (
         continue
       }
 
-      if (accessibilityDirectMap[keyInit]) {
-        viewProps[accessibilityDirectMap[keyInit]] = valInit
+      if (keyInit === 'id' || keyInit === 'nativeID') {
         usedKeys[keyInit] = 1
+        if (staticConfig.isReactNative) {
+          viewProps.nativeID = valInit
+        } else {
+          viewProps.id = valInit
+        }
         continue
       }
 
       let didUseKeyInit = true
-      switch (keyInit) {
-        case 'nativeID': {
-          viewProps.id = valInit
-          break
+
+      if (staticConfig.isReactNative) {
+        didUseKeyInit = false
+      } else {
+        if (accessibilityDirectMap[keyInit]) {
+          viewProps[accessibilityDirectMap[keyInit]] = valInit
+          usedKeys[keyInit] = 1
+          continue
         }
-        case 'accessibilityRole': {
-          if (valInit === 'none') {
-            viewProps.role = 'presentation'
-          } else {
-            viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
+
+        switch (keyInit) {
+          case 'accessibilityRole': {
+            if (valInit === 'none') {
+              viewProps.role = 'presentation'
+            } else {
+              viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
+            }
+            break
           }
-          break
-        }
-        case 'accessibilityControls': {
-          viewProps['aria-controls'] = processIDRefList(valInit)
-          break
-        }
-        case 'accessibilityDescribedBy': {
-          viewProps['aria-describedby'] = processIDRefList(valInit)
-          break
-        }
-        case 'accessibilityFlowTo': {
-          viewProps['aria-flowto'] = processIDRefList(valInit)
-          break
-        }
-        case 'accessibilityLabelledBy': {
-          viewProps['aria-labelledby'] = processIDRefList(valInit)
-          break
-        }
-        case 'accessibilityKeyShortcuts': {
-          if (Array.isArray(valInit)) {
-            viewProps['aria-keyshortcuts'] = valInit.join(' ')
+          case 'accessibilityControls': {
+            viewProps['aria-controls'] = processIDRefList(valInit)
+            break
           }
-          break
-        }
-        case 'accessibilityLiveRegion': {
-          viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
-          break
-        }
-        case 'accessibilityReadOnly': {
-          viewProps['aria-readonly'] = valInit
-          // Enhance with native semantics
-          if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
-            viewProps.readOnly = true
+          case 'accessibilityDescribedBy': {
+            viewProps['aria-describedby'] = processIDRefList(valInit)
+            break
           }
-          break
-        }
-        case 'accessibilityRequired': {
-          viewProps['aria-required'] = valInit
-          // Enhance with native semantics
-          if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
-            viewProps.required = true
+          case 'accessibilityFlowTo': {
+            viewProps['aria-flowto'] = processIDRefList(valInit)
+            break
+          }
+          case 'accessibilityLabelledBy': {
+            viewProps['aria-labelledby'] = processIDRefList(valInit)
+            break
+          }
+          case 'accessibilityKeyShortcuts': {
+            if (Array.isArray(valInit)) {
+              viewProps['aria-keyshortcuts'] = valInit.join(' ')
+            }
+            break
+          }
+          case 'accessibilityLiveRegion': {
+            viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
+            break
+          }
+          case 'accessibilityReadOnly': {
+            viewProps['aria-readonly'] = valInit
+            // Enhance with native semantics
+            if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
+              viewProps.readOnly = true
+            }
+            break
+          }
+          case 'accessibilityRequired': {
+            viewProps['aria-required'] = valInit
+            // Enhance with native semantics
+            if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
+              viewProps.required = true
+            }
+            break
+          }
+          default: {
+            didUseKeyInit = false
           }
-          break
-        }
-        default: {
-          didUseKeyInit = false
         }
       }
 
@@ -615,6 +626,7 @@ export const getSplitStyles: StyleSplitter = (
     }
     if (!shouldDoClasses) {
       for (const key in parentSplitStyles.style) {
+        if (key in classNames) continue
         if (key in style) continue
         style[key] = parentSplitStyles.style[key]
       }

diff --git a/packages/demos/src/LabelDemo.tsx b/packages/demos/src/LabelDemo.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Input, Label, Switch, XStack, YStack } from 'tamagui'
 
 export function LabelDemo() {

diff --git a/packages/label/src/Label.tsx b/packages/label/src/Label.tsx
@@ -1,5 +1,13 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { GetProps, ReactComponentWithRef, isWeb, styled, themeable, useId } from '@tamagui/core'
+import {
+  GetProps,
+  ReactComponentWithRef,
+  isWeb,
+  styled,
+  themeable,
+  useId,
+  useIsomorphicLayoutEffect,
+} from '@tamagui/core'
 import { createContext } from '@tamagui/create-context'
 import { focusFocusable } from '@tamagui/focusable'
 import { getButtonSized } from '@tamagui/get-button-sized'