(function Link(
const commonProps = {
title,
- children,
onClick,
onClickCapture: handleClickCapture,
onFocus,
@@ -75,7 +74,6 @@ export const Link = React.forwardRef
(function Link(
const relProp = target === '_blank' && !rel ? 'noopener noreferrer' : rel;
return (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
)}
{...commonProps}
@@ -83,7 +81,9 @@ export const Link = React.forwardRef(function Link(
href={href}
target={target}
rel={relProp}
- />
+ >
+ {children}
+
);
} else {
return (
@@ -91,9 +91,12 @@ export const Link = React.forwardRef(function Link(
{...(extraProps as React.HTMLAttributes)}
{...commonProps}
ref={ref as React.Ref}
+ // as this element has onClick handler
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
- />
+ >
+ {children}
+
);
}
});
diff --git a/src/components/PersonaWrap/PersonaWrap.scss b/src/components/PersonaWrap/PersonaWrap.scss
index f5779c6c04..1ccbafe1d3 100644
--- 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
index 2ef513156d..69ae4dada8 100644
--- 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 (
- {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-
+
{avatar && {avatar}
}
{children}
-
+
{onClose && (
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-
-
-
+
)}
);
diff --git a/src/components/index.ts b/src/components/index.ts
index e0691540f4..74083f4971 100644
--- 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';