@redocly/theme 0.55.0-next.4 → 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/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.4",
+  "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/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
 `;