Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: When wrapping SwatchPicker with Field component, it didn't add 'aria-labelledby' to SwatchPicker #33269

Open
2 tasks done
sunyd0112 opened this issue Nov 14, 2024 · 0 comments · May be fixed by #33274
Open
2 tasks done

Comments

@sunyd0112
Copy link

Component

Field

Package version

^9.55.1

React version

17.0.1

Environment

System:
    OS: Linux 6.5 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 58.19 GB / 62.78 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Browsers:
    Chrome: 130.0.6723.69

Current Behavior

const OVERLAY_COLOR_OPTIONS: { color: OverlayFixedColor; label: string }[] = [
  {
    color: '#FFFFFF',
    label: strings.OverlayColorWhiteLabel
  },
  {
    color: '#000000',
    label: strings.OverlayColorBlackLabel
  }
];

<Field label='Overlay color' className={styles.configureField}>
      <SwatchPicker
        shape='circular'
        size='extra-small'
        selectedValue={color}
        onSelectionChange={handleSelect}
      >
        {OVERLAY_COLOR_OPTIONS.map((option) => (
          <Tooltip key={option.color} content={option.label} relationship='label'>
            <ColorSwatch className={styles.overlayColorSwatch} color={option.color} value={option.color} />
          </Tooltip>
        ))}
      </SwatchPicker>
    </Field>

I have a code like this.
But the Field component failed to add 'aria-labelledby' to SwatchPicker.

Expected Behavior

I expect it to associate label to SwatchPicker, since Field can associate lable to a RadioGroup.

Reproduction

https://stackblitz.com/edit/vitejs-vite-2yvhod?file=src%2FApp.tsx

Steps to reproduce

  1. Open the stackblitz link
  2. run the project
  3. F12 on the 'Overlay color' label
  4. Observe the issue. There is no aria-labelledby.
  5. Image

But in Fluent v9 demo page, it can add aria-labelledby to a radio group.
https://react.fluentui.dev/iframe.html?viewMode=docs&id=components-field--docs#component-examples

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment