@redocly/theme 0.55.0-next.4 → 0.55.0-next.6

package/lib/components/Button/Button.d.ts

@@ -18,6 +18,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     title?: string;
     tabIndex?: number;
     onClick?: (e?: any) => void;
+    ref?: React.Ref<HTMLButtonElement>;
     type?: 'button' | 'submit' | 'reset';
 }
 export declare function generateClassName({ variant, tone, size, extraClass, }: ButtonProps): string;

package/lib/components/Dropdown/variables.js

@@ -42,7 +42,7 @@ exports.dropdown = (0, styled_components_1.css) `
 
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 
-  --dropdown-menu-item-border-color-focused: var(--color-blue-4);
+  --dropdown-menu-item-border-color-focused: var(--button-border-color-focused);
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Image/Image.js

@@ -58,8 +58,8 @@ function Image(props) {
             (_a = lightboxContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [lightboxImage]);
-    const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
-    const lightboxOverlayStyles = typeof lightboxStyle === 'string' ? { cssText: lightboxStyle } : lightboxStyle;
+    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;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         lightboxImage ? (react_1.default.createElement(LightboxContainer, { ref: lightboxContainerRef, onClick: handleCloseLightbox, onKeyDown: handleLightboxKeyDown, tabIndex: 0 },
             react_1.default.createElement(Overlay, { style: lightboxOverlayStyles }),

package/lib/components/Select/Select.js

@@ -151,11 +151,23 @@ 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, 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: 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(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className }),
+    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) => {
+            var _a;
+            if (e.target === selectRef.current) {
+                (_a = selectInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }, onMouseDown: (e) => {
+            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, { footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
+            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "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) &&
@@ -176,6 +188,10 @@ exports.SelectWrapper = styled_components_1.default.div `
   color: var(--select-text-color);
   min-width: 0;
 
+  &:focus-visible {
+    outline: 1px solid var(--button-border-color-focused);
+  }
+
   ${({ disabled }) => disabled &&
     `
     opacity: 0.59;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import type { SelectOption } from '../../core/types/select';
 type SelectInputProps<T> = {
     id?: string;
+    listboxId?: string;
     selectedOptions: SelectOption<T>[];
     searchValue: any;
     stickyValue: any;

package/lib/components/Select/SelectInput.js

@@ -34,7 +34,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, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
+    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
     const inputRef = (0, react_1.useRef)(null);
     const onChangeHandler = (e) => {
         var _a;
@@ -83,10 +83,14 @@ function SelectInput(props) {
             else {
                 props.inputRef.current = input;
             }
-        }, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%' }));
+        }, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, 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, Object.assign({}, props, { id: id, onFocus: onFocusHandler, onClick: onClickHandler }),
+    return (react_1.default.createElement(exports.SelectInputWrapper, Object.assign({}, props, { id: id, onFocus: onFocusHandler, onClick: onClickHandler, role: "button", "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-owns": listboxId, "aria-label": "Select option" }),
         !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/components/VersionPicker/VersionPicker.js

@@ -54,9 +54,14 @@ function VersionPicker(props) {
     };
     if (!options.length && !(versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.showForUnversioned))
         return null;
-    return (React.createElement(VersionsPickerWrapper, { "data-component-name": "VersionPicker/VersionPicker" },
-        React.createElement(VersionPickerLabel, { "data-translation-key": "versionPicker.label" }, translate('versionPicker.label', 'Version:')),
-        React.createElement(exports.VersionPickerSelect, { placeholder: translate('versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: handleOnChange })));
+    return (React.createElement(VersionsPickerWrapper, { "data-component-name": "VersionPicker/VersionPicker", role: "region", "aria-label": translate('versionPicker.label', 'Version selector') },
+        React.createElement(VersionPickerLabel, { "data-translation-key": "versionPicker.label", htmlFor: "version-picker-select" }, translate('versionPicker.label', 'Version:')),
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate('versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: handleOnChange, dataAttributes: {
+                id: 'version-picker-select',
+                'aria-describedby': 'version-picker-description',
+                'aria-label': translate('versionPicker.label', 'Select version'),
+            } }),
+        React.createElement(SrOnly, { id: "version-picker-description" }, "This is version picker select, using it you can select a version of the API.")));
 }
 const VersionPickerLabel = styled_components_1.default.label `
   font-size: var(--version-picker-label-font-size);
@@ -79,6 +84,10 @@ exports.VersionPickerSelect = (0, styled_components_1.default)(Select_1.Select)
     border-radius: var(--version-picker-input-border-radius);
     padding: var(--version-picker-input-padding-vertical)
       var(--version-picker-input-padding-horizontal);
+
+    &:focus-within {
+      outline: 1px solid var(--version-picker-focus-outline-color);
+    }
   }
 `;
 const VersionsPickerWrapper = styled_components_1.default.div `
@@ -89,5 +98,15 @@ const VersionsPickerWrapper = styled_components_1.default.div `
   justify-content: space-between;
   padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
   border-bottom: var(--version-picker-border-bottom);
+
+  &:focus-visible {
+    outline: 1px solid var(--version-picker-focus-outline-color);
+  }
+`;
+const SrOnly = styled_components_1.default.span `
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
 `;
 //# sourceMappingURL=VersionPicker.js.map

package/lib/components/VersionPicker/variables.js

@@ -37,6 +37,7 @@ exports.versionPicker = (0, styled_components_1.css) `
   --version-picker-list-item-bg-color-active: var(--select-list-item-bg-color-active); // @presenter Color
   --version-picker-list-item-bg-color-hover: var(--select-list-item-bg-color-hover); // @presenter Color
 
+  --version-picker-focus-outline-color: var(--button-border-color-focused);
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

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

@@ -32,3 +32,4 @@ export * from '../../core/utils/match-code-walkthrough-conditions';
 export * from '../../core/utils/replace-inputs-with-value';
 export * from '../../core/utils/find-closest-common-directory';
 export * from '../../core/utils/get-user-agent';
+export * from '../../core/utils/parse-style-string';

package/lib/core/utils/index.js

@@ -48,4 +48,5 @@ __exportStar(require("../../core/utils/match-code-walkthrough-conditions"), expo
 __exportStar(require("../../core/utils/replace-inputs-with-value"), exports);
 __exportStar(require("../../core/utils/find-closest-common-directory"), exports);
 __exportStar(require("../../core/utils/get-user-agent"), exports);
+__exportStar(require("../../core/utils/parse-style-string"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/utils/parse-style-string.d.ts

@@ -0,0 +1 @@
+export declare function parseStyleString(styleString: string): React.CSSProperties;

package/lib/core/utils/parse-style-string.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseStyleString = parseStyleString;
+function parseStyleString(styleString) {
+    return styleString
+        .split(';')
+        .filter((style) => style.trim().length)
+        .reduce((styleObj, style) => {
+        const colonIndex = style.indexOf(':');
+        if (colonIndex === -1)
+            return styleObj;
+        const key = style.substring(0, colonIndex).trim();
+        const value = style.substring(colonIndex + 1).trim();
+        if (key && value) {
+            const camelCaseKey = key.replace(/-[a-z]/g, (match) => {
+                return match[1].toUpperCase();
+            });
+            styleObj[camelCaseKey] = value;
+        }
+        return styleObj;
+    }, {});
+}
+//# sourceMappingURL=parse-style-string.js.map

package/lib/markdoc/components/Tabs/TabList.d.ts

@@ -26,8 +26,5 @@ export declare const TabItem: import("styled-components").StyledComponent<"li",
     size: TabsSize;
     tabIndex?: number;
 }, never>;
-export declare const TabButtonLink: import("styled-components").StyledComponent<"button", any, {
-    size: TabsSize;
-    disabled?: boolean;
-}, never>;
+export declare const TabButtonLink: import("styled-components").StyledComponent<React.FC<import("../../../components/Button/Button").ButtonProps>, any, import("../../../components/Button/Button").ButtonProps, never>;
 export {};

package/lib/markdoc/components/Tabs/TabList.js

@@ -22,25 +22,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabButtonLink = exports.TabItem = exports.TabListContainer = void 0;
 exports.TabList = TabList;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Tab_1 = require("../../../markdoc/components/Tabs/Tab");
 const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
-const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
-const ChevronUpIcon_1 = require("../../../icons/ChevronUpIcon/ChevronUpIcon");
+const Button_1 = require("../../../components/Button/Button");
 function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, onTabClick, handleKeyboard, getTabId, activeTab, isAnimating, highlightStyle, allTabsHidden, tabsContainerRef, }) {
-    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
-    const handleDropdownOpen = (0, react_1.useCallback)(() => {
-        setIsDropdownOpen(true);
-    }, []);
-    const handleDropdownClose = (0, react_1.useCallback)(() => {
-        setIsDropdownOpen(false);
-    }, []);
     return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef, "data-animating": isAnimating },
         react_1.default.createElement(HighlightBar, { size: size, style: { left: highlightStyle.left, width: highlightStyle.width } },
             react_1.default.createElement("div", null)),
@@ -59,20 +54,16 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
                     onTabClick(label);
                 } }));
         }),
-        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement("div", { onPointerEnter: handleDropdownOpen, onPointerLeave: handleDropdownClose },
-            react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                        ? 'active'
-                        : undefined },
-                    allTabsHidden ? activeTab : 'More',
-                    isDropdownOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)), alignment: "start", withArrow: false, active: isDropdownOpen, triggerEvent: "click" },
-                react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
-                    const { label } = childrenArray[index].props;
-                    const tabId = getTabId(label, index);
-                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
-                            onTabClick(index);
-                            handleDropdownClose();
-                        }, disabled: childrenArray[index].props.disable }, label));
-                }))))))));
+        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
+                    ? 'active'
+                    : undefined }, allTabsHidden ? activeTab : 'More'), alignment: "start", withArrow: true },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
+                const { label } = childrenArray[index].props;
+                const tabId = getTabId(label, index);
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
+                        onTabClick(index);
+                    }, disabled: childrenArray[index].props.disable }, label));
+            })))))));
 }
 exports.TabListContainer = styled_components_1.default.ul `
   position: relative;
@@ -166,22 +157,11 @@ const HighlightBar = styled_components_1.default.div `
     border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
   }
 `;
-exports.TabButtonLink = styled_components_1.default.button `
-  all: unset;
-  flex-grow: 1;
-  cursor: pointer;
-  width: 100%;
-  text-align: center;
+exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xxs);
-  z-index: 2;
 
   transition:
     background-color 300ms ease-in-out,

package/lib/markdoc/components/Tabs/Tabs.js

@@ -92,14 +92,7 @@ function Tabs({ children, className, size }) {
                         else {
                             setHighlightStyle({ left: offsetLeft, width: offsetWidth });
                         }
-                        const timeoutId = setTimeout(() => {
-                            if (visibleTabs.includes(activeIndex)) {
-                                activeTabElement === null || activeTabElement === void 0 ? void 0 : activeTabElement.classList.add('active');
-                            }
-                            setIsAnimating(false);
-                        }, 300);
                         return () => {
-                            clearTimeout(timeoutId);
                             container.querySelectorAll('[data-label]').forEach((el) => {
                                 el.classList.remove('active');
                             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.55.0-next.4",
+  "version": "0.55.0-next.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,7 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.26.1",
+    "@redocly/config": "0.26.2",
     "@redocly/realm-asyncapi-sdk": "0.1.0-next.0"
   },
   "scripts": {

package/src/components/Button/Button.tsx

@@ -32,7 +32,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   title?: string;
   tabIndex?: number;
   onClick?: (e?: any) => void;
-
+  ref?: React.Ref<HTMLButtonElement>;
   type?: 'button' | 'submit' | 'reset';
 }
 

package/src/components/Dropdown/variables.ts

@@ -40,6 +40,6 @@ export const dropdown = css`
 
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 
-  --dropdown-menu-item-border-color-focused: var(--color-blue-4);
+  --dropdown-menu-item-border-color-focused: var(--button-border-color-focused);
   // @tokens End
 `;

package/src/components/Image/Image.tsx

@@ -3,11 +3,7 @@ import styled from 'styled-components';
 
 import type { KeyboardEvent, JSX } from 'react';
 
-import { parseSrcSet } from '@redocly/theme/core/utils';
-
-interface CSSProperties extends React.CSSProperties {
-  cssText?: string;
-}
+import { parseSrcSet, parseStyleString } from '@redocly/theme/core/utils';
 
 export type ImageProps = {
   src?: string;
@@ -59,14 +55,14 @@ export function Image(props: ImageProps): JSX.Element {
     }
   }, [lightboxImage]);
 
-  const combinedStyles: CSSProperties = {
+  const combinedStyles: React.CSSProperties = {
     ...(withLightbox && { cursor: 'pointer' }),
     ...(border && { border }),
-    ...(typeof style === 'string' ? { cssText: style } : style),
+    ...(typeof style === 'string' ? parseStyleString(style) : style),
   };
 
-  const lightboxOverlayStyles: CSSProperties | undefined =
-    typeof lightboxStyle === 'string' ? { cssText: lightboxStyle } : lightboxStyle;
+  const lightboxOverlayStyles: React.CSSProperties | undefined =
+    typeof lightboxStyle === 'string' ? parseStyleString(lightboxStyle) : lightboxStyle;
 
   return (
     <>

package/src/components/Select/Select.tsx

@@ -172,6 +172,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     return (
       <SelectInput
         id={inputId}
+        listboxId={inputId}
         selectedOptions={selectedOptions}
         searchValue={searchValue}
         placeholder={placeholder}
@@ -199,6 +200,24 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       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) => {
+        if (e.target === selectRef.current) {
+          selectInputRef.current?.focus();
+        }
+      }}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
     >
       <SelectDropdown
         closeOnClick={!multiple}
@@ -209,7 +228,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
         alignment={alignment}
         active={!renderInput ? dropdownActive : undefined}
       >
-        <SelectDropdownMenu footer={footer}>
+        <SelectDropdownMenu role="listbox" footer={footer}>
           {filteredOptions.length === 0 ? (
             <DropdownMenuItem disabled>No results</DropdownMenuItem>
           ) : (
@@ -257,6 +276,10 @@ export const SelectWrapper = styled.div<{ disabled?: boolean }>`
   color: var(--select-text-color);
   min-width: 0;
 
+  &:focus-visible {
+    outline: 1px solid var(--button-border-color-focused);
+  }
+
   ${({ disabled }) =>
     disabled &&
     `

package/src/components/Select/SelectInput.tsx

@@ -9,6 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 
 type SelectInputProps<T> = {
   id?: string;
+  listboxId?: string;
   selectedOptions: SelectOption<T>[];
   searchValue: any;
   stickyValue: any;
@@ -30,6 +31,7 @@ type SelectInputProps<T> = {
 export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   const {
     id,
+    listboxId,
     onlyIcon,
     icon,
     customIcon,
@@ -119,6 +121,13 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
         }
       }}
       width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
+      tabIndex={0}
+      onFocus={(e) => {
+        e.stopPropagation();
+      }}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
     />
   );
 
@@ -135,7 +144,17 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   );
 
   return (
-    <SelectInputWrapper {...props} id={id} onFocus={onFocusHandler} onClick={onClickHandler}>
+    <SelectInputWrapper
+      {...props}
+      id={id}
+      onFocus={onFocusHandler}
+      onClick={onClickHandler}
+      role="button"
+      aria-haspopup="listbox"
+      aria-controls={listboxId}
+      aria-owns={listboxId}
+      aria-label="Select option"
+    >
       {!onlyIcon && (
         <>
           <SelectInputValue>

package/src/components/VersionPicker/VersionPicker.tsx

@@ -35,8 +35,15 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
   if (!options.length && !versionPicker?.showForUnversioned) return null;
 
   return (
-    <VersionsPickerWrapper data-component-name="VersionPicker/VersionPicker">
-      <VersionPickerLabel data-translation-key="versionPicker.label">
+    <VersionsPickerWrapper
+      data-component-name="VersionPicker/VersionPicker"
+      role="region"
+      aria-label={translate('versionPicker.label', 'Version selector')}
+    >
+      <VersionPickerLabel
+        data-translation-key="versionPicker.label"
+        htmlFor="version-picker-select"
+      >
         {translate('versionPicker.label', 'Version:')}
       </VersionPickerLabel>
       <VersionPickerSelect
@@ -45,7 +52,15 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
         options={options}
         value={value}
         onChange={handleOnChange}
+        dataAttributes={{
+          id: 'version-picker-select',
+          'aria-describedby': 'version-picker-description',
+          'aria-label': translate('versionPicker.label', 'Select version'),
+        }}
       />
+      <SrOnly id="version-picker-description">
+        This is version picker select, using it you can select a version of the API.
+      </SrOnly>
     </VersionsPickerWrapper>
   );
 }
@@ -72,6 +87,10 @@ export const VersionPickerSelect = styled(Select)<SelectProps>`
     border-radius: var(--version-picker-input-border-radius);
     padding: var(--version-picker-input-padding-vertical)
       var(--version-picker-input-padding-horizontal);
+
+    &:focus-within {
+      outline: 1px solid var(--version-picker-focus-outline-color);
+    }
   }
 `;
 
@@ -83,4 +102,15 @@ const VersionsPickerWrapper = styled.div`
   justify-content: space-between;
   padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
   border-bottom: var(--version-picker-border-bottom);
+
+  &:focus-visible {
+    outline: 1px solid var(--version-picker-focus-outline-color);
+  }
+`;
+
+const SrOnly = styled.span`
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
 `;

package/src/components/VersionPicker/variables.ts

@@ -35,5 +35,6 @@ export const versionPicker = css`
   --version-picker-list-item-bg-color-active: var(--select-list-item-bg-color-active); // @presenter Color
   --version-picker-list-item-bg-color-hover: var(--select-list-item-bg-color-hover); // @presenter Color
 
+  --version-picker-focus-outline-color: var(--button-border-color-focused);
   // @tokens End
 `;

package/src/core/utils/index.ts

@@ -32,3 +32,4 @@ export * from '@redocly/theme/core/utils/match-code-walkthrough-conditions';
 export * from '@redocly/theme/core/utils/replace-inputs-with-value';
 export * from '@redocly/theme/core/utils/find-closest-common-directory';
 export * from '@redocly/theme/core/utils/get-user-agent';
+export * from '@redocly/theme/core/utils/parse-style-string';

package/src/core/utils/parse-style-string.ts

@@ -0,0 +1,21 @@
+export function parseStyleString(styleString: string): React.CSSProperties {
+  return styleString
+    .split(';')
+    .filter((style) => style.trim().length)
+    .reduce((styleObj: React.CSSProperties, style) => {
+      const colonIndex = style.indexOf(':');
+      if (colonIndex === -1) return styleObj;
+
+      const key = style.substring(0, colonIndex).trim();
+      const value = style.substring(colonIndex + 1).trim();
+
+      if (key && value) {
+        const camelCaseKey = key.replace(/-[a-z]/g, (match) => {
+          return match[1].toUpperCase();
+        });
+        (styleObj as any)[camelCaseKey] = value;
+      }
+
+      return styleObj;
+    }, {});
+}

package/src/markdoc/components/Tabs/TabList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -8,8 +8,7 @@ import { TabItemProps, TabsSize } from '@redocly/theme/markdoc/components/Tabs/T
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 type TabListProps = {
   childrenArray: React.ReactElement<TabItemProps>[];
@@ -42,16 +41,6 @@ export function TabList({
   allTabsHidden,
   tabsContainerRef,
 }: TabListProps): JSX.Element {
-  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
-  const handleDropdownOpen = useCallback(() => {
-    setIsDropdownOpen(true);
-  }, []);
-
-  const handleDropdownClose = useCallback(() => {
-    setIsDropdownOpen(false);
-  }, []);
-
   return (
     <TabListContainer role="tablist" ref={tabsContainerRef} data-animating={isAnimating}>
       <HighlightBar size={size} style={{ left: highlightStyle.left, width: highlightStyle.width }}>
@@ -88,47 +77,41 @@ export function TabList({
         tabIndex={0}
       >
         {overflowTabs.length > 0 && (
-          <div onPointerEnter={handleDropdownOpen} onPointerLeave={handleDropdownClose}>
-            <Dropdown
-              trigger={
-                <TabButtonLink
-                  size={size}
-                  className={
-                    overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                      ? 'active'
-                      : undefined
-                  }
-                >
-                  {allTabsHidden ? activeTab : 'More'}
-                  {isDropdownOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                </TabButtonLink>
-              }
-              alignment="start"
-              withArrow={false}
-              active={isDropdownOpen}
-              triggerEvent="click"
-            >
-              <DropdownMenu>
-                {overflowTabs.map((index) => {
-                  const { label } = childrenArray[index].props;
-                  const tabId = getTabId(label, index);
-                  return (
-                    <DropdownMenuItem
-                      key={`more-${tabId}`}
-                      active={activeTab === label}
-                      onAction={() => {
-                        onTabClick(index);
-                        handleDropdownClose();
-                      }}
-                      disabled={childrenArray[index].props.disable}
-                    >
-                      {label}
-                    </DropdownMenuItem>
-                  );
-                })}
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown
+            trigger={
+              <TabButtonLink
+                size={size}
+                className={
+                  overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
+                    ? 'active'
+                    : undefined
+                }
+              >
+                {allTabsHidden ? activeTab : 'More'}
+              </TabButtonLink>
+            }
+            alignment="start"
+            withArrow={true}
+          >
+            <DropdownMenu>
+              {overflowTabs.map((index) => {
+                const { label } = childrenArray[index].props;
+                const tabId = getTabId(label, index);
+                return (
+                  <DropdownMenuItem
+                    key={`more-${tabId}`}
+                    active={activeTab === label}
+                    onAction={() => {
+                      onTabClick(index);
+                    }}
+                    disabled={childrenArray[index].props.disable}
+                  >
+                    {label}
+                  </DropdownMenuItem>
+                );
+              })}
+            </DropdownMenu>
+          </Dropdown>
         )}
       </TabItem>
     </TabListContainer>
@@ -231,25 +214,11 @@ const HighlightBar = styled.div<{ size: TabsSize }>`
   }
 `;
 
-export const TabButtonLink = styled.button<{
-  size: TabsSize;
-  disabled?: boolean;
-}>`
-  all: unset;
-  flex-grow: 1;
-  cursor: pointer;
-  width: 100%;
-  text-align: center;
+export const TabButtonLink = styled(Button)`
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xxs);
-  z-index: 2;
 
   transition:
     background-color 300ms ease-in-out,

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -105,15 +105,7 @@ export function Tabs({ children, className, size }: TabsProps): JSX.Element {
               setHighlightStyle({ left: offsetLeft, width: offsetWidth });
             }
 
-            const timeoutId = setTimeout(() => {
-              if (visibleTabs.includes(activeIndex)) {
-                activeTabElement?.classList.add('active');
-              }
-              setIsAnimating(false);
-            }, 300);
-
             return () => {
-              clearTimeout(timeoutId);
               container.querySelectorAll('[data-label]').forEach((el) => {
                 el.classList.remove('active');
               });