Bug after upgrading to 0.6.0

[AdamGerthel]

I apologize for not having a reproducible demo, but I'm short on time at the moment.

After upgrading to 0.6.0 from 0.5.0 one of my existing implementations broke. Two sections' subviews became non-selectable. I can't downgrade to 0.5.0 because of another bug that was introduced when I enabled new arch (which 0.6.0 magically resolved).

Before:
https://github.com/user-attachments/assets/3dca3334-8453-4442-b938-d5f18076fa55

After:
https://github.com/user-attachments/assets/46f37f71-662d-4dd5-838a-7907c6110e00

As you can see, I've used react-native-a11y-order to solve the issue where having two sections ("Attributes" and "Derivatives") like that side by side doesn't work well without this package, but with 0.6.0 it seems to only be able to select the whole thing.

Here's a small copy of my components:

        <A11y.Order style={[style.stats, style.section]}>
          <A11y.Index style={{ width: '45%' }} index={1}>
            <CharacterAttributes />
          </A11y.Index>
          <A11y.Index style={{ width: '45%' }} index={2}>
            <Fieldset
              legend={t('CHARACTER-DERIVATIVES')}
              legendSuffix={<Tooltip content={t('HELP-TEXT-DERIVATIVES')} />}
              fields={[
                {
                  label: t('CHARACTER-DERIVATIVE-HEALTH_POINTS-SHORT'),
                  value: `${character.health} / ${character.maxHealth}`
                },
                {
                  label: t('CHARACTER-DERIVATIVE-PROTECTION'),
                  value: character.protection
                },
                {
                  label: t('CHARACTER-DERIVATIVE-SPEED'),
                  value: character.speed.toFixed(1)
                },
                {
                  label: t('CHARACTER-DERIVATIVE-BLOCK_CHANCE'),
                  value: `${parseInt((character.blockChance * 100).toFixed(0))}%`
                },
                {
                  label: t('CHARACTER-DERIVATIVE-ENCUMBRANCE'),
                  prefix: character.overEncumbered && (
                    <Icon
                      width={warningIconSize}
                      height={warningIconSize}
                      name="warning"
                      fill={variables.colors.turmeric}
                      style={style.derivativeWarningIcon}
                    />
                  ),
                  value: `${character.encumbrance} / ${character.stats.maxEncumbrance.value}`
                }
              ]}
            />
          </A11y.Index>
        </A11y.Order>

The Fieldset component (which is also used in <CharacterAttributes /> looks like this:

import React from 'react'
import type { StyleProp, ViewStyle, TextStyle } from 'react-native'
import { View } from 'react-native'
import { Text } from '../text/text'
import style from './fieldset.style'

export interface IFieldsetField {
  label: string
  accessibilityLabel?: string
  value: string | React.ReactNode
  accessibilityValue?: string
  prefix?: React.ReactNode
  suffix?: React.ReactNode
}

type TFieldsetProps = {
  fields: IFieldsetField[]
  fieldStyle?: StyleProp<ViewStyle>
  columns?: boolean
  hideEmpty?: boolean
  hideEmptyFields?: boolean
  emptyText?: string
  keyStyle?: StyleProp<TextStyle>
  legend?: string | React.ReactNode
  legendSuffix?: string | React.ReactNode
  valueStyle?: StyleProp<TextStyle> | ((field: IFieldsetField) => StyleProp<TextStyle>)
  wrapperStyle?: StyleProp<ViewStyle>
  valueWrapperStyle?: StyleProp<ViewStyle>
} & { children?: React.ReactNode }

export const Fieldset: React.FC<TFieldsetProps> = ({
  fields,
  fieldStyle,
  columns = true,
  hideEmpty = false,
  hideEmptyFields = false,
  emptyText,
  keyStyle,
  legend,
  legendSuffix,
  valueStyle,
  wrapperStyle,
  valueWrapperStyle,
  children,
  ...rest
}) => {
  const fieldContent = fields
    ? fields
        .filter(field => (hideEmptyFields ? field.value : true))
        .map((field, i) => (
          <View
            key={i}
            style={[
              style.field,
              columns ? style.fieldColumns : style.fieldNonColumns,
              i === fields.length - 1 && style.fieldLast,
              fieldStyle
            ]}
          >
            <Text
              accessibilityLabel={field.accessibilityLabel}
              style={[style.label, columns ? style.labelColumns : style.labelNonColumns, keyStyle]}
            >
              {field.label}
            </Text>
            <View style={[style.valueWrapper, valueWrapperStyle]}>
              {field.prefix && field.prefix}

              {typeof field.value !== 'object' ? (
                <Text
                  accessibilityLabel={field.accessibilityValue}
                  style={[
                    style.value,
                    typeof valueStyle === 'function' ? valueStyle(field) : valueStyle
                  ]}
                >
                  {field.value}
                </Text>
              ) : (
                field.value
              )}

              {typeof field.suffix === 'object' ? field.suffix : null}
            </View>
          </View>
        ))
    : []

  if (!fieldContent.length && hideEmpty) {
    return null
  }

  return (
    <View style={wrapperStyle}>
      <View style={style.legendWrapper}>
        {legend && (
          <Text accessibilityRole="header" style={[style.legend]}>
            {legend}
          </Text>
        )}
        {legendSuffix && <View style={style.legendSuffixWrapper}>{legendSuffix}</View>}
      </View>
      {children}
      {fieldContent}
      {!fieldContent && <Text style={[style.empty]}>{emptyText}</Text>}
    </View>
  )
}

import { StyleSheet } from 'react-native'
import { variables, styles, helpers } from '../../../styles'

const { colors, distance, fonts } = variables

const style = StyleSheet.create({
  legendWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: distance / 1.5
  },
  legend: {
    ...styles.legend
  },
  legendSuffixWrapper: {
    marginLeft: distance / 2
  },
  field: {
    marginBottom: distance / 3,
    alignItems: 'center'
  },
  fieldLast: {
    marginBottom: 0
  },
  fieldColumns: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  fieldNonColumns: {
    marginBottom: distance
  },
  label: {
    fontFamily: variables.fonts.default,
    ...helpers.FontSizeAndLineHeight(fonts.body - 2),
    color: colors.faded
  },
  labelNonColumns: {
    ...helpers.FontSizeAndLineHeight(fonts.body - 4),
    textTransform: 'uppercase',
    marginBottom: distance / 4
  },
  labelColumns: {
    marginRight: distance / 2
  },
  valueWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  value: {
    fontFamily: variables.fonts.default,
    ...helpers.FontSizeAndLineHeight(fonts.body - 2),
    color: colors.white
  },
  empty: {
    color: colors.faded,
    fontFamily: fonts.defaultItalic,
    ...helpers.FontSizeAndLineHeight(fonts.body - 4)
  }
})

export default style

[ArturKalach]

Hello @AdamGerthel

Sorry for the inconvenience. I will try to find a fix for this. In v0.6.0, I did some refactoring and optimization, and it’s really strange that it ignores the whole block.

Is it iOS, isn't it?

---

BTW:

You probably don’t really need the package for this part :)
For such blocks, you can just use <View collapsable={false} />. Basically, Yoga optimizes views, which can break screen reader navigation. When collapsable={false} is set, it understands that it should group the content inside.

<View collapsable={false}>
           <CharacterAttributes />
          <View View collapsable={false} style={{ width: '45%' }}>
            <Fieldset
             ....
          </View>
</View>

And maybe somewhere inside a Fieldset, if needed.

In any case, I will try to investigate what is wrong with v0.6.0, but it could take some time. Unfortunately, I have a lot of things to do.

[AdamGerthel]

Ok, thanks for the tips, I'll try that!

Edit: Yes, it's iOS

[AdamGerthel]

Looks like collapsable={false} on the inner fieldset view did it. Thanks!