feat(AsideHeader, Logo)!: make actions accessible with keyboard (#305)

* test: playwright cache (#312)

* feat(AsideHeader, Logo)!: make actions accessible with keyboard

---------

Co-authored-by: Egor Mostovoy <[email protected]>

.gitignore

@@ -13,8 +13,8 @@ build
 pnpm-lock.yaml
 
 #Playwright
-/playwright/playwright/.cache
-/playwright-report
+.cache*
+playwright-report*
 /test-results
 
 # other files

package.json

@@ -33,6 +33,7 @@
     "playwright:install": "playwright install --with-deps",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
+    "playwright:clear-cache": "rm -rf ./playwright/.cache",
     "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
     "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
     "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache"

playwright/README.md

@@ -118,6 +118,7 @@
 - `npm run playwright:install` - install playwright browsers and dependencies
 - `npm run playwright` - run tests
 - `npm run playwright:update` - update screenshots
+- `npm run playwright:clear-cache` - clear cache vite
 - `npm run playwright:docker` - run tests using docker
 - `npm run playwright:docker:update` - update screenshots using docker
-- `npm run playwright:docker:clear-cache` - clear node_modules cache for docker container
+- `npm run playwright:docker:clear-cache` - clear node_modules cache for docker container and clear cache vite

playwright/playwright.config.ts

@@ -17,7 +17,10 @@ reporter.push(
         'html',
         {
             open: process.env.CI ? 'never' : 'on-failure',
-            outputFolder: resolve(process.cwd(), 'playwright-report'),
+            outputFolder: resolve(
+                process.cwd(),
+                process.env.IS_DOCKER ? 'playwright-report-docker' : 'playwright-report',
+            ),
         },
     ],
 );
@@ -53,6 +56,7 @@ const config: PlaywrightTestConfig = {
         /* Port to use for Playwright component endpoint. */
         screenshot: 'only-on-failure',
         timezoneId: 'UTC',
+        ctCacheDir: process.env.IS_DOCKER ? '.cache-docker' : '.cache',
         ctViteConfig: {
             //@ts-ignore
             plugins: [

scripts/playwright-docker.sh

@@ -15,6 +15,7 @@ run_command() {
     $CONTAINER_TOOL run --rm --network host -it -w /work \
         -v $(pwd):/work \
         -v "$NODE_MODULES_CACHE_DIR:/work/node_modules" \
+        -e IS_DOCKER=1 \
         "$IMAGE_NAME:$IMAGE_TAG" \
         /bin/bash -c "$1"
 }
@@ -30,6 +31,7 @@ fi
 
 if [[ "$1" = "clear-cache" ]]; then
     rm -rf "$NODE_MODULES_CACHE_DIR"
+    rm -rf "./playwright/.cache-docker"
     exit 0
 fi
 

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.scss

@@ -1,6 +1,9 @@
 @use '../../variables';
+@use '../../../../styles/mixins';
 
 .#{variables.$ns}all-pages-list-item {
+    @include mixins.accessibility-button;
+
     display: flex;
     align-items: center;
 
@@ -11,6 +14,7 @@
 
     &__text {
         flex: 1;
+        text-align: initial;
     }
 
     &__icon {

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx

@@ -27,14 +27,17 @@ export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
         [onToggle],
     );
 
-    const onItemClick = (e: MouseEvent<HTMLDivElement>) => {
+    const onItemClick = (e: MouseEvent<HTMLElement>) => {
         if (editMode) {
             e.stopPropagation();
             e.preventDefault();
         }
     };
+
+    const [Tag, tagProps] = item.link ? ['a' as const, {href: item.link}] : ['button' as const, {}];
+
     return (
-        <div className={b()} onClick={onItemClick}>
+        <Tag {...tagProps} className={b()} onClick={onItemClick}>
             {item.icon ? (
                 <Icon className={b('icon')} data={item.icon} size={item.iconSize} />
             ) : null}
@@ -47,6 +50,6 @@ export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
                     <Button.Icon>{item.hidden ? <Pin /> : <PinFill />}</Button.Icon>
                 </Button>
             )}
-        </div>
+        </Tag>
     );
 };

src/components/AsideHeader/AsideHeader.scss

@@ -182,20 +182,14 @@ $block: '.#{variables.$ns}aside-header';
         }
     }
 
-    &__logo-button-wrapper {
+    &__logo-button &__logo-icon-place {
+        height: var(
+            --gn-aside-header-item-icon-background-size,
+            var(--_--item-icon-background-size)
+        );
         width: var(--gn-aside-header-min-width);
     }
 
-    &__logo-button[class] {
-        &,
-        .g-button__icon {
-            height: var(
-                --gn-aside-header-item-icon-background-size,
-                var(--_--item-icon-background-size)
-            );
-        }
-    }
-
     &__menu-items {
         flex-grow: 1;
     }

src/components/AsideHeader/AsideHeaderContext.ts

@@ -10,7 +10,7 @@ export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {
     onItemClick: (
         item: MenuItem,
         collapsed: boolean,
-        event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        event: React.MouseEvent<HTMLElement, MouseEvent>,
     ) => void;
 }
 

src/components/AsideHeader/components/Header.tsx

@@ -33,8 +33,8 @@ export const Header = () => {
                     {...logo}
                     onClick={onLogoClick}
                     compact={compact}
-                    buttonWrapperClassName={b('logo-button-wrapper')}
                     buttonClassName={b('logo-button')}
+                    iconPlaceClassName={b('logo-icon-place')}
                 />
             )}
 

src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx

@@ -33,11 +33,7 @@ export const useAsideHeaderInnerContextValue = (
     }, [onClosePanel]);
 
     const onItemClick = useCallback(
-        (
-            item: MenuItem,
-            collapsed: boolean,
-            event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-        ) => {
+        (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => {
             if (item.id === ALL_PAGES_MENU_ITEM.id) {
                 onClosePanel?.();
                 setInnerVisiblePanel((prev) =>

src/components/CompositeBar/CompositeBar.tsx

@@ -35,7 +35,7 @@ export type CompositeBarProps = CompositeBarItems & {
     onItemClick?: (
         item: MenuItem,
         collapsed: boolean,
-        event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        event: React.MouseEvent<HTMLElement, MouseEvent>,
     ) => void;
     multipleTooltip?: boolean;
     menuMoreTitle?: string;

src/components/CompositeBar/HighlightedItem/HighlightedItem.tsx

@@ -13,7 +13,7 @@ const b = block('composite-bar-highlighted-item');
 interface ItemInnerProps {
     iconRef: React.RefObject<HTMLDivElement>;
     iconNode: React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     onClickCapture?: (event: React.SyntheticEvent) => void;
 }
 

src/components/CompositeBar/Item/Item.scss

@@ -1,8 +1,11 @@
 @use '../../variables';
+@use '../../../../styles/mixins';
 
 $block: '.#{variables.$ns}composite-bar-item';
 
 #{$block} {
+    @include mixins.accessibility-button;
+
     $class: &;
     --gn-composite-bar-item-action-size: 36px;
 
@@ -24,6 +27,7 @@ $block: '.#{variables.$ns}composite-bar-item';
     height: 100%;
     align-items: center;
     cursor: pointer;
+    padding: 0;
 
     &__icon {
         color: var(--gn-aside-header-item-icon-color, var(--_--item-icon-color));
@@ -94,6 +98,8 @@ $block: '.#{variables.$ns}composite-bar-item';
     }
 
     &__collapse-item {
+        @include mixins.accessibility-button;
+
         --_--item-icon-color: var(--g-color-text-misc);
 
         display: flex;

src/components/CompositeBar/Item/Item.tsx

@@ -36,7 +36,7 @@ export interface ItemProps extends ItemPopup {
     onItemClick?: (
         item: MenuItem,
         collapsed: boolean,
-        event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        event: React.MouseEvent<HTMLElement, MouseEvent>,
     ) => void;
     onItemClickCapture?: (event: React.SyntheticEvent) => void;
     bringForward?: boolean;
@@ -92,7 +92,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
 
     const [open, toggleOpen] = React.useState<boolean>(false);
 
-    const ref = React.useRef<HTMLDivElement>(null);
+    const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);
     const anchorRef = popupAnchor || ref;
     const highlightedRef = React.useRef<HTMLDivElement>(null);
 
@@ -158,13 +158,18 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
     };
 
     const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {
+        const [Tag, tagProps] = item.link
+            ? ['a' as const, {href: item.link}]
+            : ['button' as const, {}];
+
         const createdNode = (
             <React.Fragment>
-                <div
+                <Tag
+                    {...tagProps}
                     className={b({type, current, compact}, className)}
                     ref={ref}
                     data-qa={item.qa}
-                    onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
                         if (collapsedItem) {
                             /**
                              * If we call onItemClick for collapsedItem then:
@@ -198,7 +203,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
                     >
                         {titleEl}
                     </div>
-                </div>
+                </Tag>
                 {renderPopupContent && Boolean(anchorRef?.current) && (
                     <Popup
                         contentClassName={b('popup', popupContentClassName)}
@@ -216,13 +221,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
             </React.Fragment>
         );
 
-        return item.link ? (
-            <a href={item.link} className={b('link')}>
-                {createdNode}
-            </a>
-        ) : (
-            createdNode
-        );
+        return createdNode;
     };
 
     const iconNode = icon ? (
@@ -255,7 +254,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
                 <HighlightedItem
                     iconNode={highlightedNode}
                     iconRef={highlightedRef}
-                    onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) =>
                         onItemClick?.(item, false, event)
                     }
                     onClickCapture={onItemClickCapture}
@@ -301,26 +300,21 @@ function CollapsedPopup({
                             title: titleEl,
                             icon: iconEl,
                         }: MakeItemParams) => {
-                            const res = (
-                                <div
+                            const [Tag, tagProps] = collapseItem.link
+                                ? ['a' as const, {href: collapseItem.link}]
+                                : ['button' as const, {}];
+
+                            return (
+                                <Tag
+                                    {...tagProps}
                                     className={b('collapse-item')}
-                                    onClick={(
-                                        event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-                                    ) => {
+                                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
                                         onItemClick?.(collapseItem, true, event);
                                     }}
                                 >
                                     {iconEl}
                                     {titleEl}
-                                </div>
-                            );
-
-                            return collapseItem.link ? (
-                                <a href={collapseItem.link} className={b('link')}>
-                                    {res}
-                                </a>
-                            ) : (
-                                res
+                                </Tag>
                             );
                         };
 

src/components/Logo/Logo.scss

@@ -7,28 +7,14 @@ $block: '.#{variables.$ns}logo';
 #{$block} {
     display: flex;
     align-items: center;
-    flex-shrink: 0;
     height: 40px;
 
-    &__logo-btn-place {
-        flex-shrink: 0;
+    &__btn-logo {
         display: flex;
         align-items: center;
+        flex-shrink: 0;
         justify-content: center;
-        cursor: pointer;
-
-        & .g-button::before {
-            background-color: transparent;
-        }
-    }
-
-    &__logo {
-        @include text-body-2;
-        vertical-align: middle;
-        cursor: pointer;
-    }
 
-    &__logo-link {
         &,
         &:hover,
         &:active,
@@ -38,9 +24,17 @@ $block: '.#{variables.$ns}logo';
             outline: none;
             color: inherit;
         }
+        &:focus-visible {
+            outline: solid var(--g-color-line-misc);
+            outline-offset: -2px;
+        }
     }
 
-    .g-root &__btn-logo.button2_theme_flat.button2_hovered_yes::before {
-        background-color: transparent;
+    &__logo-icon-place {
+        width: 36px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 }