Getting warning to use aria-label when running tests when test markup is correct.

[BMCwebdev]

Provide a general summary of the issue here

I am getting the warning If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility However, even if I set the test up to use only React Aria Components, and in the correct setup, I still get the warning.

🤔 Expected Behavior?

Should not be giving the warning.

😯 Current Behavior

Is giving the warning.

💁 Possible Solution

No response

🔦 Context

I am using Vitest and @testing-library/react

🖥️ Steps to Reproduce

import React from 'react';
import { describe, it, expect, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/react';
import { Header, Section, ListBox } from 'react-aria-components';

afterEach(() => {
  cleanup();
});

describe('Test Component', () => {
  it('renders without warning', () => {
    render(
      <ListBox>
        <Section>
          <Header>Content</Header>
        </Section>
      </ListBox>,
    );
    expect(screen.getByText('Content')).toBeInTheDocument();
  });
});

Version

I am using React-Aria-Components

What browsers are you seeing the problem on?

Firefox

If other, please specify.

This is in my IDE (VSCode)

What operating system are you using?

Mac 14

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

The ListBox itself needs an aria-label. The Header suffices for the Section, but not the entire ListBox.

[yihuiliao]

Closing as a non-issue. If you're still having problems, feel free to reopen.