英文:
How do I tab to a non-standard element while unit-testing for keyboard accessibility?
问题
## 背景我有一个React/TypeScript项目，我使用Jest和React Testing Library (RTL)进行测试。我有一个通过的测试，测试了RTL的`userEvent.tab()`，通过按Tab键来测试按钮的可访问性。```javascripttest('that the button is keyboard accessible', () => {// 安排const page = render(<BrowserRouter><Page/></BrowserRouter>).container;const button: HTMLElement = within(page).getByText('Form button');// 行动for (let i = 0; i < 5; ++i) {userEvent.tab();}// 断言expect(button).toHaveFocus();});
<br>
问题
我有另一个类似的键盘可访问性测试失败了：
test('that My button is keyboard accessible', () => {// 安排const nextPage: HTMLElement = render(<NextPage />).container;const button = screen.getByText('My button');// 行动for (let i = 0; i < 3; ++i) {userEvent.tab();}// 断言expect(button).toHaveFocus();});
错误信息：
预期具有焦点的元素：<my-button>My button</my-button> // 注意：`<my-button>`是我公司设计系统中特定的按钮组件。接收到具有焦点的元素：<body><div><div class="nextPage">... 更多标签在这里...<div class="bodyButtons"><my-button>My button</my-button></div></div></div></div></div></body>
无论我多少次使用userEvent.tab()，接收到具有焦点的元素始终是<body>。我认为这是因为尝试定位公司设计系统中的非标准按钮(<my-button>)引起的。
<br>
问题
如何在我的单元测试中使用键盘访问此页面上的"Account"按钮？ 在部署的应用程序上键盘操作正常工作。
<br>
我尝试过的事情
- 根据第一个单元测试使用
within - 将
userEvent.tab()的次数从0更改为1、2、5、10 - 使用
fireEvent而不是userEvent - 渲染组件时不使用container
- 最初在按Tab键之前使用
button.focus()，但我也无法将焦点放在按钮上 - 将
<my-button>更改为使用标准HTML标签<button> - 使用
querySelector('my-button')获取按钮
<details><summary>英文:</summary>## BackgroundI have a React/TypeScript project that I test with Jest and React Testing Library (RTL). I have one passing test that tests keyboard accessibility with RTL's `userEvent.tab()` by tabbing to a button.
test('that the button is keyboard accessible', () => {
// Arrange
const page = render(<BrowserRouter><Page/></BrowserRouter>).container;
const button: HTMLElement = within(page).getByText('Form button');
// Actfor (let i = 0; i < 5; ++i) {userEvent.tab();}// Assertexpect(button).toHaveFocus();
});
<br>## ProblemI have another similar keyboard accessibility test that fails:
test('that My button is keyboard accessible', () => {
// Arrange
const nextPage: HTMLElement = render(<NextPage />).container;
const button = screen.getByText('My button');
// Actfor (let i = 0; i < 3; ++i) {userEvent.tab();}// Assertexpect(button).toHaveFocus();
});
The error:
Expected element with focus:
<my-button>My button</my-button> // Note: <my-button> is a button component specific to the design system my company uses.
Received element with focus:
<body><div><div class="nextPage">... more tags here...<div class="bodyButtons"><my-button>My button</my-button></div></div></div></div></body>
No matter how many times I `userEvent.tab()`, the received element with focus is always `<body>`. I assume this is due to attempting to target a non-standard button (`<my-button>`) that is part of my company's design system.<br>## Question**How do I keyboard to the Account button on this page with my unit test?** Keyboarding on the deployed app works just fine.<br>## Things I've tried- `within` per the first unit test- Changing the number of `userEvent.tab()`s from 0 to 1 to 2 to 5 to 10- `fireEvent` instead of `userEvent`- Rendering the component without the container- Initially using `button.focus()` before tabbing, but I can't focus the button either- Changing `<my-button>` to `<button>` to use a standard HTML tag- Getting the button with `querySelector('my-button')`</details># 答案1**得分**: 0> 如何在我的单元测试中使用键盘访问此页面上的“Account”按钮？## 解决方案我给`<my-button>`添加了`tabindex=0`属性。这使按钮可以在程序中获得焦点。产品代码：```jsx<my-button onClick={handleClick} tabIndex='0'>我的按钮</my-button>
测试代码：
test('确保我的按钮可以通过键盘访问', () => {// 安排render(<NextPage/>);const button: HTMLElement = screen.getByText('我的按钮');// 操作for (let i = 0; i < 3; ++i) {userEvent.tab();}// 断言expect(button).toHaveFocus();});
更多信息请参阅MDN上的tabIndex文档。
英文:
> How do I keyboard to the Account button on this page with my unit test?
Solution
I gave <my-button> the tabindex=0 attribute. This made the button programmatically focusable.
The product code:
<my-button onClick={handleClick} tabIndex='0'>My button</my-button>
The test:
test('that My button is keyboard accessible', () => {// Arrangerender(<NextPage/>);const button: HTMLElement = screen.getByText('My button');// Actfor (let i = 0; i < 3; ++i) {userEvent.tab();}// Assertexpect(button).toHaveFocus();});
More info from MDN on tabIndex
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论