@oxy.so/bloom 5.1.0 → 5.1.1

package/src/label/Label.tsx

@@ -37,6 +37,7 @@ const LabelComponent = function Label({
   nativeID,
   htmlFor,
   required = false,
+  requiredLabel,
   disabled = false,
   size: sizeProp,
   style,
@@ -69,7 +70,7 @@ const LabelComponent = function Label({
       {required ? (
         <Text
           variant={SIZE_VARIANT[size]}
-          accessibilityLabel={messages.required}
+          accessibilityLabel={requiredLabel ?? messages.required}
           // `gap-0.5`: an inline margin on web; a nested native
           // `Text` ignores margins, so a thin space stands in for it there.
           style={[{ color: palette.error }, IS_WEB ? { marginLeft: TEXT_FIELD_LEADING_GAP } : null]}>

package/src/label/types.ts

@@ -24,6 +24,8 @@ export interface LabelProps {
    * after the label text. Defaults to `false`.
    */
   required?: boolean;
+  /** Accessible name of the required marker; defaults to the current locale. */
+  requiredLabel?: string;
   /** Visually subdued label (e.g. for optional fields). Defaults to `false`. */
   disabled?: boolean;
   /**

package/src/listing-details/AmenityList.tsx

@@ -5,7 +5,7 @@ import { Button } from '../button';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { AMENITY_LIST_TWO_COLUMN_MIN_WIDTH } from './constants';
-import { resolveListingPalette } from './shared';
+import { surfaceTextOn, useSurfaceFill } from '../styles/surface-levels';
 import { useMessages } from '../locale/messages';
 import { LISTING_DETAILS_MESSAGES } from './messages';
 import type { AmenityListProps } from './types';
@@ -39,7 +39,8 @@ function AmenityListComponent({
   const { messages } = useMessages(LISTING_DETAILS_MESSAGES);
   const unavailableLabel = unavailableLabelProp ?? messages.unavailable;
   const theme = useTheme();
-  const palette = useMemo(() => resolveListingPalette(theme), [theme]);
+  const surface = useSurfaceFill();
+  const palette = useMemo(() => surfaceTextOn(theme, surface), [theme, surface]);
   const { width, onLayout } = useContainerWidth();
 
   const count =
@@ -70,7 +71,7 @@ function AmenityListComponent({
             }}
           >
             {Icon ? (
-              <Icon width={24} height={24} fill={available ? palette.text : palette.muted} />
+              <Icon width={24} height={24} fill={available ? palette.text : palette.textTertiary} />
             ) : null}
             <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
               <Text

package/src/overlay/InteractionBoundary.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { Platform, View } from 'react-native';
+
+/** Stops interaction with caller-owned actions, including web keyboard focus. */
+export function InteractionBoundary({
+  disabled,
+  children,
+}: {
+  disabled: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <View
+      collapsable={false}
+      style={Platform.OS === 'web' ? { display: 'contents' } : undefined}
+      pointerEvents={disabled ? 'none' : 'auto'}
+      accessibilityElementsHidden={disabled}
+      importantForAccessibility={disabled ? 'no-hide-descendants' : 'auto'}
+      {...(Platform.OS === 'web' && disabled ? { inert: true } : null)}
+    >
+      {children}
+    </View>
+  );
+}

package/src/payment-method/PaymentMethodList.tsx

@@ -210,7 +210,7 @@ function PaymentMethodListComponent({
         state={entry.state}
         stateMessage={entry.stateMessage}
         action={entry.action}
-        disabled={isDisabled || entry.disabled === true}
+        disabled={isDisabled || entry.disabled === true || (picker && entry.state != null && entry.state !== 'ok')}
         density={density}
         accessibilityLabel={entry.accessibilityLabel}
         style={entry.style}
@@ -239,6 +239,7 @@ function PaymentMethodListComponent({
           aria-label={name}
           aria-describedby={field.describedBy}
           aria-invalid={field.invalid || undefined}
+          aria-required={field.required || undefined}
           // A `View` has no `disabled` prop for react-native-web to derive
           // `aria-disabled` from, and it never reads `accessibilityState`.
           aria-disabled={isDisabled || undefined}

package/src/place-details/PlaceAmenities.tsx

@@ -1,6 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
+import { Button } from '../button';
+import { LISTING_DETAILS_MESSAGES } from '../listing-details/messages';
 import { Chip } from '../chip';
 import { AmenityList } from '../listing-details/AmenityList';
 import type { Amenity } from '../listing-details/types';
@@ -47,6 +49,7 @@ function PlaceAmenitiesComponent({
   testID,
 }: PlaceAmenitiesProps) {
   const { messages } = useMessages(PLACE_DETAILS_MESSAGES);
+  const { messages: listingMessages } = useMessages(LISTING_DETAILS_MESSAGES);
   const unavailableLabel = unavailableLabelProp ?? messages.notAvailable;
   const accessibilityLabel = accessibilityLabelProp ?? messages.amenities;
   const theme = useTheme();
@@ -81,6 +84,7 @@ function PlaceAmenitiesComponent({
   }
 
   const shown = limit != null && limit >= 0 ? items.slice(0, limit) : items;
+  const fullCount = Math.max(total ?? items.length, items.length);
 
   return (
     <View
@@ -119,6 +123,11 @@ function PlaceAmenitiesComponent({
           </Chip>
         </View>
       ))}
+      {onShowAll && fullCount > shown.length ? (
+        <Button variant="secondary" onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined}>
+          {showAllLabel ? showAllLabel(fullCount) : listingMessages.showAllAmenities(fullCount)}
+        </Button>
+      ) : null}
     </View>
   );
 }

package/src/place-details/PlacePopularTimes.tsx

@@ -127,7 +127,7 @@ function PlacePopularTimesComponent({
           type="radio"
           size="small"
           label={daysLabel}
-          value={selected}
+          value={current?.id ?? ''}
           onValueChange={setSelected}
           testID={testID ? `${testID}-days` : undefined}
         >
@@ -242,8 +242,14 @@ function PlacePopularTimesComponent({
                   // centred on a band that starts at the edge, and a 40-wide
                   // slot centred there would hang outside the block.
                   const left = Math.max(0, Math.min((width ?? 0) - LABEL_SLOT, centre - LABEL_SLOT / 2));
+                  if (currentIndex != null && index !== currentIndex) {
+                    const currentCentre = currentIndex * band + band / 2;
+                    const currentLeft = Math.max(0, Math.min((width ?? 0) - LABEL_SLOT, currentCentre - LABEL_SLOT / 2));
+                    if (Math.abs(left - currentLeft) < LABEL_SLOT) return null;
+                  }
                   return (
                     <Text
+                      testID={testID ? `${testID}-hour-${index}` : undefined}
                       key={`label-${index}`}
                       variant="caption-2-regular"
                       numberOfLines={1}

package/src/proof-of-delivery/ProofOfDelivery.tsx

@@ -8,6 +8,7 @@ import { useControllableState } from '../hooks/use-controllable-state';
 import { InputOtp } from '../input-otp';
 import { useMessages } from '../locale/messages';
 import { SortablePhotoGrid } from '../sortable-media';
+import { InteractionBoundary } from '../overlay/InteractionBoundary';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { TextFieldInput } from '../text-field';
 import { Textarea } from '../textarea';
@@ -138,6 +139,7 @@ function ProofOfDeliveryComponent({
             key={kind}
             label={labels.recipient}
             required={isRequired(kind)}
+            requiredLabel={labelOverrides?.required}
             error={errorFor(kind)}
             disabled={disabled}
           >
@@ -157,6 +159,7 @@ function ProofOfDeliveryComponent({
             key={kind}
             label={labels.signature}
             required={isRequired(kind)}
+            requiredLabel={labelOverrides?.required}
             error={errorFor(kind)}
             disabled={disabled}
             // The pad AND the typed name: one id on two controls is invalid.
@@ -179,6 +182,7 @@ function ProofOfDeliveryComponent({
             label={labels.code}
             description={labels.codeHint}
             required={isRequired(kind)}
+            requiredLabel={labelOverrides?.required}
             error={errorFor(kind)}
             disabled={disabled}
             multiple
@@ -199,6 +203,7 @@ function ProofOfDeliveryComponent({
             label={labels.photo}
             description={labels.photoHint}
             required={isRequired(kind)}
+            requiredLabel={labelOverrides?.required}
             error={errorFor(kind)}
             disabled={disabled}
             multiple
@@ -224,6 +229,7 @@ function ProofOfDeliveryComponent({
             key={kind}
             label={labels.note}
             required={isRequired(kind)}
+            requiredLabel={labelOverrides?.required}
             error={errorFor(kind)}
             disabled={disabled}
           >
@@ -286,7 +292,9 @@ function ProofOfDeliveryComponent({
 
       {summary}
 
-      {actions ?? (
+      {actions != null ? (
+        <InteractionBoundary disabled={disabled || submitting}>{actions}</InteractionBoundary>
+      ) : (
         <Button
           variant="primary"
           size="large"

package/src/proof-of-delivery/shared.ts

@@ -157,7 +157,7 @@ export function isProofGiven(
     case 'signature':
       return isSignatureGiven(value.signature);
     case 'photo':
-      return value.photos.length > 0;
+      return value.photos.some((photo) => photo.status == null || photo.status === 'uploaded');
     case 'code':
       return value.code.length >= codeLength;
     case 'recipient':

package/src/select/Select.tsx

@@ -1,3 +1,4 @@
+import { useRequiredDescription } from './use-required-description';
 import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
@@ -149,6 +150,7 @@ export function SelectTrigger({
     accessibilityLabel: label,
     disabled: disabled === true || rootDisabled === true,
   });
+  const requiredDescription = useRequiredDescription(membership.required, membership.describedBy);
   const isDisabled = membership.disabled;
   const t = palette.trigger;
 
@@ -191,11 +193,13 @@ export function SelectTrigger({
           accessibilityRole: 'button',
           'aria-haspopup': SELECT_TRIGGER_POPUP,
           nativeID: membership.nativeID,
-          'aria-describedby': membership.describedBy,
+          'aria-describedby': requiredDescription.describedBy,
+          accessibilityHint: requiredDescription.hint,
           'aria-invalid': membership.invalid || undefined,
         }}>
         {asChild ? children : field}
       </TriggerSlot>
+      {requiredDescription.description}
     </SelectTriggerStateContext.Provider>
   );
 }

package/src/select/Select.web.tsx

@@ -1,3 +1,4 @@
+import { useRequiredDescription } from './use-required-description';
 import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
@@ -247,6 +248,7 @@ export function SelectTrigger({
     accessibilityLabel: label,
     disabled: disabled === true || ctx.disabled === true,
   });
+  const requiredDescription = useRequiredDescription(membership.required, membership.describedBy);
   const isDisabled = membership.disabled;
   useEffect(() => {
     adoptStyleSheet(TRIGGER_STYLE_ID, TRIGGER_CSS);
@@ -333,12 +335,14 @@ export function SelectTrigger({
           'aria-haspopup': SELECT_TRIGGER_POPUP,
           'aria-expanded': ctx.isOpen,
           nativeID: membership.nativeID,
-          'aria-describedby': membership.describedBy,
+          'aria-describedby': requiredDescription.describedBy,
+          accessibilityHint: requiredDescription.hint,
           'aria-invalid': membership.invalid || undefined,
         }}
       >
         {asChild ? children : field}
       </TriggerSlot>
+      {requiredDescription.description}
     </SelectTriggerStateContext.Provider>
   );
 }

package/src/select/use-required-description.tsx

@@ -0,0 +1,20 @@
+import React, { useId } from 'react';
+import { Platform, Text } from 'react-native';
+import { LABEL_MESSAGES } from '../label/messages';
+import { useMessages } from '../locale/messages';
+
+/** A menu button cannot carry aria-required; announce the field constraint as a description. */
+export function useRequiredDescription(required: boolean, describedBy?: string) {
+  const id = `select-required-${useId()}`;
+  const { messages } = useMessages(LABEL_MESSAGES);
+  return {
+    describedBy: [describedBy, required ? id : undefined].filter(Boolean).join(' ') || undefined,
+    hint: required ? messages.required : undefined,
+    description: required && Platform.OS === 'web' ? (
+      <Text nativeID={id} aria-hidden pointerEvents="none"
+        style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }}>
+        {messages.required}
+      </Text>
+    ) : null,
+  };
+}