feat: Anchor add A11y focus adaptation (#1045)

* feat: add focus visible style to anchor

* feat: add focus visible style to anchor

packages/semi-foundation/anchor/anchor.scss

@@ -17,6 +17,8 @@ $module: #{$prefix}-anchor;
         left: $spacing-anchor_slide-left;
         top: $spacing-anchor_slide-top;
         height: 100%;
+        box-sizing: border-box;
+        padding: $width-anchor-outline 0;
 
         &-muted {
             display: none;
@@ -64,6 +66,11 @@ $module: #{$prefix}-anchor;
     &-link {
         padding-left: $spacing-anchor_link-paddingLeft;
 
+        &-wrapper {
+            padding-right: $width-anchor-outline;
+            margin: $width-anchor-outline 0;
+        }
+
         &-title {
             cursor: pointer;
             color: $color-anchor_title-text-default;
@@ -72,6 +79,7 @@ $module: #{$prefix}-anchor;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            border-radius: $width-anchor-outline_border_radius;
 
             &:hover {
                 color: $color-anchor_title-text-hover;
@@ -81,6 +89,10 @@ $module: #{$prefix}-anchor;
                 color: $color-anchor_title-text-active;
             }
 
+            &:focus-visible {
+                outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+            }
+
             &-disabled {
                 color: $color-anchor_title-text-disabled;
                 cursor: not-allowed;

packages/semi-foundation/anchor/variables.scss

@@ -9,6 +9,8 @@ $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜
 $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
 $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
 
+$color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
+
 // Spacing
 $spacing-anchor_slide-left: $spacing-none; // 滑轨左侧位置
 $spacing-anchor_slide-top: $spacing-none; // 滑轨顶部位置
@@ -24,4 +26,8 @@ $height-anchor_slide_default: 20px; // 选项高度 - 默认
 $height-anchor_slide_small: 16px; // 选项高度 - 小尺寸
 
 // Radius
-$radius-anchor_slide: 1px; // 滑轨圆角
+$radius-anchor_slide: 1px; // 滑轨圆角
+
+// Witdh
+$width-anchor-outline: 2px; // anchor轮廓宽度
+$width-anchor-outline_border_radius: 3px; // anchor轮廓圆角

packages/semi-ui/anchor/index.tsx

@@ -290,7 +290,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
                     <div aria-hidden className={slideCls} style={{ height: scrollHeight }}>
                         <span className={slideBarCls} style={{ top: slideBarTop }} />
                     </div>
-                    <div className={anchorWrapper}>{children}</div>
+                    <div className={anchorWrapper} role="list">{children}</div>
                 </div>
             </AnchorContext.Provider>
         );

packages/semi-ui/anchor/link.tsx

@@ -118,9 +118,9 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         const { activeLink, childMap } = this.context;
         const { href, children } = this.props;
         if (!this.context.autoCollapse) {
-            return this.props.children;
+            return <div role="list">{children}</div>;
         }
-        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? children : null;
+        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? <div role="list">{children}</div> : null;
     };
 
     render() {
@@ -134,7 +134,6 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         });
         const ariaProps = {
             'aria-disabled': disabled,
-            'aria-label': href,
         };
         if (active) {
             ariaProps['aria-details'] = 'active';
@@ -144,7 +143,7 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         }
 
         return (
-            <div className={linkCls} style={style}>
+            <div className={linkCls} style={style} role="listitem">
                 <div
                     role="link"
                     tabIndex={0}