Merge pull request ant-design#5597 from kenaniah/accessibility

Improves link + button focusing
mitchelldemler · Apr 5, 2017 · accb6cb · accb6cb
2 parents c5059e5 + ed434c5
commit accb6cb
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 5 deletions.
diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import { findDOMNode } from 'react-dom';
 import Icon from '../icon';
 import omit from 'omit.js';
 
@@ -119,7 +118,6 @@ export default class Button extends React.Component<ButtonProps, any> {
 
   // Handle auto focus when click button in Chrome
   handleMouseUp = (e) => {
-    (findDOMNode(this) as HTMLElement).blur();
     if (this.props.onMouseUp) {
       this.props.onMouseUp(e);
     }

diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md
@@ -51,11 +51,11 @@ class NormalLoginForm extends React.Component {
           })(
             <Checkbox>Remember me</Checkbox>
           )}
-          <a className="login-form-forgot">Forgot password</a>
+          <a className="login-form-forgot" href="">Forgot password</a>
           <Button type="primary" htmlType="submit" className="login-form-button">
             Log in
           </Button>
-          Or <a>register now!</a>
+          Or <a href="">register now!</a>
         </FormItem>
       </Form>
     );

diff --git a/components/form/demo/register.md b/components/form/demo/register.md
@@ -212,7 +212,7 @@ class RegistrationForm extends React.Component {
           {getFieldDecorator('agreement', {
             valuePropName: 'checked',
           })(
-            <Checkbox>I have read the <a>agreement</a></Checkbox>
+            <Checkbox>I have read the <a href="">agreement</a></Checkbox>
           )}
         </FormItem>
         <FormItem {...tailFormItemLayout}>

diff --git a/components/style/core/base.less b/components/style/core/base.less
@@ -61,6 +61,10 @@ a {
   cursor: pointer;
   transition: color .3s ease;
 
+  &:focus {
+    text-decoration: underline;
+  }
+
   &:hover {
     color: @link-hover-color;
   }

diff --git a/site/theme/static/common.less b/site/theme/static/common.less
@@ -20,6 +20,9 @@ body {
 
 a {
   transition: color .3s ease;
+  &:focus {
+    text-decoration: underline;
+  }
 }
 
 .main-wrapper {