♿ Accessibility of Alert close button

replace the <span> with <button> and style it accordingly ant-design#18736
smwhr · Sep 12, 2019 · bf5140b · bf5140b
1 parent 265a01e
commit bf5140b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/components/alert/__tests__/__snapshots__/demo.test.js.snap b/components/alert/__tests__/__snapshots__/demo.test.js.snap
@@ -66,10 +66,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
     <span
       class="ant-alert-description"
     />
-    <span
+    <button
       class="ant-alert-close-icon"
-      role="button"
       tabindex="0"
+      type="button"
     >
       <i
         aria-label="icon: close"
@@ -90,7 +90,7 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
           />
         </svg>
       </i>
-    </span>
+    </button>
   </div>
   <br />
   <div
@@ -172,10 +172,10 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
     <span
       class="ant-alert-description"
     />
-    <span
+    <button
       class="ant-alert-close-icon"
-      role="button"
       tabindex="0"
+      type="button"
     >
       <i
         aria-label="icon: close"
@@ -196,7 +196,7 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
           />
         </svg>
       </i>
-    </span>
+    </button>
   </div>
   <div
     class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"
@@ -212,10 +212,10 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
     >
       Error Description Error Description Error Description Error Description Error Description Error Description
     </span>
-    <span
+    <button
       class="ant-alert-close-icon"
-      role="button"
       tabindex="0"
+      type="button"
     >
       <i
         aria-label="icon: close"
@@ -236,7 +236,7 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
           />
         </svg>
       </i>
-    </span>
+    </button>
   </div>
 </div>
 `;
@@ -254,17 +254,17 @@ exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
   <span
     class="ant-alert-description"
   />
-  <span
+  <button
     class="ant-alert-close-icon"
-    role="button"
     tabindex="0"
+    type="button"
   >
     <span
       class="ant-alert-close-text"
     >
       Close Now
     </span>
-  </span>
+  </button>
 </div>
 `;
 
@@ -910,10 +910,10 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
     <span
       class="ant-alert-description"
     />
-    <span
+    <button
       class="ant-alert-close-icon"
-      role="button"
       tabindex="0"
+      type="button"
     >
       <i
         aria-label="icon: close"
@@ -934,7 +934,7 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
           />
         </svg>
       </i>
-    </span>
+    </button>
   </div>
   <p>
     placeholder text here

diff --git a/components/alert/index.tsx b/components/alert/index.tsx
@@ -23,7 +23,7 @@ export interface AlertProps {
   /** Additional content of Alert */
   description?: React.ReactNode;
   /** Callback when close Alert */
-  onClose?: React.MouseEventHandler<HTMLAnchorElement>;
+  onClose?: React.MouseEventHandler<HTMLButtonElement>;
   /** Trigger when animation ending of Alert */
   afterClose?: () => void;
   /** Whether to show icon */
@@ -57,7 +57,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
     };
   }
 
-  handleClose = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     const dom = ReactDOM.findDOMNode(this) as HTMLElement;
     dom.style.height = `${dom.offsetHeight}px`;
@@ -143,8 +143,8 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
     );
 
     const closeIcon = closable ? (
-      <span
-        role="button"
+      <button
+        type="button"
         onClick={this.handleClose}
         className={`${prefixCls}-close-icon`}
         tabIndex={0}
@@ -154,7 +154,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
         ) : (
           <Icon type="close" />
         )}
-      </span>
+      </button>
     ) : null;
 
     const dataOrAriaProps = getDataOrAriaProps(this.props);

diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -74,8 +74,15 @@
     overflow: hidden;
     font-size: @font-size-sm;
     line-height: 22px;
+    border: none;
+    background-color: transparent;
     cursor: pointer;
 
+    &:focus {
+      outline-style: dotted;
+      outline-width: thin;
+    }
+
     .@{iconfont-css-prefix}-close {
       color: @alert-close-color;
       transition: color 0.3s;