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]>

Author: kmenshov

.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')}
                 />
             )}