Chip - Increased hit slop for accessibility

[nitzanyiz]

Description

Increased chip hit slop to fix 48x48 hit target.

Changelog

Chips - Increased chip hit slop to hit 48x48 hit target for accessibility

Additional info

N/A

[Inbal-Tish]

You can calc each once

[Inbal-Tish]

I would separate the return to a different method so getContainerSize will only return the size, i.e. height and width so you can use it in the hitSlop calc and wont have to extract it from the style object.

[nitzanyiz]

Not sure I understand. To something like this?

  const chipSize = useMemo(() => {
    const width = typeof size === 'object' ? _.get(size, 'width') : size;
    const height = typeof size === 'object' ? _.get(size, 'height') : size;
    return {width, height};
  }, [size]);

  const containerSizeStyle = useMemo(() => {
    const {width, height} = chipSize;
    return useSizeAsMinimum ? {minWidth: width, minHeight: height} : {width, height};
  }, [chipSize]);

  const Container = onPress ? TouchableOpacity : View;
  const hitSlop = useMemo(() => {
    const {width = 48, height = 48} = chipSize;
    const verticalHitSlop = Math.max(0, (48 - height) / 2);
    const horizontalHitSlop = Math.max(0, (48 - width) / 2);
    return {
      top: verticalHitSlop,
      bottom: verticalHitSlop,
      left: horizontalHitSlop,
      right: horizontalHitSlop
    };
  }, [chipSize]);

  return (
    <Container
      activeOpacity={1}
      onPress={onPress}
      style={[styles.container, {backgroundColor}, {borderRadius}, containerStyle, containerSizeStyle]}
      .
      .
      .

[Inbal-Tish]

Yes

[Inbal-Tish]

Why do we care if the View gets the hitSlop as well?

[nitzanyiz]

I guess I can pass it...

[Inbal-Tish]

Let's get rid of the _.get