feat: improving a11y (#1070)

Co-authored-by: kkmch <[email protected]>
gravity-ui · Oct 30, 2023 · 146ff4f · 146ff4f
1 parent 3b07947
commit 146ff4f
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 11 deletions.
diff --git a/src/components/Dialog/ButtonClose/ButtonClose.tsx b/src/components/Dialog/ButtonClose/ButtonClose.tsx
@@ -5,6 +5,7 @@ import {Xmark} from '@gravity-ui/icons';
 import {Button} from '../../Button';
 import {Icon} from '../../Icon';
 import {block} from '../../utils/cn';
+import i18n from '../i18n';
 
 import './ButtonClose.scss';
 
@@ -25,6 +26,9 @@ export function ButtonClose({onClose}: ButtonCloseProps) {
                 size="l"
                 className={b('btn')}
                 onClick={(event) => onClose(event, {isOutsideClick: false})}
+                extraProps={{
+                    'aria-label': i18n('close'),
+                }}
             >
                 <Icon data={Xmark} size={20} />
             </Button>

diff --git a/src/components/Dialog/i18n/en.json b/src/components/Dialog/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "close": "Close dialog"
+}
diff --git a/src/components/Dialog/i18n/index.ts b/src/components/Dialog/i18n/index.ts
@@ -0,0 +1,8 @@
+import {addComponentKeysets} from '../../utils/addComponentKeysets';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'Dialog';
+
+export default addComponentKeysets({en, ru}, COMPONENT);
diff --git a/src/components/Dialog/i18n/ru.json b/src/components/Dialog/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "close": "Закрыть диалоговое окно"
+}
diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -137,6 +137,7 @@ const DropdownMenu = <T,>({
 
     return (
         <DropdownMenuContext.Provider value={contextValue}>
+            {/*as this div has Button component as child, clicking on it one fires onClick of this div on bubbling*/}
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div
                 ref={anchorRef}

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -60,7 +60,6 @@ export const Link = React.forwardRef<HTMLElement, LinkProps>(function Link(
 
     const commonProps = {
         title,
-        children,
         onClick,
         onClickCapture: handleClickCapture,
         onFocus,
@@ -75,25 +74,29 @@ export const Link = React.forwardRef<HTMLElement, LinkProps>(function Link(
         const relProp = target === '_blank' && !rel ? 'noopener noreferrer' : rel;
 
         return (
-            // eslint-disable-next-line jsx-a11y/anchor-has-content
             <a
                 {...(extraProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
                 {...commonProps}
                 ref={ref as React.Ref<HTMLAnchorElement>}
                 href={href}
                 target={target}
                 rel={relProp}
-            />
+            >
+                {children}
+            </a>
         );
     } else {
         return (
             <span
                 {...(extraProps as React.HTMLAttributes<HTMLSpanElement>)}
                 {...commonProps}
                 ref={ref as React.Ref<HTMLSpanElement>}
+                // as this element has onClick handler
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                 tabIndex={0}
-            />
+            >
+                {children}
+            </span>
         );
     }
 });
diff --git a/src/components/PersonaWrap/PersonaWrap.scss b/src/components/PersonaWrap/PersonaWrap.scss
@@ -57,14 +57,27 @@ $block: '.#{variables.$ns}persona';
     }
 
     &__main {
+        @include mixins.button-reset();
+
         height: $avatarSize;
         display: inline-flex;
         align-items: center;
         padding-right: 6px;
+        border-radius: inherit;
 
         #{$block}_closeable & {
             padding-right: 0;
         }
+        #{$block}_clickable & {
+            outline-offset: -1px;
+
+            &:focus {
+                outline: 2px solid var(--g-color-line-focus);
+            }
+            &:focus:not(:focus-visible) {
+                outline: 0;
+            }
+        }
     }
 
     &__avatar {
@@ -120,6 +133,8 @@ $block: '.#{variables.$ns}persona';
     }
 
     &__close {
+        @include mixins.button-reset();
+
         height: $avatarSize;
         width: 16px;
         display: inline-flex;
@@ -128,6 +143,7 @@ $block: '.#{variables.$ns}persona';
         cursor: pointer;
         padding-right: 6px;
         color: var(--g-color-text-secondary);
+        box-sizing: initial;
 
         transition-property: color;
         transition-duration: $transitionDuration;
@@ -137,4 +153,15 @@ $block: '.#{variables.$ns}persona';
             color: var(--g-color-text-primary);
         }
     }
+
+    &__close-icon {
+        border-radius: var(--g-focus-border-radius);
+
+        #{$block}__close:focus & {
+            outline: 2px solid var(--g-color-line-focus);
+        }
+        #{$block}__close:focus:not(:focus-visible) & {
+            outline: 0;
+        }
+    }
 }
diff --git a/src/components/PersonaWrap/PersonaWrap.tsx b/src/components/PersonaWrap/PersonaWrap.tsx
@@ -36,21 +36,21 @@ export function PersonaWrap({
 }: PersonaWrapProps) {
     const clickable = Boolean(onClick);
     const closeable = Boolean(onClose);
+    const MainComponent = clickable ? 'button' : 'div';
+
     return (
         <div
             className={b({size, theme, clickable, closeable, empty: isEmpty}, className)}
             style={style}
         >
-            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-            <div className={b('main')} onClick={onClick}>
+            <MainComponent onClick={onClick} className={b('main')}>
                 {avatar && <div className={b('avatar')}>{avatar}</div>}
                 <div className={b('text')}>{children}</div>
-            </div>
+            </MainComponent>
             {onClose && (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-                <div className={b('close')} onClick={onClose} {...closeButtonAriaAttributes}>
-                    <Icon data={Xmark} size={12} />
-                </div>
+                <button className={b('close')} onClick={onClose} {...closeButtonAriaAttributes}>
+                    <Icon data={Xmark} size={12} className={b('close-icon')} />
+                </button>
             )}
         </div>
     );

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -56,3 +56,4 @@ export {Lang, configure} from './utils/configure';
 export {useOnFocusOutside} from './utils/useOnFocusOutside';
 export * from './utils/interactions';
 export * from './utils/xpath';
+export {getUniqId} from './utils/common';