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

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.23.1](https://github.com/gravity-ui/navigation/compare/v2.23.0...v2.23.1) (2024-09-10)
+
+
+### Bug Fixes
+
+* **Logo:** fix condition display logo ([#306](https://github.com/gravity-ui/navigation/issues/306)) ([38f234a](https://github.com/gravity-ui/navigation/commit/38f234a98f2d526e04f1d85ad6907e015cd81315))
+
 ## [2.23.0](https://github.com/gravity-ui/navigation/compare/v2.22.0...v2.23.0) (2024-08-30)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/navigation",
-  "version": "2.23.0",
+  "version": "2.23.1",
   "description": "Gravity UI Navigation components",
   "license": "MIT",
   "repository": {

scripts/playwright-docker.sh

@@ -7,20 +7,34 @@ IMAGE_TAG="v1.45.3-jammy" # This version have to be synchronized with playwright
 
 NODE_MODULES_CACHE_DIR="$HOME/.cache/navigation-playwright-docker-node-modules"
 
+command_exists() {
+  command -v "$1" >/dev/null 2>&1
+}
+
 run_command() {
-    docker run --rm --network host -it -w /work \
+    $CONTAINER_TOOL run --rm --network host -it -w /work \
         -v $(pwd):/work \
         -v "$NODE_MODULES_CACHE_DIR:/work/node_modules" \
         "$IMAGE_NAME:$IMAGE_TAG" \
         /bin/bash -c "$1"
 }
 
+if command_exists docker; then
+  CONTAINER_TOOL="docker"
+elif command_exists podman; then
+  CONTAINER_TOOL="podman"
+else
+  echo "Neither Docker nor Podman is installed on the system."
+  exit 1
+fi
+
 if [[ "$1" = "clear-cache" ]]; then
     rm -rf "$NODE_MODULES_CACHE_DIR"
     exit 0
 fi
 
 if [[ ! -d "$NODE_MODULES_CACHE_DIR" ]]; then
+    mkdir -p "$NODE_MODULES_CACHE_DIR"
     run_command 'npm ci'
 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/FirstPanel.tsx

@@ -25,7 +25,6 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
         customBackgroundClassName,
         className,
         hideCollapseButton,
-        logo,
         qa,
     } = useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems();
@@ -47,8 +46,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
                             {customBackground}
                         </div>
                     )}
-                    {/* TODO add new prop for hiding Header */}
-                    {logo && <Header />}
+                    <Header />
                     {visibleMenuItems?.length ? (
                         <CompositeBar
                             type="menu"

src/components/AsideHeader/components/Header.tsx

@@ -26,19 +26,17 @@ export const Header = () => {
         [onClosePanel, logo],
     );
 
-    if (!logo) {
-        return null;
-    }
-
     return (
         <div className={b('header', {['with-decoration']: headerDecoration})}>
-            <Logo
-                {...logo}
-                onClick={onLogoClick}
-                compact={compact}
-                buttonWrapperClassName={b('logo-button-wrapper')}
-                buttonClassName={b('logo-button')}
-            />
+            {logo && (
+                <Logo
+                    {...logo}
+                    onClick={onLogoClick}
+                    compact={compact}
+                    buttonClassName={b('logo-button')}
+                    iconPlaceClassName={b('logo-icon-place')}
+                />
+            )}
 
             <CompositeBar
                 type="subheader"

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>
                             );
                         };