Skip to content

Commit

Permalink
data-highlighted
Browse files Browse the repository at this point in the history
  • Loading branch information
@mj12albert
mj12albert committed Nov 14, 2024
1 parent c81ff75 commit 8702100
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 43 deletions.
4 changes: 2 additions & 2 deletions packages/mui-base/src/Composite/Item/CompositeItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const CompositeItem = React.forwardRef(function CompositeItem(

const ownerState: CompositeItem.OwnerState = React.useMemo(
() => ({
active: index === activeIndex,
highlighted: index === activeIndex,
}),
[index, activeIndex],
);
Expand All @@ -42,7 +42,7 @@ const CompositeItem = React.forwardRef(function CompositeItem(

namespace CompositeItem {
export interface OwnerState {
active: boolean;
highlighted: boolean;
}

export interface Props extends BaseUIComponentProps<'div', OwnerState> {}
Expand Down
62 changes: 31 additions & 31 deletions packages/mui-base/src/Composite/Root/CompositeRoot.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,29 +28,29 @@ describe('Composite', () => {

act(() => item1.focus());

expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');

fireEvent.keyDown(item1, { key: 'ArrowDown' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowDown' });
await flushMicrotasks();
expect(item3).to.have.attribute('data-active');
expect(item3).to.have.attribute('data-highlighted');
expect(item3).to.have.attribute('tabindex', '0');
expect(item3).toHaveFocus();

fireEvent.keyDown(item3, { key: 'ArrowUp' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowUp' });
await flushMicrotasks();
expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');
expect(item1).to.have.attribute('tabindex', '0');
expect(item1).toHaveFocus();
});
Expand All @@ -70,29 +70,29 @@ describe('Composite', () => {

act(() => item1.focus());

expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');

fireEvent.keyDown(item1, { key: 'ArrowDown' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowDown' });
await flushMicrotasks();
expect(item3).to.have.attribute('data-active');
expect(item3).to.have.attribute('data-highlighted');
expect(item3).to.have.attribute('tabindex', '0');
expect(item3).toHaveFocus();

fireEvent.keyDown(item3, { key: 'ArrowUp' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowUp' });
await flushMicrotasks();
expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');
expect(item1).to.have.attribute('tabindex', '0');
expect(item1).toHaveFocus();
});
Expand All @@ -113,40 +113,40 @@ describe('Composite', () => {

act(() => item1.focus());

expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');

fireEvent.keyDown(item1, { key: 'ArrowDown' });
await flushMicrotasks();
expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');

fireEvent.keyDown(item1, { key: 'ArrowLeft' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowLeft' });
await flushMicrotasks();
expect(item3).to.have.attribute('data-active');
expect(item3).to.have.attribute('data-highlighted');
expect(item3).to.have.attribute('tabindex', '0');
expect(item3).toHaveFocus();

fireEvent.keyDown(item3, { key: 'ArrowRight' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowRight' });
await flushMicrotasks();
expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');
expect(item1).to.have.attribute('tabindex', '0');
expect(item1).toHaveFocus();

// loop backward
fireEvent.keyDown(item1, { key: 'ArrowRight' });
await flushMicrotasks();
expect(item3).to.have.attribute('data-active');
expect(item3).to.have.attribute('data-highlighted');
expect(item3).to.have.attribute('tabindex', '0');
expect(item3).toHaveFocus();
});
Expand All @@ -166,41 +166,41 @@ describe('Composite', () => {

act(() => item1.focus());

expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');

fireEvent.keyDown(item1, { key: 'ArrowLeft' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowLeft' });
await flushMicrotasks();
expect(item3).to.have.attribute('data-active');
expect(item3).to.have.attribute('data-highlighted');
expect(item3).to.have.attribute('tabindex', '0');
expect(item3).toHaveFocus();

fireEvent.keyDown(item3, { key: 'ArrowRight' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowRight' });
await flushMicrotasks();
expect(item1).to.have.attribute('data-active');
expect(item1).to.have.attribute('data-highlighted');
expect(item1).to.have.attribute('tabindex', '0');
expect(item1).toHaveFocus();

fireEvent.keyDown(item1, { key: 'ArrowDown' });
await flushMicrotasks();
expect(item2).to.have.attribute('data-active');
expect(item2).to.have.attribute('data-highlighted');
expect(item2).to.have.attribute('tabindex', '0');
expect(item2).toHaveFocus();

fireEvent.keyDown(item2, { key: 'ArrowDown' });
await flushMicrotasks();
expect(item3).to.have.attribute('data-active');
expect(item3).to.have.attribute('data-highlighted');
expect(item3).to.have.attribute('tabindex', '0');
expect(item3).toHaveFocus();
});
Expand All @@ -225,41 +225,41 @@ describe('Composite', () => {
const { getByTestId } = await render(<App />);

act(() => getByTestId('1').focus());
expect(getByTestId('1')).to.have.attribute('data-active');
expect(getByTestId('1')).to.have.attribute('data-highlighted');

fireEvent.keyDown(getByTestId('1'), { key: 'ArrowDown' });
await flushMicrotasks();
expect(getByTestId('4')).to.have.attribute('data-active');
expect(getByTestId('4')).to.have.attribute('data-highlighted');
expect(getByTestId('4')).to.have.attribute('tabindex', '0');
expect(getByTestId('4')).toHaveFocus();

fireEvent.keyDown(getByTestId('4'), { key: 'ArrowRight' });
await flushMicrotasks();
expect(getByTestId('5')).to.have.attribute('data-active');
expect(getByTestId('5')).to.have.attribute('data-highlighted');
expect(getByTestId('5')).to.have.attribute('tabindex', '0');
expect(getByTestId('5')).toHaveFocus();

fireEvent.keyDown(getByTestId('5'), { key: 'ArrowDown' });
await flushMicrotasks();
expect(getByTestId('8')).to.have.attribute('data-active');
expect(getByTestId('8')).to.have.attribute('data-highlighted');
expect(getByTestId('8')).to.have.attribute('tabindex', '0');
expect(getByTestId('8')).toHaveFocus();

fireEvent.keyDown(getByTestId('8'), { key: 'ArrowLeft' });
await flushMicrotasks();
expect(getByTestId('7')).to.have.attribute('data-active');
expect(getByTestId('7')).to.have.attribute('data-highlighted');
expect(getByTestId('7')).to.have.attribute('tabindex', '0');
expect(getByTestId('7')).toHaveFocus();

fireEvent.keyDown(getByTestId('7'), { key: 'ArrowUp' });
await flushMicrotasks();
expect(getByTestId('4')).to.have.attribute('data-active');
expect(getByTestId('4')).to.have.attribute('data-highlighted');
expect(getByTestId('4')).to.have.attribute('tabindex', '0');
expect(getByTestId('4')).toHaveFocus();

act(() => getByTestId('9').focus());
await flushMicrotasks();
expect(getByTestId('9')).to.have.attribute('data-active');
expect(getByTestId('9')).to.have.attribute('data-highlighted');
expect(getByTestId('9')).to.have.attribute('tabindex', '0');
});
});
Expand Down
20 changes: 10 additions & 10 deletions packages/mui-base/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,31 +212,31 @@ describe('<ToggleButtonGroup.Root />', () => {

await user.keyboard('[Tab]');

expect(button1).to.have.attribute('data-active');
expect(button1).to.have.attribute('data-highlighted');
expect(button1).to.have.attribute('tabindex', '0');
expect(button1).toHaveFocus();

await user.keyboard('[ArrowRight]');

expect(button2).to.have.attribute('data-active');
expect(button2).to.have.attribute('data-highlighted');
expect(button2).to.have.attribute('tabindex', '0');
expect(button2).toHaveFocus();

await user.keyboard('[ArrowRight]');

expect(button1).to.have.attribute('data-active');
expect(button1).to.have.attribute('data-highlighted');
expect(button1).to.have.attribute('tabindex', '0');
expect(button1).toHaveFocus();

await user.keyboard('[ArrowDown]');

expect(button2).to.have.attribute('data-active');
expect(button2).to.have.attribute('data-highlighted');
expect(button2).to.have.attribute('tabindex', '0');
expect(button2).toHaveFocus();

await user.keyboard('[ArrowDown]');

expect(button1).to.have.attribute('data-active');
expect(button1).to.have.attribute('data-highlighted');
expect(button1).to.have.attribute('tabindex', '0');
expect(button1).toHaveFocus();
});
Expand All @@ -253,31 +253,31 @@ describe('<ToggleButtonGroup.Root />', () => {

await user.keyboard('[Tab]');

expect(button1).to.have.attribute('data-active');
expect(button1).to.have.attribute('data-highlighted');
expect(button1).to.have.attribute('tabindex', '0');
expect(button1).toHaveFocus();

await user.keyboard('[ArrowLeft]');

expect(button2).to.have.attribute('data-active');
expect(button2).to.have.attribute('data-highlighted');
expect(button2).to.have.attribute('tabindex', '0');
expect(button2).toHaveFocus();

await user.keyboard('[ArrowLeft]');

expect(button1).to.have.attribute('data-active');
expect(button1).to.have.attribute('data-highlighted');
expect(button1).to.have.attribute('tabindex', '0');
expect(button1).toHaveFocus();

await user.keyboard('[ArrowDown]');

expect(button2).to.have.attribute('data-active');
expect(button2).to.have.attribute('data-highlighted');
expect(button2).to.have.attribute('tabindex', '0');
expect(button2).toHaveFocus();

await user.keyboard('[ArrowDown]');

expect(button1).to.have.attribute('data-active');
expect(button1).to.have.attribute('data-highlighted');
expect(button1).to.have.attribute('tabindex', '0');
expect(button1).toHaveFocus();
});
Expand Down

0 comments on commit 8702100

Please sign in to comment.