How to render Label and Text components outside React Aria Components?

[endaquigley]

I'm working on a project at the moment using React Aria Components and I need to render a Label and multiple Text components (e.g. "description" and "errorMessage") outside of the React Aria context. The reason I need to render the Label outside the RadioGroup is because we display an info icon button beside our Label, which isn't a valid RadioGroup child.

export function CustomRadioGroup(props: RadioGroupProps) {
  const { label, description, errorMessage, ...otherProps } = props;

  return (
    <div>
      <Label>{label}</Label>
      <Text slot="description">{description}</Text>
      <RadioGroupPrimitive {...otherProps} />
      <Text slot="errorMessage">{errorMessage}</Text>
    </div>
  );
}

---

However, I’m not sure about the best approach to integrate these components outside their usual context while still maintaining accessibility features. I tried using useRadioGroupState and useRadioGroup but the props keep getting reset:

export function CustomRadioGroup(props: RadioGroupProps) {
  const radioGroupState = useRadioGroupState(props);
  const radioGroupProps = useRadioGroup(props, radioGroupState);

  console.log(radioGroupProps);
  
  return null;
}

---

The only way I've got this to work is by adding a LabelContext, TextContext, RadioGroupContext and RadioContext, manually creating IDs and hooking up the components myself:

function CustomRadioGroup(props: RadioGroupProps) {
  const {
    id,
    label,
    description,
    children,
    ...otherProps
  } = props;

  const labelID = useId();
  const descriptionID = useId();
  const errorMessageID = useId();

  const fallbackRadioGroupID = useId();
  const radioGroupID = id || fallbackRadioGroupID;
  
  const describedBy = [descriptionID, errorMessageID].join(" ");

  const labelContextValue = {
    id: labelID,
  };

  const textContextValue = {
    slots: {
      description: { id: descriptionID },
      errorMessage: { id: errorMessageID },
    },
  };

  const radioGroupContextValue = {
    id: radioGroupID,
    "aria-labelledby": labelID,
    "aria-describedby": describedBy,
  };

  const radioContextValue = {
    "aria-describedby": describedBy,
  };

  return (
    <LabelContext.Provider value={labelContextValue}>
      <TextContext.Provider value={textContextValue}>
        <InputWrapper label={label} description={description}>
          <RadioGroupContext.Provider value={radioGroupContextValue}>
            <RadioContext.Provider value={radioContextValue}>
              <RadioGroupPrimitive {...otherProps}>
                {(renderProps) => (
                  <S.Container>
                    {typeof children === "function"
                      ? children(renderProps)
                      : children}
                  </S.Container>
                )}
              </RadioGroupPrimitive>
            </RadioContext.Provider>
          </RadioGroupContext.Provider>
        </InputWrapper>
      </TextContext.Provider>
    </LabelContext.Provider>
  );
}

Doesn't feel right though... I feel like I'm missing a basic concept 🙃

Any help would be much appreciated.

[snowystinger]

You can use aria-labelledby on the RadioGroup and just omit the Label for it that way.
https://react-spectrum.adobe.com/react-aria/RadioGroup.html#props

export function CustomRadioGroup(props: RadioGroupProps) {
  const { label, description, errorMessage, ...otherProps } = props;

  return (
    <div>
      <div id="foo">{label}</div>
      <RadioGroup {...otherProps} aria-labelledby="foo" />
    </div>
  );
}

Can you say more about why description and error need to be outside as well?

[endaquigley]

Can you say more about why description and error need to be outside as well?

Here's a quick mock up of what we're building. Our label and descriptions can have optional info icon buttons.

If I render the info icon button inside RadioGroupPrimitive then it will be treated as a radio button + would be invalid markup.

[snowystinger]

If it's just the description and the description should always be visible even when there is an error message, you can just do

export function CustomRadioGroup(props: RadioGroupProps) {
  const { label, description, errorMessage, ...otherProps } = props;

  return (
    <div>
      <div id="foo">{label}</div>
      <div id="description">{description}</div>
      <RadioGroup {...otherProps} aria-labelledby="foo" aria-describedby="description">
         {props.children}
         <FieldError />
      </RadioGroup>
    </div>
  );
}

description is just an id, no state goes to it that I recall, unlike FieldError. So this should work.

you can generate the id's with useId, no context should be needed

[endaquigley]

You're right, I could probably simplify the code a bit by removing some of the contexts...

Looks like I still need a context for the Radio elements though, right? (as they are not rendered inside this component). If I don't include the aria-describedby attribute for each of the radio elements then "description" and "errorMessage" is not announced when you tab through each radio element (like they do when the <Text slot="description"> and <Text slot="errorMessage"> is rendered inside RadioGroupPrimitive.

const describedBy = [descriptionID, errorMessageID].join(" ");

const radioContextValue = {
  "aria-describedby": describedBy,
};

Sounds like my approach wasn't a million miles off, just didn't seem right for some reason 🙂

[snowystinger]

Good point, I didn't notice that the aria-describedby was going to both the radiogroup AND the input.

The label should still be fine though. I also might suggest not using the description for this particular use case, as the info icon would then be read as part of each radio's description, and that might be confusing.

[endaquigley]

Just wondering, have you guys ever discussed exposing a compound component to get around issues like this:

<RadioGroup {...otherProps} asCompoundComponent>
  <Label>{label}</Label>
  <Text slot="description">{description}</Text>
  <RadioGroup.Component />
</RadioGroup>

which would render:

<div>
  <div id=":r1:" class="react-aria-Label">Favorite avatar</div>
  <div id=":r2:" class="react-aria-Text">Please select an avatar</div>
  <div role="radiogroup" class="react-aria-RadioGroup" aria-labelledby=":r1:" aria-describedby=":r2:">
    <label class="react-aria-Radio">
      <input type="radio" aria-describedby=":r2:" value="wizard" />
        Wizard
    </label>
    <label class="react-aria-Radio">
      <input type="radio" aria-describedby=":r2:" value="dragon" />
        Dragon
    </label>
  </div>
</div>

Not sure how big of a change that would be...

[snowystinger]

We have not, but it's an interesting idea. ❤️
If you need more rendering flexibility than our components currently provide, we also have hooks, and anyone should be able to recreate a RAC with them. So, theoretically, you could implement this yourself and still have it work in the greater RAC ecosystem.