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

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/Menu/MenuItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { JSX } from 'react';
 import type { MenuItemProps } from '../../core/types';
+import type { JSX } from 'react';
 export declare function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element;

package/lib/components/Menu/MenuItem.js

@@ -66,9 +66,14 @@ function MenuItem(props) {
             handleExpand();
         }
     };
+    const handleExpandOnEnter = (event) => {
+        if (event.key === 'Enter') {
+            handleOnClick();
+        }
+    };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
@@ -80,7 +85,7 @@ function MenuItem(props) {
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
         hasHttpTag ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
-        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive }, label)) : (label),
+        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive, onKeyDown: handleExpandOnEnter }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
         item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { depth: depth, linePosition: item.linePosition })) : null));
 }
@@ -128,7 +133,6 @@ const MenuItemWrapper = styled_components_1.default.div `
   }
 `;
 const MenuItemNestedWrapper = styled_components_1.default.div `
-  overflow: hidden;
   order: 1;
   position: relative;
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.55.0-next.3",
+  "version": "0.55.0-next.5",
   "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/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/Menu/MenuItem.tsx

@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { JSX } from 'react';
 import type { ItemState, MenuItemProps } from '@redocly/theme/core/types';
+import type { JSX, KeyboardEvent } from 'react';
 
 import { useNestedMenu, useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
@@ -49,6 +49,12 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     }
   };
 
+  const handleExpandOnEnter = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleOnClick();
+    }
+  };
+
   const chevron = hasChevron ? (
     isExpanded ? (
       <ChevronDownIcon
@@ -64,6 +70,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   ) : null;
 
   const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+
   const label = item.label && (
     <MenuItemLabelWrapper
       active={item.active}
@@ -72,8 +79,10 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       withChevron={hasChevron}
       isSeparator={isSeparator}
       onClick={handleOnClick}
+      onKeyDown={handleExpandOnEnter}
       ref={labelRef}
       role={item.link ? 'none' : 'link'}
+      tabIndex={!item.link ? 0 : undefined}
       data-testid="menu-item-label"
     >
       {hasChevron ? <ChevronWrapper>{chevron}</ChevronWrapper> : null}
@@ -115,6 +124,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
           external={item.external}
           target={item.target}
           languageInsensitive={item.languageInsensitive}
+          onKeyDown={handleExpandOnEnter}
         >
           {label}
         </MenuItemLink>
@@ -194,7 +204,6 @@ const MenuItemNestedWrapper = styled.div<{
   isExpanded?: boolean;
   depth?: number;
 }>`
-  overflow: hidden;
   order: 1;
   position: relative;
 

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
 `;