فهرست منبع

feat(a11y): banner Icon aria hide (#803)

feat(a11y): banner Icon label change
YannLynn 3 سال پیش
والد
کامیت
4f660dac98
2فایلهای تغییر یافته به همراه67 افزوده شده و 6 حذف شده
  1. 62 1
      packages/semi-ui/banner/_story/banner.stories.js
  2. 5 5
      packages/semi-ui/banner/index.tsx

+ 62 - 1
packages/semi-ui/banner/_story/banner.stories.js

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import Banner from '../index';
 import Button from '@douyinfe/semi-ui/button/index';
+import { Layout } from '@douyinfe/semi-ui';
+
 
 export default {
   title: 'Banner',
@@ -43,3 +45,62 @@ export const InContainerAndBordered = () => (
     <Button onClick={e => e.stopPropagation()}>test</Button>
   </Banner>
 );
+
+export const ShowAndHideBanner = () => {
+    const [visible, setVisible] = useState(false);
+    const changeVisible = () => {
+        setVisible(!visible);
+    };
+    const { Header, Footer, Content } = Layout;
+    const banner = (
+        <Banner 
+            onClose={changeVisible}
+            description="A pre-released version is available"
+        />
+    );
+
+    return (
+        <>
+            <Layout>
+                <Header>Header</Header>
+                {visible? banner : null}
+                <Content>Content</Content>
+                <Footer>Footer</Footer>
+            </Layout>
+            <Button
+                onClick={changeVisible}
+                style={{
+                    display: 'block',
+                    width: '120px',
+                    margin: '0 auto'
+                }}
+            >
+                { visible ? 'Hide Banner' : 'Show Banner' }
+            </Button>
+        </>
+    );
+};
+
+export const MultiTypeBanner = () => (
+    <>
+        <Banner 
+            type="info"
+            description="A pre-released version is available."
+        />
+        <br/>
+        <Banner 
+            type="warning"
+            description="This version of the document is going to expire after 4 days."
+        />
+        <br/>
+        <Banner 
+            type="danger"
+            description="This document was deprecated since Jan 1, 2019."
+        />
+        <br/>
+        <Banner 
+            type="success"
+            description="You are viewing the latest version of this document."
+        />
+    </>
+);

+ 5 - 5
packages/semi-ui/banner/index.tsx

@@ -109,7 +109,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
             <Button
                 className={`${prefixCls}-close`}
                 onClick={this.remove}
-                icon={closeIcon || <IconClose />}
+                icon={closeIcon || <IconClose aria-hidden={true}/>}
                 theme="borderless"
                 size="small"
                 type="tertiary"
@@ -122,10 +122,10 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
     renderIcon() {
         const { type, icon } = this.props;
         const iconMap = {
-            warning: <IconAlertTriangle size="large" />,
-            success: <IconTickCircle size="large" />,
-            info: <IconInfoCircle size="large" />,
-            danger: <IconAlertCircle size="large" />
+            warning: <IconAlertTriangle size="large" aria-label='warning'/>,
+            success: <IconTickCircle size="large" aria-label='success'/>,
+            info: <IconInfoCircle size="large" aria-label='info'/>,
+            danger: <IconAlertCircle size="large" aria-label='danger'/>
         };
         let iconType: React.ReactNode = iconMap[type];
         const iconCls = cls({