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

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/lib/core/utils/index.d.ts

@@ -17,6 +17,7 @@ export * from './type-guards';
 export * from './dom';
 export * from './toc';
 export * from './menu';
+export * from './navigation-tabs';
 export * from './load-and-navigate';
 export * from './get-scorecard-color-variable';
 export * from './change-text-casing';

package/lib/core/utils/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./type-guards"), exports);
 __exportStar(require("./dom"), exports);
 __exportStar(require("./toc"), exports);
 __exportStar(require("./menu"), exports);
+__exportStar(require("./navigation-tabs"), exports);
 __exportStar(require("./load-and-navigate"), exports);
 __exportStar(require("./get-scorecard-color-variable"), exports);
 __exportStar(require("./change-text-casing"), exports);

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

@@ -2,9 +2,13 @@ import type { ResolvedNavItem, Version } from '@redocly/config';
 import type { Location } from 'react-router';
 import type { Locale, TFunction } from '../types/l10n';
 import type { ItemState } from '../types/sidebar';
+import type { NavigationTabsState } from '../types/navigation-tabs';
 import { MenuItemType } from '../constants/common';
 export declare const mapNavbarItems: (items: ResolvedNavItem[], defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => ItemState[];
 export declare const isItemActive: (item: ResolvedNavItem, defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => boolean;
 export declare const buildLanguagesGroup: (locales: Locale[], defaultLocale: string, currentLocale: string) => ResolvedNavItem | undefined;
 export declare const buildVersionSection: (translate: TFunction, versions: Version[], activeVersion?: Version) => ResolvedNavItem[];
+export declare const buildNavigationTabsSelect: ({ navigationTabs, }: {
+    navigationTabs: NavigationTabsState | undefined;
+}) => ItemState | undefined;
 export declare function getMenuItemType(item: ItemState): MenuItemType;

package/lib/core/utils/menu.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildVersionSection = exports.buildLanguagesGroup = exports.isItemActive = exports.mapNavbarItems = void 0;
+exports.buildNavigationTabsSelect = exports.buildVersionSection = exports.buildLanguagesGroup = exports.isItemActive = exports.mapNavbarItems = void 0;
 exports.getMenuItemType = getMenuItemType;
 const common_1 = require("../constants/common");
 const urls_1 = require("./urls");
+const navigation_tabs_1 = require("./navigation-tabs");
 const TRANSLATION_KEYS = {
     version: 'mobileMenu.version',
 };
@@ -35,7 +36,7 @@ const buildLanguagesGroup = (locales, defaultLocale, currentLocale) => {
             .filter((locale) => locale.code !== currentLocale)
             .map((locale) => {
             const newLangPathname = (0, urls_1.getPathnameForLocale)((0, urls_1.withoutPathPrefix)(location.pathname), defaultLocale, locale.code, locales);
-            const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+            const newUrlWithLanguage = `${(0, urls_1.addLeadingSlash)(newLangPathname)}${location.search}${location.hash}`;
             return {
                 type: 'link',
                 label: locale.name || locale.code || '',
@@ -72,9 +73,30 @@ const buildVersionSection = (translate, versions, activeVersion) => {
     ];
 };
 exports.buildVersionSection = buildVersionSection;
+const buildNavigationTabsSelect = ({ navigationTabs, }) => {
+    var _a;
+    var _b;
+    const tabs = (_a = (0, navigation_tabs_1.toNavigationTabsConfig)({ state: navigationTabs })) === null || _a === void 0 ? void 0 : _a.items;
+    if (!tabs) {
+        return;
+    }
+    const activeTab = tabs.find((tab) => tab.active);
+    return {
+        type: common_1.MenuItemType.Select,
+        label: (_b = activeTab === null || activeTab === void 0 ? void 0 : activeTab.label) !== null && _b !== void 0 ? _b : 'Navigation tabs',
+        labelTranslationKey: activeTab ? activeTab.labelTranslationKey : 'navigationTabs.label',
+        items: tabs.map(toNavigationTabOption),
+        active: false,
+        hasActiveSubItem: !!activeTab,
+    };
+};
+exports.buildNavigationTabsSelect = buildNavigationTabsSelect;
 function getMenuItemType(item) {
     var _a, _b;
-    if (item.type === common_1.MenuItemType.Separator) {
+    if (item.type === common_1.MenuItemType.Select) {
+        return common_1.MenuItemType.Select;
+    }
+    else if (item.type === common_1.MenuItemType.Separator) {
         return common_1.MenuItemType.Separator;
     }
     else if (item.menuStyle === 'drilldown') {
@@ -89,4 +111,21 @@ function getMenuItemType(item) {
     else
         return common_1.MenuItemType.Default;
 }
+function toNavigationTabOption(tab) {
+    var _a;
+    const landing = tab.type === 'group' ? ((_a = tab.items.find((entry) => entry.active)) !== null && _a !== void 0 ? _a : tab.items[0]) : tab;
+    return {
+        type: tab.type,
+        label: tab.label,
+        labelTranslationKey: tab.labelTranslationKey,
+        icon: tab.icon,
+        srcSet: tab.srcSet,
+        link: landing === null || landing === void 0 ? void 0 : landing.link,
+        external: landing === null || landing === void 0 ? void 0 : landing.external,
+        target: landing === null || landing === void 0 ? void 0 : landing.target,
+        items: [],
+        active: !!tab.active,
+        hasActiveSubItem: false,
+    };
+}
 //# sourceMappingURL=menu.js.map

package/lib/core/utils/navigation-tabs.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeHooks } from '../types/hooks';
+import type { NavigationTabsConfig, NavigationTabsState } from '../types/navigation-tabs';
+type NavbarItemClickedPayload = Parameters<ReturnType<ThemeHooks['useTelemetry']>['sendNavbarMenuItemClickedMessage']>[0];
+export declare function toNavigationTabsConfig({ state, }: {
+    state: NavigationTabsState | undefined;
+}): NavigationTabsConfig | undefined;
+export declare function getNavbarItemClickedPayload(type: 'link' | 'group'): NavbarItemClickedPayload;
+export {};

package/lib/core/utils/navigation-tabs.js

@@ -0,0 +1,71 @@
+"use strict";
+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.toNavigationTabsConfig = toNavigationTabsConfig;
+exports.getNavbarItemClickedPayload = getNavbarItemClickedPayload;
+const get_base_data_attributes_1 = require("./telemetry/get-base-data-attributes");
+function toNavigationTabsConfig({ state, }) {
+    const items = toNavigationTabEntries(state).map((entry) => entry.kind === 'menu'
+        ? {
+            type: 'group',
+            label: entry.tab.label,
+            labelTranslationKey: entry.tab.labelTranslationKey,
+            icon: entry.tab.icon,
+            srcSet: entry.tab.srcSet,
+            items: entry.entries.map((_a) => {
+                var { active } = _a, link = __rest(_a, ["active"]);
+                return toRowLink(link, active);
+            }),
+            active: entry.active,
+        }
+        : toRowLink(entry.link, entry.active));
+    return items.length ? { items } : undefined;
+}
+function getNavbarItemClickedPayload(type) {
+    return [
+        Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('navbarItem', 'navbar')), { type }),
+    ];
+}
+function toNavigationTabEntries(state) {
+    if (!(state === null || state === void 0 ? void 0 : state.tabs.length))
+        return [];
+    return state.tabs.flatMap((tab) => {
+        var _a;
+        const active = ((_a = state.activeTab) === null || _a === void 0 ? void 0 : _a.tabId) === tab.tabId;
+        if (tab.menu) {
+            const entries = tab.menu
+                .filter((menuEntry) => !!menuEntry.link)
+                .map((_a) => { var _b; var { tabId } = _a, link = __rest(_a, ["tabId"]); return (Object.assign(Object.assign({}, link), { active: active && tabId === ((_b = state.activeMenuEntry) === null || _b === void 0 ? void 0 : _b.tabId) })); });
+            return entries.length ? [{ kind: 'menu', tab, entries, active }] : [];
+        }
+        if (!tab.link)
+            return [];
+        return [
+            {
+                kind: 'link',
+                link: {
+                    label: tab.label,
+                    labelTranslationKey: tab.labelTranslationKey,
+                    link: tab.link,
+                    icon: tab.icon,
+                    srcSet: tab.srcSet,
+                },
+                active,
+            },
+        ];
+    });
+}
+function toRowLink(link, active) {
+    return Object.assign(Object.assign({ type: 'link' }, link), { active });
+}
+//# sourceMappingURL=navigation-tabs.js.map

package/lib/index.d.ts

@@ -46,6 +46,11 @@ export * from './components/Navbar/Navbar';
 export * from './components/Navbar/NavbarItem';
 export * from './components/Navbar/NavbarLogo';
 export * from './components/Navbar/NavbarMenu';
+export * from './components/NavigationTabs/NavigationTabs';
+export { NavigationTab } from './components/NavigationTabs/NavigationTab';
+export type { NavigationTabProps } from './components/NavigationTabs/NavigationTab';
+export * from './components/NavigationTabs/NavigationTabMenu';
+export * from './components/NavigationTabs/NavigationTabContent';
 export * from './components/Footer/Footer';
 export * from './components/Footer/FooterColumn';
 export * from './components/Footer/FooterCopyright';

package/lib/index.js

@@ -36,7 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markdoc = void 0;
+exports.markdoc = exports.NavigationTab = void 0;
 __exportStar(require("./core"), exports);
 __exportStar(require("./ext/configure"), exports);
 /* Components */
@@ -90,6 +90,12 @@ __exportStar(require("./components/Navbar/Navbar"), exports);
 __exportStar(require("./components/Navbar/NavbarItem"), exports);
 __exportStar(require("./components/Navbar/NavbarLogo"), exports);
 __exportStar(require("./components/Navbar/NavbarMenu"), exports);
+/* NavigationTabs */
+__exportStar(require("./components/NavigationTabs/NavigationTabs"), exports);
+var NavigationTab_1 = require("./components/NavigationTabs/NavigationTab");
+Object.defineProperty(exports, "NavigationTab", { enumerable: true, get: function () { return NavigationTab_1.NavigationTab; } });
+__exportStar(require("./components/NavigationTabs/NavigationTabMenu"), exports);
+__exportStar(require("./components/NavigationTabs/NavigationTabContent"), exports);
 /* Footer */
 __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Footer/FooterColumn"), exports);

package/lib/layouts/PageLayout.js

@@ -16,7 +16,7 @@ function PageLayout({ sidebar, children, }) {
 const Container = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  min-height: calc(100vh - var(--navbar-offset));
 
   @media screen and (min-width: ${utils_1.breakpoints.max}) {
     max-width: var(--container-max-width);

package/lib/layouts/RootLayout.js

@@ -11,8 +11,8 @@ const SkipContent_1 = require("../components/SkipContent/SkipContent");
 const AIAssistantButton_1 = require("../components/Buttons/AIAssistantButton");
 const hooks_1 = require("../core/hooks");
 function RootLayout({ children }) {
-    const { useSearch } = (0, hooks_1.useThemeHooks)();
-    const { askAi } = useSearch();
+    const { useSearchFeatures } = (0, hooks_1.useThemeHooks)();
+    const { askAi } = useSearchFeatures();
     return (react_1.default.createElement("div", { "data-component-name": "layouts/RootLayout" },
         react_1.default.createElement(SkipContent_1.SkipContent, null),
         react_1.default.createElement(Navbar_1.Navbar, null),

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -41,7 +41,7 @@ const FilterWrapper = styled_components_1.default.div `
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: var(--navbar-height);
+  top: var(--navbar-stack-height);
   background-color: var(--bg-color);
   z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -68,9 +68,9 @@ const CodePanelWrapper = styled_components_1.default.div `
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
   overflow: clip;
-  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
-  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  --code-block-max-height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
+  height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
   position: sticky;
-  top: calc(var(--navbar-height) + var(--spacing-xl));
+  top: calc(var(--navbar-stack-height) + var(--spacing-xl));
 `;
 //# sourceMappingURL=CodePanel.js.map

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -95,7 +95,7 @@ const DocsPanel = styled_components_1.default.div `
   flex-direction: column;
 
   min-height: 0;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-stack-height));
 
   padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.70.0-next.3",
+  "version": "0.70.0-next.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.16.0-next.1",
+    "@redocly/realm-asyncapi-sdk": "0.16.0-next.2",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -71,7 +71,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.58.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/Catalog.tsx

@@ -256,7 +256,7 @@ const CatalogDescription = styled.p`
 const CatalogPageWrapper = styled.div`
   --sidebar-width: var(--catalog-sidebar-width);
 
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   display: flex;
   flex-direction: column;
   overflow: hidden;

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -164,10 +164,10 @@ export function CatalogEntityHistorySidebar({
 
 const SidebarOverlay = styled.div`
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   padding: var(--catalog-history-sidebar-padding);
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -120,7 +120,7 @@ const SplitViewWrapper = styled.div`
 const SchemaSampleWrapper = styled.div`
   flex: 1;
   position: sticky;
-  top: calc(var(--navbar-height) + var(--banner-height) + var(--spacing-md));
+  top: calc(var(--navbar-offset) + var(--spacing-md));
   align-self: flex-start;
   padding-top: var(--spacing-sm);
 `;

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/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.tsx

@@ -23,7 +23,7 @@ export function CatalogMobileFiltersPanel({
 
 const CatalogMobileFiltersPanelWrapper = styled.div`
   width: 100%;
-  max-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  max-height: calc(100vh - var(--navbar-offset));
   overflow-y: auto;
   background: var(--sidebar-bg-color);
   display: flex;

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.tsx

@@ -27,10 +27,10 @@ export function CatalogMobileFiltersPanelOverlay({
 const CatalogMobileFiltersPanelOverlayWrapper = styled.div`
   display: none;
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: 100%;
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   z-index: 3;
   background: var(--bg-color);
   flex-direction: column;

package/src/components/Dropdown/Dropdown.tsx

@@ -156,13 +156,16 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
     const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
 
+    const isLinkTrigger = Boolean(triggerChild.props?.to || triggerChild.props?.href);
+
     const dropdownTrigger = cloneElement(triggerChild, {
       onClick: triggerEvent === 'click' ? handleToggle : undefined,
+      'aria-haspopup': 'menu',
       'aria-expanded': isOpen,
       icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
       ...(withArrow ? { iconPosition: 'right' } : {}),
       ...triggerChild.props,
-      onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
+      onKeyDown: triggerEvent === 'click' || !isLinkTrigger ? handleKeyDown : undefined,
     });
 
     const menu = (

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`