({
const hasLabels = !(hideTitles && hideDescriptions);
const isRefresh = useVisualRefresh();
- const [measuredHeight, setHeight] = useState(0);
- useResizeObserver(
- () => plotRef.current?.svg ?? null,
- entry => fitHeight && setHeight(entry.borderBoxHeight)
- );
- const height = fitHeight ? measuredHeight : explicitHeight;
+ const height = useHeightMeasure(() => plotRef.current?.svg ?? null, !fitHeight) ?? explicitHeight;
const dimensions = useMemo(
() =>
diff --git a/src/select/__tests__/select-a11y.test.tsx b/src/select/__tests__/select-a11y.test.tsx
index d64b8fca8e..c1f3dca290 100644
--- a/src/select/__tests__/select-a11y.test.tsx
+++ b/src/select/__tests__/select-a11y.test.tsx
@@ -46,6 +46,13 @@ describe.each([false, true])('expandToViewport=%s', expandToViewport => {
await expect(container).toValidateA11y();
});
+ test('with filtering', async () => {
+ const { container, wrapper } = renderSelect({ filteringType: 'auto', filteringAriaLabel: 'Filter' });
+ wrapper.openDropdown();
+ expect(wrapper.findDropdown({ expandToViewport })!.findOptionByValue('1')).toBeTruthy();
+ await expect(container).toValidateA11y();
+ });
+
test('Option should have aria-selected', () => {
const { wrapper } = renderSelect({ selectedOption: { label: 'First', value: '1' } });
wrapper.openDropdown();
diff --git a/src/select/__tests__/select.test.tsx b/src/select/__tests__/select.test.tsx
index 0b16b07b18..87c843b239 100644
--- a/src/select/__tests__/select.test.tsx
+++ b/src/select/__tests__/select.test.tsx
@@ -332,6 +332,18 @@ describe.each([false, true])('expandToViewport=%s', expandToViewport => {
.getAttribute('role')
).toBe('dialog');
});
+
+ test('dropdown (role="dialog") should receive a label when filtering enabled', () => {
+ const { wrapper } = renderSelect({
+ filteringType: 'auto',
+ ariaLabel: 'select-label',
+ });
+ wrapper.openDropdown();
+ const controlledId = wrapper.findTrigger().getElement().getAttribute('aria-controls');
+ expect(
+ wrapper.findDropdown({ expandToViewport }).getElement().parentNode!.querySelector(`#${controlledId}`)!
+ ).toHaveAccessibleName('select-label');
+ });
});
describe('Filtering results', () => {
diff --git a/src/select/internal.tsx b/src/select/internal.tsx
index 148bb82d92..f734ec0b90 100644
--- a/src/select/internal.tsx
+++ b/src/select/internal.tsx
@@ -222,6 +222,8 @@ const InternalSelect = React.forwardRef(
const mergedRef = useMergeRefs(rootRef, __internalRootRef);
+ const dropdownProps = getDropdownProps();
+
return (
Math.round(num);
declare global {
interface Window {
- __tableResizes__: ResizeObserverEntry[];
+ __tableResizes__: number;
}
}
@@ -50,21 +50,17 @@ class ResizableColumnsPage extends BasePageObject {
async installObserver(selector: string) {
await this.browser.execute(selector => {
- window.__tableResizes__ = [];
+ window.__tableResizes__ = 0;
const target = document.querySelector(selector)!;
const observer = new ResizeObserver(entries => {
- window.__tableResizes__.push(...entries);
+ window.__tableResizes__ += entries.length;
});
observer.observe(target);
}, selector);
}
- flushObservations() {
- return this.browser.execute(() => {
- const resizes = window.__tableResizes__;
- window.__tableResizes__ = [];
- return resizes;
- });
+ getObservations() {
+ return this.browser.execute(() => window.__tableResizes__);
}
}
@@ -92,11 +88,11 @@ test(
await page.installObserver(wrapper.find('table').toSelector());
await page.click('#shrink-container');
await page.waitForJsTimers();
- // flush observations from the container resize
- await expect(page.flushObservations()).resolves.not.toEqual([]);
+ // expected 1 observation after creating observer and 1 caused by container shrink
+ await expect(page.getObservations()).resolves.toBe(2);
await page.waitForJsTimers();
- // ensure there are no ongoing resizes after we flushed the expected ones above
- await expect(page.flushObservations()).resolves.toEqual([]);
+ // ensure there are no more observations added after the expected 2
+ await expect(page.getObservations()).resolves.toBe(2);
})
);
diff --git a/src/tabs/__tests__/smooth-scroll.test.tsx b/src/tabs/__tests__/smooth-scroll.test.tsx
index 5bf3aa4650..a5c8b188bd 100644
--- a/src/tabs/__tests__/smooth-scroll.test.tsx
+++ b/src/tabs/__tests__/smooth-scroll.test.tsx
@@ -3,7 +3,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { waitFor } from '@testing-library/react';
-import { isMotionDisabled } from '../../../lib/components/internal/motion';
+import { isMotionDisabled } from '@cloudscape-design/component-toolkit/internal';
import nativeSupport from '../../../lib/components/tabs/native-smooth-scroll-supported';
import smoothScroll from '../../../lib/components/tabs/smooth-scroll';
import createWrapper from '../../../lib/components/test-utils/dom';
@@ -11,10 +11,10 @@ import createWrapper from '../../../lib/components/test-utils/dom';
jest.mock('../../../lib/components/tabs/native-smooth-scroll-supported', () => {
return jest.fn();
});
-jest.mock('../../../lib/components/internal/motion', () => {
- const mock = jest.fn();
- return { isMotionDisabled: mock };
-});
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+ ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+ isMotionDisabled: jest.fn(),
+}));
const nativeScrollMock = jest.fn();
Element.prototype.scrollTo = nativeScrollMock;
diff --git a/src/tabs/smooth-scroll.ts b/src/tabs/smooth-scroll.ts
index 14338cc77e..0af84a2027 100644
--- a/src/tabs/smooth-scroll.ts
+++ b/src/tabs/smooth-scroll.ts
@@ -1,6 +1,6 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
-import { isMotionDisabled } from '../internal/motion';
+import { isMotionDisabled } from '@cloudscape-design/component-toolkit/internal';
import isNativeSmoothScrollingSupported from './native-smooth-scroll-supported';
interface ScrollContext {
diff --git a/src/tiles/tile.tsx b/src/tiles/tile.tsx
index 2d1621f010..e96e8cf8a0 100644
--- a/src/tiles/tile.tsx
+++ b/src/tiles/tile.tsx
@@ -23,7 +23,6 @@ interface TileProps {
export const Tile = React.forwardRef(
({ item, selected, name, breakpoint, onChange }: TileProps, forwardedRef: React.Ref) => {
const internalRef = useRef(null);
- const controlId = item.controlId || `${name}-value-${item.value}`;
const isVisualRefresh = useVisualRefresh();
const mergedRef = useMergeRefs(internalRef, forwardedRef);
@@ -58,7 +57,7 @@ export const Tile = React.forwardRef(
label={item.label}
description={item.description}
disabled={item.disabled}
- controlId={controlId}
+ controlId={item.controlId}
/>
{item.image && {item.image}
}