diff --git a/package-lock.json b/package-lock.json index 16674376..243cf45c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,11 +33,11 @@ "@commitlint/config-conventional": "^17.4.3", "@doc-tools/transform": "^3.3.2", "@gravity-ui/eslint-config": "^2.0.0", - "@gravity-ui/page-constructor": "^4.20.2", + "@gravity-ui/page-constructor": "^4.26.0", "@gravity-ui/prettier-config": "^1.0.1", "@gravity-ui/stylelint-config": "^1.0.0", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^5.11.0", + "@gravity-ui/uikit": "^5.12.0", "@storybook/addon-essentials": "^7.0.27", "@storybook/cli": "^7.0.27", "@storybook/preset-scss": "^1.0.3", @@ -85,8 +85,8 @@ }, "peerDependencies": { "@doc-tools/transform": "^3.3.2", - "@gravity-ui/page-constructor": "^4.0.0", - "@gravity-ui/uikit": "^5.1.0", + "@gravity-ui/page-constructor": "^4.26.0", + "@gravity-ui/uikit": "^5.12.0", "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, @@ -3285,9 +3285,9 @@ "integrity": "sha512-JyCXGDiLY7XL1feoP0vPyqWUmIp3v2/k6bn1W9mY6ZQSBV271KVrnc9Wdwoh/hcMd/S2OxlRrMlch3DD+k8dLg==" }, "node_modules/@gravity-ui/page-constructor": { - "version": "4.20.2", - "resolved": "https://registry.npmjs.org/@gravity-ui/page-constructor/-/page-constructor-4.20.2.tgz", - "integrity": "sha512-i/4myIBvy1Msqa1qtXBntQd/cpk94P/4ZUzYXwmkqn1RFZmW3TgBnolBD8xa9SzBZG8NE5TrTxA3L3mEOEAsNw==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/page-constructor/-/page-constructor-4.26.0.tgz", + "integrity": "sha512-Hh3k0tQ5vp7Amz30+3+zAisnK5IfaHsRnl5xqnws8IK5A+2BnzeGAjZF6RZB8QT+un6lb8tAHK4OmmTu0RUbDg==", "dev": true, "dependencies": { "@bem-react/classname": "^1.6.0", @@ -3314,7 +3314,7 @@ }, "peerDependencies": { "@doc-tools/transform": "^3.3.2", - "@gravity-ui/uikit": "^5.4.1", + "@gravity-ui/uikit": "^5.12.0", "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, @@ -3470,9 +3470,9 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "5.11.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.11.0.tgz", - "integrity": "sha512-HeL7wy5sUt7QGXthVCoBojAPwsRy5PkKmLlIN+nAfJL8UnUBZGavXEmub4zNC0dYoytRoKl7UyYl8Q04kvH9+A==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.12.0.tgz", + "integrity": "sha512-GxQDpI5V9hODLCsqUbmGPUb9NcldDn5jxA8wFmGonJuDlvEsHmulZm9wRHzfBe4SUmwjpbmJrXfhJNzp946rOA==", "dev": true, "dependencies": { "@bem-react/classname": "^1.6.0", @@ -21825,9 +21825,9 @@ } }, "node_modules/react-spring": { - "version": "9.7.2", - "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.2.tgz", - "integrity": "sha512-cckALtj79yiaJiAOUNAhtZbdqjvv1bdn/FpobgkckIChc8l6vu0E53WQ+zWru60gINI3JT+oRJSIn2hUVlOvlQ==", + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.3.tgz", + "integrity": "sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==", "dependencies": { "@react-spring/core": "~9.7.3", "@react-spring/konva": "~9.7.3", diff --git a/package.json b/package.json index a2c73388..7e95e0a6 100644 --- a/package.json +++ b/package.json @@ -78,8 +78,8 @@ }, "peerDependencies": { "@doc-tools/transform": "^3.3.2", - "@gravity-ui/page-constructor": "^4.0.0", - "@gravity-ui/uikit": "^5.1.0", + "@gravity-ui/page-constructor": "^4.26.0", + "@gravity-ui/uikit": "^5.12.0", "react": "^16.0.0 || ^17.0.0 || ^18.0.0" }, "devDependencies": { @@ -89,11 +89,11 @@ "@commitlint/config-conventional": "^17.4.3", "@doc-tools/transform": "^3.3.2", "@gravity-ui/eslint-config": "^2.0.0", - "@gravity-ui/page-constructor": "^4.20.2", + "@gravity-ui/page-constructor": "^4.26.0", "@gravity-ui/prettier-config": "^1.0.1", "@gravity-ui/stylelint-config": "^1.0.0", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^5.11.0", + "@gravity-ui/uikit": "^5.12.0", "@storybook/addon-essentials": "^7.0.27", "@storybook/cli": "^7.0.27", "@storybook/preset-scss": "^1.0.3", diff --git a/src/components/FeedHeader/components/Controls/customRenders.tsx b/src/components/FeedHeader/components/Controls/customRenders.tsx index 7cf2cf98..cd7a72a9 100644 --- a/src/components/FeedHeader/components/Controls/customRenders.tsx +++ b/src/components/FeedHeader/components/Controls/customRenders.tsx @@ -27,7 +27,7 @@ type RenderSwitcherType = ({ export const renderSwitcher: RenderSwitcherType = ({initial, list, defaultLabel}) => // eslint-disable-next-line react/display-name - ({onClick, ref}) => + ({onClick, ref, onKeyDown, open}) => ( ); diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss index fbe133b9..4e8895a5 100644 --- a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss +++ b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss @@ -8,6 +8,7 @@ $block: '.#{$namespace}feed-custom-switcher'; &__custom-switcher { @include text-size(body-2); + @include focusable(); position: relative; display: flex; @@ -18,6 +19,10 @@ $block: '.#{$namespace}feed-custom-switcher'; border-radius: var(--g-border-radius-xl); width: 100%; line-height: 42px; + text-align: initial; + font-family: inherit; + padding: 0; + margin: 0; // TODO delete this section after Select can customize the popup list & + .yc-popup.yc-popup_open { diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx index 331a14e0..7ac71087 100644 --- a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx +++ b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx @@ -27,6 +27,8 @@ export const CustomSwitcher = ({ list, onClick, controlRef, + onKeyDown, + open, }: CustomSwitcherProps) => { const itemsNames = useMemo(() => { const items = list @@ -38,10 +40,12 @@ export const CustomSwitcher = ({ const hasCounter = itemsNames.length > 1; return ( -
} + ref={controlRef as LegacyRef} + onKeyDown={onKeyDown} + aria-expanded={open} >
{itemsNames?.join(', ')} @@ -54,6 +58,6 @@ export const CustomSwitcher = ({
-
+ ); }; diff --git a/styles/yfm.scss b/styles/yfm.scss index d823b2a4..133d54fe 100644 --- a/styles/yfm.scss +++ b/styles/yfm.scss @@ -98,10 +98,17 @@ a { color: var(--g-color-text-link); + border-radius: var(--g-focus-border-radius); &:hover { color: var(--g-color-text-link-hover); } + + @include focusable(0, 'box-shadow'); + + &:focus { + outline: 0; + } } .yfm-tab {