feat: add alt for navigation logo, focusable props for dropdown and lnks (#977)

* feat: add default text for logo image

Add "alt" field for LogoProps and set
default value

* feat: make navigation items more accessible

Make navigation items focusable.

Add "aria-expanded" for drop-down list.
Change <span> to <button> because screen
reader doesn't read it with <span>.
Add additional CSS styles because <button>
has default styles.

* feat: add translation for Logo alt text

* fix: change typization in NavigationDropdown component

Change useRef type from HTMLElement to HTMLButtonElement.
Change "type" value to "button" because "type" field
from props conflicts with button "type" attribute.

* feat: add alt field for NavigationLogoData interface

Author: Pavel-Tyan

src/models/navigation.ts

@@ -83,6 +83,7 @@ export interface NavigationLogoData {
     text?: string;
     url?: string;
     urlTitle?: string;
+    alt?: string;
 }
 
 export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<NavigationLogoData>;

src/navigation/components/Logo/Logo.tsx

@@ -8,19 +8,24 @@ import {useTheme} from '../../../context/theme';
 import {ThemedNavigationLogoData} from '../../../models';
 import {block, getLinkProps, getThemedValue} from '../../../utils';
 
+import {i18n} from './i18n';
+
 import './Logo.scss';
 
 const b = block('logo');
 
 export type LogoProps = ThemedNavigationLogoData & {
     className?: string;
+    alt?: string;
 };
 
-const Logo: React.FC<LogoProps> = (props) => {
+const Logo: React.FC<LogoProps> = ({alt = i18n('image-alt'), ...restProps}) => {
+    const props: LogoProps = {...restProps, alt};
     const {hostname, Link} = useContext(LocationContext);
     const theme = useTheme();
     const themedLogoProps = getThemedValue(props, theme) || props;
     const imageData = getMediaImage(themedLogoProps.icon || props.icon);
+    imageData.alt = alt;
     const textData = themedLogoProps.text || props.text;
     const url = themedLogoProps.url || props.url || '/';
     const urlTitle = themedLogoProps.urlTitle || props.urlTitle || textData;

src/navigation/components/Logo/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Logo icon"
+}

src/navigation/components/Logo/i18n/index.ts

@@ -0,0 +1,8 @@
+import {addComponentKeysets} from '@gravity-ui/uikit/i18n';
+
+import {NAMESPACE} from '../../../../utils/cn';
+
+import en from './en.json';
+import ru from './ru.json';
+
+export const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}Logo`);

src/navigation/components/Logo/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Иконка лого"
+}

src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.scss

@@ -1,10 +1,20 @@
 @import '../../../../../../styles/variables';
+@import '../../../../../../styles/mixins';
 @import '../../mixins';
 
 $block: '.#{$ns}navigation-dropdown';
 
 #{$block} {
     @include navigation-item-display();
+    @include focusable();
+
+    display: flex;
+    align-items: center;
+    height: 100%;
+    background: inherit;
+    font: inherit;
+    color: var(--g-color-text-primary);
+    border: none;
 
     &__arrow {
         margin-left: 7px;

src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx

@@ -27,20 +27,30 @@ export const NavigationDropdown = ({
     ...props
 }: NavigationDropdownProps) => {
     const iconData = icon && getMediaImage(icon);
-    const anchorRef = useRef<HTMLElement>(null);
-
+    const anchorRef = useRef<HTMLButtonElement>(null);
     return (
         <Fragment>
-            <span ref={anchorRef} {...props} className={b(null, className)}>
-                <ContentWrapper text={text} icon={iconData} iconSize={iconSize} />
+            <button
+                ref={anchorRef}
+                {...props}
+                type="button"
+                className={b(null, className)}
+                aria-expanded={isActive}
+            >
+                <ContentWrapper
+                    text={text}
+                    icon={iconData}
+                    iconSize={iconSize}
+                    aria-expanded={isActive}
+                />
                 <ToggleArrow
                     className={b('arrow')}
                     size={TOGGLE_ARROW_SIZE}
                     type={'vertical'}
                     iconType="navigation"
                     open={isActive}
                 />
-            </span>
+            </button>
             <NavigationPopup
                 open={isActive}
                 onClose={hidePopup}

src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.scss

@@ -7,6 +7,7 @@ $block: '.#{$ns}navigation-link';
 #{$block} {
     @include navigation-item();
     @include navigation-item-display();
+    @include focusable();
 
     &__arrow {
         position: relative;