@redocly/theme 0.70.0-next.4 → 0.70.0-next.5

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.d.ts

@@ -1,2 +1,2 @@
 import type { CatalogEntityRelationsGraphProps } from '../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph';
-export declare const CatalogEntityRelationsGraph: import("react").ComponentType<CatalogEntityRelationsGraphProps>;
+export declare const CatalogEntityRelationsGraph: import("../../../../core/utils").DynamicComponent<CatalogEntityRelationsGraphProps>;

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -101,17 +101,20 @@ function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = tru
                 react_1.default.createElement(FilterInput_1.FilterInput, { value: searchTerm, onChange: setSearchTerm })),
             react_1.default.createElement(FilterOptions_1.FilterOptions, null, filteredOptions.map(({ value, count }) => {
                 const id = 'filter--' + filter.property + '--' + value;
-                return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
-                        filter.toggleOption(value);
-                        telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
-                        ]);
-                    } },
-                    react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
-                            ? filter.selectedOptions.has(value) ||
-                                filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
-                            : false }),
-                    react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
+                const checked = filter.selectedOptions instanceof Set
+                    ? filter.selectedOptions.has(value) ||
+                        filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                    : false;
+                return (react_1.default.createElement(FilterCheckboxOption, { key: id },
+                    react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: checked }),
+                    react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value },
+                        react_1.default.createElement(FilterCheckboxInput, { checked: checked, onChange: () => {
+                                filter.toggleOption(value);
+                                telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
+                                ]);
+                            } }),
+                        highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
                     showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
             })))));
 }
@@ -147,6 +150,22 @@ const HighlightedText = styled_components_1.default.span `
 `;
 const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+const FilterCheckboxInput = styled_components_1.default.input.attrs({ type: 'checkbox' }) `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 const FilterSearchWrapper = styled_components_1.default.div `
   padding-bottom: var(--spacing-xs);

package/lib/components/Dropdown/DropdownMenu.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactNode, JSX } from 'react';
 import type { DropdownMenuItemProps } from '../../components/Dropdown/DropdownMenuItem';
 export type DropdownMenuProps = {
+    id?: string;
     className?: string;
     role?: string;
     footer?: React.ReactNode;

package/lib/components/Dropdown/DropdownMenu.js

@@ -15,7 +15,7 @@ function DropdownMenu(props) {
     if ('items' in props) {
         content = props.items.map((item, idx) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, Object.assign({ key: idx }, item), item.content)));
     }
-    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", className: props.className, role: props.role || 'menu' },
+    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", id: props.id, className: props.className, role: props.role || 'menu' },
         content,
         props.footer || null));
 }

package/lib/components/Feedback/Reasons.js

@@ -43,6 +43,7 @@ const hooks_1 = require("../../core/hooks");
 function Reasons({ settings, onChange, className }) {
     const { label, component = 'checkbox', items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+    const idPrefix = React.useId();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     if (!items.length) {
@@ -59,8 +60,8 @@ function Reasons({ settings, onChange, className }) {
         React.createElement(Label, null, label ||
             translate('feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
-            React.createElement("input", { type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
+            React.createElement("input", { id: `${idPrefix}-${idx}`, type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
+            React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, htmlFor: `${idPrefix}-${idx}` }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
 }
 const ReasonsWrapper = styled_components_1.default.div `
   font-family: var(--feedback-font-family);

package/lib/components/Filter/FilterCheckboxes.js

@@ -22,22 +22,41 @@ function FilterCheckboxes({ filter, filterValuesCasing, showCounter = true, }) {
         react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
         react_1.default.createElement(FilterOptions_1.FilterOptions, null, (filter.filteredOptions || filter.options).map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
-            return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
-                    filter.toggleOption(value);
-                    telemetry.sendFilterCheckboxToggledMessage([
-                        (0, utils_1.getBaseDataAttributes)('filterId', 'checkbox'),
-                    ]);
-                } },
-                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
-                        ? filter.selectedOptions.has(value) ||
-                            filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
-                        : false }),
-                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
+            const checked = filter.selectedOptions instanceof Set
+                ? filter.selectedOptions.has(value) ||
+                    filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                : false;
+            return (react_1.default.createElement(FilterCheckboxOption, { key: id },
+                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: checked }),
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value },
+                    react_1.default.createElement(FilterCheckboxInput, { checked: checked, onChange: () => {
+                            filter.toggleOption(value);
+                            telemetry.sendFilterCheckboxToggledMessage([
+                                (0, utils_1.getBaseDataAttributes)('filterId', 'checkbox'),
+                            ]);
+                        } }),
+                    (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
                 showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
         }))));
 }
 const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+const FilterCheckboxInput = styled_components_1.default.input.attrs({ type: 'checkbox' }) `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 const FilterCheckboxesWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Image/Image.js

@@ -43,6 +43,7 @@ const Button_1 = require("../../components/Button/Button");
 function Image(props) {
     const { src, srcSet, images: galleryImages, alt, className, width, height, border, caption, framed, style, withLightbox, lightboxStyle, } = props;
     const lightboxContainerRef = (0, react_1.useRef)(null);
+    const lightboxTriggerRef = (0, react_1.useRef)(null);
     const [lightboxImage, setLightboxImage] = (0, react_1.useState)(undefined);
     const parsedSourceSetMap = (0, react_1.useMemo)(() => {
         return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
@@ -53,28 +54,47 @@ function Image(props) {
             setLightboxImage(undefined);
         }
     }, []);
-    const handleImageClick = (0, react_1.useCallback)((src) => {
+    const handleImageClick = (0, react_1.useCallback)((src, trigger) => {
         if (!withLightbox || lightboxImage) {
             return;
         }
+        lightboxTriggerRef.current = trigger;
         setLightboxImage(src);
     }, [withLightbox, lightboxImage]);
+    const getLightboxTriggerProps = (imageSrc) => withLightbox
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            'aria-label': alt ? undefined : 'Open image',
+            onClick: (e) => handleImageClick(imageSrc, e.currentTarget),
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleImageClick(imageSrc, e.currentTarget);
+                }
+            },
+        }
+        : {};
     const handleCloseLightbox = (0, react_1.useCallback)(() => {
         setLightboxImage(undefined);
     }, []);
     (0, hooks_1.useModalScrollLock)(!!lightboxImage);
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if (lightboxImage) {
             (_a = lightboxContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
+        else {
+            (_b = lightboxTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            lightboxTriggerRef.current = null;
+        }
     }, [lightboxImage]);
     const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? (0, utils_1.parseStyleString)(style) : style));
     const lightboxOverlayStyles = typeof lightboxStyle === 'string' ? (0, utils_1.parseStyleString)(lightboxStyle) : lightboxStyle;
-    const images = src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles, onClick: () => handleImageClick(src) })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, $colorMode: key, src: value, alt: alt, className: className, width: width, height: height, $withLightbox: withLightbox, style: combinedStyles, onClick: () => handleImageClick(value) }))));
+    const images = src ? (react_1.default.createElement("img", Object.assign({ src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles }, getLightboxTriggerProps(src)))) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, Object.assign({ key: key, $colorMode: key, src: value, alt: alt, className: className, width: width, height: height, $withLightbox: withLightbox, style: combinedStyles }, getLightboxTriggerProps(value))))));
     const hasGallery = Array.isArray(galleryImages) && galleryImages.length > 0;
     const visibleGalleryImages = hasGallery ? galleryImages.slice(0, 3) : [];
-    const gallery = hasGallery ? (react_1.default.createElement(GalleryRow, null, visibleGalleryImages.map((galleryImageSrc, index) => (react_1.default.createElement("img", { key: `${galleryImageSrc}-${index}`, src: galleryImageSrc, alt: alt, style: withLightbox ? { cursor: 'pointer' } : undefined, onClick: () => handleImageClick(galleryImageSrc) }))))) : null;
+    const gallery = hasGallery ? (react_1.default.createElement(GalleryRow, null, visibleGalleryImages.map((galleryImageSrc, index) => (react_1.default.createElement("img", Object.assign({ key: `${galleryImageSrc}-${index}`, src: galleryImageSrc, alt: alt, style: withLightbox ? { cursor: 'pointer' } : undefined }, getLightboxTriggerProps(galleryImageSrc))))))) : null;
     const hasCaption = Boolean(caption);
     const hasWrapper = Boolean(framed || hasCaption || hasGallery);
     const wrapperContent = hasGallery ? gallery : images;

package/lib/components/Segmented/Segmented.js

@@ -32,15 +32,35 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typed_memo_1 = require("../../core/hoc/typed-memo");
+const hooks_1 = require("../../core/hooks");
 function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
-    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist", $size: size }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-        opt.divider,
-        react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), $isActive: value == opt.value, $size: size }, opt.element || opt.label))))));
+    const { tabListProps, getTabProps } = (0, hooks_1.useTabList)({
+        count: options.length,
+        activeIndex: options.findIndex((opt) => value == opt.value),
+        onChange: (index) => onChange(options[index]),
+    });
+    return (react_1.default.createElement(SegmentedGroup, Object.assign({ ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}` }, tabListProps, { $size: size }), options.map((opt, index) => {
+        const _a = getTabProps(index), { 'aria-controls': _noPanel } = _a, tabProps = __rest(_a, ['aria-controls']);
+        return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            opt.divider,
+            react_1.default.createElement(SegmentedItem, Object.assign({ key: opt.label }, tabProps, { title: opt.label, $isActive: value == opt.value, $size: size }), opt.element || opt.label)));
+    })));
 }
 exports.Segmented = (0, typed_memo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `

package/lib/components/Select/Select.js

@@ -68,6 +68,7 @@ function Select(props) {
     const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
     const [stickyInputValue, setStickyInputValue] = (0, react_1.useState)(placeholder || '');
     const inputId = (0, react_1.useId)();
+    const listboxId = `${inputId}-listbox`;
     (0, hooks_1.useOutsideClick)(selectRef, () => {
         setDropdownActive(false);
     });
@@ -169,14 +170,20 @@ function Select(props) {
         return !!selectedOptions.find((selectOption) => selectOption.value === option.value || selectOption.value === option.label);
     };
     const renderDefaultInput = (inputRef) => {
-        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
+        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: listboxId, expanded: dropdownActive, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
     };
     return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, onKeyDown: (e) => {
             if (e.key === 'Enter' && document.activeElement === selectRef.current) {
                 e.preventDefault();
                 setDropdownActive(!dropdownActive);
             }
-        }, tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": dropdownActive, "aria-label": "Select option", onFocus: (e) => {
+        }, tabIndex: searchable ? undefined : 0 }, (!searchable && {
+        role: 'combobox',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': dropdownActive,
+        'aria-controls': listboxId,
+        'aria-label': 'Select option',
+    }), { onFocus: (e) => {
             var _a;
             if (e.target === selectRef.current) {
                 (_a = selectInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -185,7 +192,7 @@ function Select(props) {
             e.preventDefault();
         } }),
         react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(selectInputRef), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
-            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
+            react_1.default.createElement(SelectDropdownMenu, { id: listboxId, role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
                 return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&
                             (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&

package/lib/components/Select/SelectInput.d.ts

@@ -13,6 +13,7 @@ type SelectInputProps<T> = {
     placeholder?: string;
     multiple?: boolean;
     searchable?: boolean;
+    expanded?: boolean;
     clearable?: boolean;
     inputRef?: React.ForwardedRef<HTMLInputElement>;
     clearHandler?: (value?: any) => void;

package/lib/components/Select/SelectInput.js

@@ -44,7 +44,7 @@ const Tag_1 = require("../../components/Tag/Tag");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
 function SelectInput(props) {
-    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, inputRef: forwardedInputRef, } = props;
+    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, expanded, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, inputRef: forwardedInputRef, } = props;
     const inputRef = (0, react_1.useRef)(null);
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const onChangeHandler = (e) => {
@@ -95,14 +95,14 @@ function SelectInput(props) {
             else {
                 forwardedInputRef.current = input;
             }
-        }, $width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, onFocus: (e) => {
+        }, $width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, role: "combobox", "aria-expanded": !!expanded, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-label": "Select option", onFocus: (e) => {
             e.stopPropagation();
         }, onMouseDown: (e) => {
             e.preventDefault();
         } }));
     const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element || selectedOptions[0].value) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
     const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
-    return (react_1.default.createElement(exports.SelectInputWrapper, { id: id, onFocus: onFocusHandler, onClick: onClickHandler, role: "button", "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-owns": listboxId, "aria-label": "Select option" },
+    return (react_1.default.createElement(exports.SelectInputWrapper, { id: id, onFocus: onFocusHandler, onClick: onClickHandler },
         !onlyIcon && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(SelectInputValue, null, multiple ? (searchable ? (react_1.default.createElement(react_1.default.Fragment, null,
                 selectTags,

package/lib/core/hooks/index.d.ts

@@ -21,6 +21,7 @@ export * from './menu/use-mobile-menu-levels';
 export * from './menu/use-collapse';
 export * from './feedback/use-report-dialog';
 export * from './use-tabs';
+export * from './use-tab-list';
 export * from './use-focus-trap';
 export * from './use-consent-dialog';
 export * from './use-consent-telemetry';

package/lib/core/hooks/index.js

@@ -37,6 +37,7 @@ __exportStar(require("./menu/use-mobile-menu-levels"), exports);
 __exportStar(require("./menu/use-collapse"), exports);
 __exportStar(require("./feedback/use-report-dialog"), exports);
 __exportStar(require("./use-tabs"), exports);
+__exportStar(require("./use-tab-list"), exports);
 __exportStar(require("./use-focus-trap"), exports);
 __exportStar(require("./use-consent-dialog"), exports);
 __exportStar(require("./use-consent-telemetry"), exports);

package/lib/core/hooks/use-tab-list.d.ts

@@ -0,0 +1,31 @@
+import type { KeyboardEvent } from 'react';
+type UseTabListProps = {
+    count: number;
+    activeIndex: number;
+    onChange: (index: number) => void;
+};
+/**
+ * Props for a WAI-ARIA tab list with automatic activation: only the active tab is a tab stop,
+ * and Left/Right/Home/End select and focus another tab.
+ */
+export declare function useTabList({ count, activeIndex, onChange }: UseTabListProps): {
+    tabListProps: {
+        role: string;
+    };
+    getTabProps: (index: number) => {
+        id: string;
+        role: string;
+        'aria-selected': boolean;
+        'aria-controls': string;
+        tabIndex: number;
+        ref: (element: HTMLElement | null) => void;
+        onClick: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
+    };
+    getTabPanelProps: (index: number) => {
+        id: string;
+        role: string;
+        'aria-labelledby': string;
+    };
+};
+export {};

package/lib/core/hooks/use-tab-list.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabList = useTabList;
+const react_1 = require("react");
+/**
+ * Props for a WAI-ARIA tab list with automatic activation: only the active tab is a tab stop,
+ * and Left/Right/Home/End select and focus another tab.
+ */
+function useTabList({ count, activeIndex, onChange }) {
+    const idPrefix = (0, react_1.useId)();
+    const focusableIndex = activeIndex >= 0 ? activeIndex : 0;
+    const tabRefs = (0, react_1.useRef)([]);
+    const select = (0, react_1.useCallback)((index) => {
+        var _a;
+        onChange(index);
+        (_a = tabRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [onChange]);
+    const onKeyDown = (0, react_1.useCallback)((event, index) => {
+        const target = {
+            ArrowRight: (index + 1) % count,
+            ArrowLeft: (index - 1 + count) % count,
+            Home: 0,
+            End: count - 1,
+        }[event.key];
+        if (target === undefined)
+            return;
+        event.preventDefault();
+        select(target);
+    }, [count, select]);
+    const getTabProps = (index) => ({
+        id: `${idPrefix}-tab-${index}`,
+        role: 'tab',
+        'aria-selected': index === activeIndex,
+        'aria-controls': `${idPrefix}-panel-${index}`,
+        tabIndex: index === focusableIndex ? 0 : -1,
+        ref: (element) => {
+            tabRefs.current[index] = element;
+        },
+        onClick: () => select(index),
+        onKeyDown: (event) => onKeyDown(event, index),
+    });
+    const getTabPanelProps = (index) => ({
+        id: `${idPrefix}-panel-${index}`,
+        role: 'tabpanel',
+        'aria-labelledby': `${idPrefix}-tab-${index}`,
+    });
+    return { tabListProps: { role: 'tablist' }, getTabProps, getTabPanelProps };
+}
+//# sourceMappingURL=use-tab-list.js.map

package/lib/core/utils/Dynamic.d.ts

@@ -3,7 +3,14 @@ interface DynamicOptions<TProps extends Record<string, unknown>> {
     ssr?: boolean;
     loading?: React.ComponentType<TProps>;
 }
+/**
+ * A component from `dynamic()`. After `preload()` resolves, the component renders without a
+ * loading state. On the server, `preload()` does not load a client-only component (`ssr: false`).
+ */
+export type DynamicComponent<TProps> = React.ComponentType<TProps> & {
+    preload(): Promise<void>;
+};
 export declare function dynamic<TProps extends Record<string, unknown>>(factory: () => Promise<React.ComponentType<TProps> | {
     default: React.ComponentType<TProps>;
-} | Record<string, unknown>>, { ssr, loading }?: DynamicOptions<TProps>): React.ComponentType<TProps>;
+} | Record<string, unknown>>, { ssr, loading }?: DynamicOptions<TProps>): DynamicComponent<TProps>;
 export {};

package/lib/core/utils/Dynamic.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,7 +15,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.dynamic = dynamic;
 const react_1 = __importDefault(require("react"));
 function dynamic(factory, { ssr = true, loading } = {}) {
-    const Component = react_1.default.lazy(() => factory().then((mod) => {
+    let loaded;
+    let pending;
+    const load = () => (pending !== null && pending !== void 0 ? pending : (pending = factory()
+        .then((mod) => {
         // Case 1: factory() => import('./SomeModule') - direct import
         // Case 2: factory() => import('./SomeModule').then(mod => mod.default) - extract default
         if (typeof mod === 'function') {
@@ -38,10 +50,21 @@ function dynamic(factory, { ssr = true, loading } = {}) {
             }
         }
         throw new Error('Dynamic import did not return a valid React component');
-    }));
+    })
+        .then((module) => {
+        loaded = module.default;
+        return module;
+    }, (error) => {
+        // A failed load is not kept, so the next preload tries again.
+        pending = undefined;
+        throw error;
+    })));
+    const LazyComponent = react_1.default.lazy(load);
     const LoadingComponent = loading || (() => null);
-    return (props) => {
+    const DynamicComponent = (props) => {
         const [hasMounted, setHasMounted] = react_1.default.useState(false);
+        // Fixed per instance: a change of the element type would remount the component.
+        const [Component] = react_1.default.useState(() => loaded !== null && loaded !== void 0 ? loaded : LazyComponent);
         react_1.default.useEffect(() => {
             setHasMounted(true);
         }, []);
@@ -55,5 +78,13 @@ function dynamic(factory, { ssr = true, loading } = {}) {
         return (react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement(LoadingComponent, Object.assign({}, props)) },
             react_1.default.createElement(Component, Object.assign({}, props))));
     };
+    return Object.assign(DynamicComponent, {
+        preload() {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (ssr || typeof window !== 'undefined')
+                    yield load();
+            });
+        },
+    });
 }
 //# sourceMappingURL=Dynamic.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.70.0-next.4",
+  "version": "0.70.0-next.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -71,7 +71,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.61.0",
+    "@redocly/config": "0.61.1",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -96,30 +96,28 @@ export function CatalogFilterCheckboxes({
         <FilterOptions>
           {filteredOptions.map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
+            const checked =
+              filter.selectedOptions instanceof Set
+                ? filter.selectedOptions.has(value) ||
+                  filter.selectedOptions.has(value?.toLowerCase())
+                : false;
             return (
-              <FilterCheckboxOption
-                key={id}
-                role="link"
-                onClick={() => {
-                  filter.toggleOption(value);
-                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                    {
-                      ...getBaseDataAttributes('catalogEntitiesFilterCheckboxId', 'checkbox'),
-                      category: filter.property,
-                      value: value,
-                    },
-                  ]);
-                }}
-              >
-                <CheckboxIcon
-                  checked={
-                    filter.selectedOptions instanceof Set
-                      ? filter.selectedOptions.has(value) ||
-                        filter.selectedOptions.has(value?.toLowerCase())
-                      : false
-                  }
-                />
+              <FilterCheckboxOption key={id}>
+                <CheckboxIcon checked={checked} />
                 <FilterOptionLabel data-translation-key={value}>
+                  <FilterCheckboxInput
+                    checked={checked}
+                    onChange={() => {
+                      filter.toggleOption(value);
+                      telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                        {
+                          ...getBaseDataAttributes('catalogEntitiesFilterCheckboxId', 'checkbox'),
+                          category: filter.property,
+                          value: value,
+                        },
+                      ]);
+                    }}
+                  />
                   {highlightText(changeTextCasing(translate(value), filterValuesCasing) || '')}
                 </FilterOptionLabel>
                 {showCounter && <CounterTag borderless>{count}</CounterTag>}
@@ -168,6 +166,23 @@ const HighlightedText = styled.span`
 
 const FilterCheckboxOption = styled(FilterOption)`
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+
+const FilterCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 
 const FilterSearchWrapper = styled.div`

package/src/components/Dropdown/DropdownMenu.tsx

@@ -6,7 +6,12 @@ import type { DropdownMenuItemProps } from '@redocly/theme/components/Dropdown/D
 
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 
-export type DropdownMenuProps = { className?: string; role?: string; footer?: React.ReactNode } & (
+export type DropdownMenuProps = {
+  id?: string;
+  className?: string;
+  role?: string;
+  footer?: React.ReactNode;
+} & (
   | {
       items: DropdownMenuItemProps[];
     }
@@ -32,6 +37,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     <DropdownMenuWrapper
       data-component-name="Dropdown/DropdownMenu"
       data-testid="dropdown-menu"
+      id={props.id}
       className={props.className}
       role={props.role || 'menu'}
     >

package/src/components/Feedback/Reasons.tsx

@@ -18,6 +18,7 @@ export type ReasonsProps = {
 export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.Element | null {
   const { label, component = 'checkbox', items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+  const idPrefix = React.useId();
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -51,6 +52,7 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
       {items.map((reason, idx) => (
         <OptionWrapper key={reason}>
           <input
+            id={`${idPrefix}-${idx}`}
             type={component}
             value={reason}
             checked={checkedState[idx]}
@@ -59,8 +61,7 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
           />
           <label
             data-translation-key={`feedback.settings.reasons.items.${idx + 1}`}
-            id={reason}
-            onClick={() => handleOptionChange(idx)}
+            htmlFor={`${idPrefix}-${idx}`}
           >
             {translate(`feedback.settings.reasons.items.${idx + 1}`, reason)}
           </label>

package/src/components/Filter/FilterCheckboxes.tsx

@@ -30,26 +30,24 @@ export function FilterCheckboxes({
       <FilterOptions>
         {(filter.filteredOptions || filter.options).map(({ value, count }) => {
           const id = 'filter--' + filter.property + '--' + value;
+          const checked =
+            filter.selectedOptions instanceof Set
+              ? filter.selectedOptions.has(value) ||
+                filter.selectedOptions.has(value?.toLowerCase())
+              : false;
           return (
-            <FilterCheckboxOption
-              key={id}
-              role="link"
-              onClick={() => {
-                filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage([
-                  getBaseDataAttributes('filterId', 'checkbox'),
-                ]);
-              }}
-            >
-              <CheckboxIcon
-                checked={
-                  filter.selectedOptions instanceof Set
-                    ? filter.selectedOptions.has(value) ||
-                      filter.selectedOptions.has(value?.toLowerCase())
-                    : false
-                }
-              />
+            <FilterCheckboxOption key={id}>
+              <CheckboxIcon checked={checked} />
               <FilterOptionLabel data-translation-key={value}>
+                <FilterCheckboxInput
+                  checked={checked}
+                  onChange={() => {
+                    filter.toggleOption(value);
+                    telemetry.sendFilterCheckboxToggledMessage([
+                      getBaseDataAttributes('filterId', 'checkbox'),
+                    ]);
+                  }}
+                />
                 {changeTextCasing(translate(value), filterValuesCasing)}
               </FilterOptionLabel>
               {showCounter && <CounterTag borderless>{count}</CounterTag>}
@@ -63,6 +61,23 @@ export function FilterCheckboxes({
 
 const FilterCheckboxOption = styled(FilterOption)`
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+
+const FilterCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 
 const FilterCheckboxesWrapper = styled.div`

package/src/components/Image/Image.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { KeyboardEvent, JSX } from 'react';
+import type { KeyboardEvent, JSX, MouseEvent } from 'react';
 
 import { parseSrcSet, parseStyleString } from '@redocly/theme/core/utils';
 import { useModalScrollLock } from '@redocly/theme/core/hooks';
@@ -42,6 +42,7 @@ export function Image(props: ImageProps): JSX.Element {
   } = props;
 
   const lightboxContainerRef = useRef<HTMLDivElement>(null);
+  const lightboxTriggerRef = useRef<HTMLElement | null>(null);
   const [lightboxImage, setLightboxImage] = useState<string | undefined>(undefined);
   const parsedSourceSetMap = useMemo(() => {
     return srcSet ? parseSrcSet(srcSet) : new Map();
@@ -55,15 +56,32 @@ export function Image(props: ImageProps): JSX.Element {
   }, []);
 
   const handleImageClick = useCallback(
-    (src: string) => {
+    (src: string, trigger: HTMLElement) => {
       if (!withLightbox || lightboxImage) {
         return;
       }
+      lightboxTriggerRef.current = trigger;
       setLightboxImage(src);
     },
     [withLightbox, lightboxImage],
   );
 
+  const getLightboxTriggerProps = (imageSrc: string) =>
+    withLightbox
+      ? {
+          role: 'button',
+          tabIndex: 0,
+          'aria-label': alt ? undefined : 'Open image',
+          onClick: (e: MouseEvent<HTMLElement>) => handleImageClick(imageSrc, e.currentTarget),
+          onKeyDown: (e: KeyboardEvent<HTMLElement>) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleImageClick(imageSrc, e.currentTarget);
+            }
+          },
+        }
+      : {};
+
   const handleCloseLightbox = useCallback(() => {
     setLightboxImage(undefined);
   }, []);
@@ -72,6 +90,9 @@ export function Image(props: ImageProps): JSX.Element {
   useEffect(() => {
     if (lightboxImage) {
       lightboxContainerRef.current?.focus();
+    } else {
+      lightboxTriggerRef.current?.focus();
+      lightboxTriggerRef.current = null;
     }
   }, [lightboxImage]);
 
@@ -92,7 +113,7 @@ export function Image(props: ImageProps): JSX.Element {
       width={width}
       height={height}
       style={combinedStyles}
-      onClick={() => handleImageClick(src)}
+      {...getLightboxTriggerProps(src)}
     />
   ) : (
     Array.from(parsedSourceSetMap).map(([key, value]) => (
@@ -106,7 +127,7 @@ export function Image(props: ImageProps): JSX.Element {
         height={height}
         $withLightbox={withLightbox}
         style={combinedStyles}
-        onClick={() => handleImageClick(value)}
+        {...getLightboxTriggerProps(value)}
       />
     ))
   );
@@ -122,7 +143,7 @@ export function Image(props: ImageProps): JSX.Element {
           src={galleryImageSrc}
           alt={alt}
           style={withLightbox ? { cursor: 'pointer' } : undefined}
-          onClick={() => handleImageClick(galleryImageSrc)}
+          {...getLightboxTriggerProps(galleryImageSrc)}
         />
       ))}
     </GalleryRow>

package/src/components/Segmented/Segmented.tsx

@@ -5,34 +5,43 @@ import type { ForwardedRef, ReactElement } from 'react';
 import type { SegmentedProps } from '@redocly/theme/core/types';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typed-memo';
+import { useTabList } from '@redocly/theme/core/hooks';
 
 function SegmentedComponent<T>(
   { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,
   ref?: ForwardedRef<HTMLDivElement>,
 ): ReactElement {
+  const { tabListProps, getTabProps } = useTabList({
+    count: options.length,
+    activeIndex: options.findIndex((opt) => value == opt.value),
+    onChange: (index) => onChange(options[index]),
+  });
+
   return (
     <SegmentedGroup
       ref={ref}
       data-component-name="Segmented/Segmented"
       className={`tag-grey ${size} ${className}`}
-      role="tablist"
+      {...tabListProps}
       $size={size}
     >
-      {options.map((opt, index) => (
-        <React.Fragment key={index}>
-          {opt.divider}
-          <SegmentedItem
-            key={opt.label}
-            role="tab"
-            title={opt.label}
-            onClick={() => onChange(opt)}
-            $isActive={value == opt.value}
-            $size={size}
-          >
-            {opt.element || opt.label}
-          </SegmentedItem>
-        </React.Fragment>
-      ))}
+      {options.map((opt, index) => {
+        const { 'aria-controls': _noPanel, ...tabProps } = getTabProps(index);
+        return (
+          <React.Fragment key={index}>
+            {opt.divider}
+            <SegmentedItem
+              key={opt.label}
+              {...tabProps}
+              title={opt.label}
+              $isActive={value == opt.value}
+              $size={size}
+            >
+              {opt.element || opt.label}
+            </SegmentedItem>
+          </React.Fragment>
+        );
+      })}
     </SegmentedGroup>
   );
 }

package/src/components/Select/Select.tsx

@@ -63,6 +63,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
   const [filteredOptions, setFilteredOptions] = useState<SelectOption<T>[]>(options);
   const [stickyInputValue, setStickyInputValue] = useState<string>(placeholder || '');
   const inputId = useId();
+  const listboxId = `${inputId}-listbox`;
 
   useOutsideClick(selectRef, () => {
     setDropdownActive(false);
@@ -189,7 +190,8 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     return (
       <SelectInput
         id={inputId}
-        listboxId={inputId}
+        listboxId={listboxId}
+        expanded={dropdownActive}
         selectedOptions={selectedOptions}
         searchValue={searchValue}
         placeholder={placeholder}
@@ -223,10 +225,14 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
           setDropdownActive(!dropdownActive);
         }
       }}
-      tabIndex={0}
-      aria-haspopup="listbox"
-      aria-expanded={dropdownActive}
-      aria-label="Select option"
+      tabIndex={searchable ? undefined : 0}
+      {...(!searchable && {
+        role: 'combobox',
+        'aria-haspopup': 'listbox' as const,
+        'aria-expanded': dropdownActive,
+        'aria-controls': listboxId,
+        'aria-label': 'Select option',
+      })}
       onFocus={(e) => {
         if (e.target === selectRef.current) {
           selectInputRef.current?.focus();
@@ -245,7 +251,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
         alignment={alignment}
         active={!renderInput ? dropdownActive : undefined}
       >
-        <SelectDropdownMenu role="listbox" footer={footer}>
+        <SelectDropdownMenu id={listboxId} role="listbox" footer={footer}>
           {filteredOptions.length === 0 ? (
             <DropdownMenuItem disabled>
               {translate('select.noResults', 'No results')}

package/src/components/Select/SelectInput.tsx

@@ -22,6 +22,7 @@ type SelectInputProps<T> = {
   placeholder?: string;
   multiple?: boolean;
   searchable?: boolean;
+  expanded?: boolean;
   clearable?: boolean;
   inputRef?: React.ForwardedRef<HTMLInputElement>;
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -48,6 +49,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
     stickyValue,
     multiple,
     searchable,
+    expanded,
     clearable,
     clearHandler,
     searchHandler,
@@ -134,6 +136,11 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
       }}
       $width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
       tabIndex={0}
+      role="combobox"
+      aria-expanded={!!expanded}
+      aria-controls={listboxId}
+      aria-autocomplete="list"
+      aria-label="Select option"
       onFocus={(e) => {
         e.stopPropagation();
       }}
@@ -156,16 +163,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   );
 
   return (
-    <SelectInputWrapper
-      id={id}
-      onFocus={onFocusHandler}
-      onClick={onClickHandler}
-      role="button"
-      aria-haspopup="listbox"
-      aria-controls={listboxId}
-      aria-owns={listboxId}
-      aria-label="Select option"
-    >
+    <SelectInputWrapper id={id} onFocus={onFocusHandler} onClick={onClickHandler}>
       {!onlyIcon && (
         <>
           <SelectInputValue>

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -20,6 +20,7 @@ export const useThemeHooks = vi.fn(() => ({
     sendPageActionsButtonClickedMessage: vi.fn(),
     sendColorModeSwitchedMessage: vi.fn(),
     sendConsentChangedMessage: vi.fn(),
+    sendFilterCheckboxToggledMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
   useBanner: vi.fn(() => ({

package/src/core/hooks/index.ts

@@ -21,6 +21,7 @@ export * from './menu/use-mobile-menu-levels';
 export * from './menu/use-collapse';
 export * from './feedback/use-report-dialog';
 export * from './use-tabs';
+export * from './use-tab-list';
 export * from './use-focus-trap';
 export * from './use-consent-dialog';
 export * from './use-consent-telemetry';

package/src/core/hooks/use-tab-list.ts

@@ -0,0 +1,63 @@
+import { useCallback, useId, useRef } from 'react';
+
+import type { KeyboardEvent } from 'react';
+
+type UseTabListProps = {
+  count: number;
+  activeIndex: number;
+  onChange: (index: number) => void;
+};
+
+/**
+ * Props for a WAI-ARIA tab list with automatic activation: only the active tab is a tab stop,
+ * and Left/Right/Home/End select and focus another tab.
+ */
+export function useTabList({ count, activeIndex, onChange }: UseTabListProps) {
+  const idPrefix = useId();
+  const focusableIndex = activeIndex >= 0 ? activeIndex : 0;
+  const tabRefs = useRef<(HTMLElement | null)[]>([]);
+
+  const select = useCallback(
+    (index: number) => {
+      onChange(index);
+      tabRefs.current[index]?.focus();
+    },
+    [onChange],
+  );
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent, index: number) => {
+      const target = (<Record<string, number>>{
+        ArrowRight: (index + 1) % count,
+        ArrowLeft: (index - 1 + count) % count,
+        Home: 0,
+        End: count - 1,
+      })[event.key];
+      if (target === undefined) return;
+      event.preventDefault();
+      select(target);
+    },
+    [count, select],
+  );
+
+  const getTabProps = (index: number) => ({
+    id: `${idPrefix}-tab-${index}`,
+    role: 'tab',
+    'aria-selected': index === activeIndex,
+    'aria-controls': `${idPrefix}-panel-${index}`,
+    tabIndex: index === focusableIndex ? 0 : -1,
+    ref: (element: HTMLElement | null) => {
+      tabRefs.current[index] = element;
+    },
+    onClick: () => select(index),
+    onKeyDown: (event: KeyboardEvent) => onKeyDown(event, index),
+  });
+
+  const getTabPanelProps = (index: number) => ({
+    id: `${idPrefix}-panel-${index}`,
+    role: 'tabpanel',
+    'aria-labelledby': `${idPrefix}-tab-${index}`,
+  });
+
+  return { tabListProps: { role: 'tablist' }, getTabProps, getTabPanelProps };
+}

package/src/core/utils/Dynamic.tsx

@@ -5,60 +5,86 @@ interface DynamicOptions<TProps extends Record<string, unknown>> {
   loading?: React.ComponentType<TProps>;
 }
 
+/**
+ * A component from `dynamic()`. After `preload()` resolves, the component renders without a
+ * loading state. On the server, `preload()` does not load a client-only component (`ssr: false`).
+ */
+export type DynamicComponent<TProps> = React.ComponentType<TProps> & {
+  preload(): Promise<void>;
+};
+
 export function dynamic<TProps extends Record<string, unknown>>(
   factory: () => Promise<
     React.ComponentType<TProps> | { default: React.ComponentType<TProps> } | Record<string, unknown>
   >,
   { ssr = true, loading }: DynamicOptions<TProps> = {},
-): React.ComponentType<TProps> {
-  const Component = React.lazy(() =>
-    factory().then((mod) => {
-      // Case 1: factory() => import('./SomeModule') - direct import
-      // Case 2: factory() => import('./SomeModule').then(mod => mod.default) - extract default
-      if (typeof mod === 'function') {
-        return { default: mod };
-      }
-
-      // Case 3: factory() => import('./SomeModule').then(mod => ({ default: mod.default })) - manual wrap
-      // Case 4: factory() => import('./SomeModule').then(mod => ({ default: mod.Named })) - manual wrap named
-      if (mod && typeof mod === 'object' && 'default' in mod) {
-        const defaultExport = mod.default;
-
-        // Handle both function components and React component objects (e.g., memo/forwardRef)
-        if (typeof defaultExport === 'function') {
-          return { default: defaultExport as React.ComponentType<TProps> };
+): DynamicComponent<TProps> {
+  let loaded: React.ComponentType<TProps> | undefined;
+  let pending: Promise<{ default: React.ComponentType<TProps> }> | undefined;
+
+  const load = () =>
+    (pending ??= factory()
+      .then((mod) => {
+        // Case 1: factory() => import('./SomeModule') - direct import
+        // Case 2: factory() => import('./SomeModule').then(mod => mod.default) - extract default
+        if (typeof mod === 'function') {
+          return { default: mod };
         }
 
-        if (defaultExport && typeof defaultExport === 'object' && '$$typeof' in defaultExport) {
-          return { default: defaultExport as React.ComponentType<TProps> };
+        // Case 3: factory() => import('./SomeModule').then(mod => ({ default: mod.default })) - manual wrap
+        // Case 4: factory() => import('./SomeModule').then(mod => ({ default: mod.Named })) - manual wrap named
+        if (mod && typeof mod === 'object' && 'default' in mod) {
+          const defaultExport = mod.default;
+
+          // Handle both function components and React component objects (e.g., memo/forwardRef)
+          if (typeof defaultExport === 'function') {
+            return { default: defaultExport as React.ComponentType<TProps> };
+          }
+
+          if (defaultExport && typeof defaultExport === 'object' && '$$typeof' in defaultExport) {
+            return { default: defaultExport as React.ComponentType<TProps> };
+          }
         }
-      }
 
-      // Case 5: factory() => import('./SomeModule').then(mod => mod.Named) - find named export
-      if (mod && typeof mod === 'object') {
-        const modObj = mod as Record<string, unknown>;
+        // Case 5: factory() => import('./SomeModule').then(mod => mod.Named) - find named export
+        if (mod && typeof mod === 'object') {
+          const modObj = mod as Record<string, unknown>;
 
-        for (const key in modObj) {
-          const value = modObj[key];
+          for (const key in modObj) {
+            const value = modObj[key];
 
-          if (typeof value === 'function') {
-            return { default: value as React.ComponentType<TProps> };
-          }
+            if (typeof value === 'function') {
+              return { default: value as React.ComponentType<TProps> };
+            }
 
-          if (value && typeof value === 'object' && '$$typeof' in value) {
-            return { default: value as React.ComponentType<TProps> };
+            if (value && typeof value === 'object' && '$$typeof' in value) {
+              return { default: value as React.ComponentType<TProps> };
+            }
           }
         }
-      }
 
-      throw new Error('Dynamic import did not return a valid React component');
-    }),
-  );
+        throw new Error('Dynamic import did not return a valid React component');
+      })
+      .then(
+        (module) => {
+          loaded = module.default;
+          return module;
+        },
+        (error: unknown) => {
+          // A failed load is not kept, so the next preload tries again.
+          pending = undefined;
+          throw error;
+        },
+      ));
+
+  const LazyComponent = React.lazy(load);
 
   const LoadingComponent: React.ComponentType<TProps> = loading || (() => null);
 
-  return (props: TProps) => {
+  const DynamicComponent = (props: TProps) => {
     const [hasMounted, setHasMounted] = React.useState(false);
+    // Fixed per instance: a change of the element type would remount the component.
+    const [Component] = React.useState(() => loaded ?? LazyComponent);
 
     React.useEffect(() => {
       setHasMounted(true);
@@ -82,4 +108,10 @@ export function dynamic<TProps extends Record<string, unknown>>(
       </React.Suspense>
     );
   };
+
+  return Object.assign(DynamicComponent, {
+    async preload() {
+      if (ssr || typeof window !== 'undefined') await load();
+    },
+  });
 }

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -11,6 +11,7 @@ const Icon = ({
   checked?: boolean;
   onClick?: () => void;
 }) => (
+  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- the control that renders the icon handles the keyboard
   <span className={className} onClick={onClick}>
     {checked ? (
       <svg

package/src/icons/ChevronSortIcon/ChevronSortIcon.tsx

@@ -6,6 +6,7 @@ import type { IconProps } from '@redocly/theme/icons/types';
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 
 const Icon = ({ className, onClick }: IconProps & { onClick?: () => void }) => (
+  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- the control that renders the icon handles the keyboard
   <svg
     className={className}
     onClick={onClick}