Skip to content

Commit 9c09e2a

Browse files
mtscout6mtscout6
committed
[fixed] Keyboard accessibility for anchors serving as buttons
Bootstrap uses a lot of styling that is specifically targeting anchor tags that may also serve in the capacity as a button. Unfortunately since Bootstrap does not style said buttons we have to use an anchor tag instead. But in order to maintain keyboard functionality for accessibility concerns even those anchor tags must provide an href. The solution is to add an internal `SafeAnchor` component which ensures that something exists for the href attribute, and calls `event.preventDefault()` when the anchor is clicked. It will then continue to invoke any additional `onClick` handler provided.
1 parent e54fcd8 commit 9c09e2a

11 files changed

+157
-35
lines changed

‎src/ListGroupItem.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { cloneElement } from 'react';
22
import BootstrapMixin from './BootstrapMixin';
33
import classNames from 'classnames';
4-
4+
import SafeAnchor from './SafeAnchor';
55

66
const ListGroupItem = React.createClass({
77
mixins: [BootstrapMixin],
@@ -51,12 +51,12 @@ const ListGroupItem = React.createClass({
5151

5252
renderAnchor(classes) {
5353
return (
54-
<a
54+
<SafeAnchor
5555
{...this.props}
5656
className={classNames(this.props.className, classes)}
5757
>
5858
{this.props.header ? this.renderStructuredContent() : this.props.children}
59-
</a>
59+
</SafeAnchor>
6060
);
6161
},
6262

‎src/MenuItem.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import classNames from 'classnames';
3+
import SafeAnchor from './SafeAnchor';
34

45
const MenuItem = React.createClass({
56
propTypes: {
@@ -15,7 +16,6 @@ const MenuItem = React.createClass({
1516

1617
getDefaultProps() {
1718
return {
18-
href: '#',
1919
active: false
2020
};
2121
},
@@ -29,9 +29,9 @@ const MenuItem = React.createClass({
2929

3030
renderAnchor() {
3131
return (
32-
<a onClick={this.handleClick} href={this.props.href} target={this.props.target} title={this.props.title} tabIndex="-1">
32+
<SafeAnchor onClick={this.handleClick} href={this.props.href} target={this.props.target} title={this.props.title} tabIndex="-1">
3333
{this.props.children}
34-
</a>
34+
</SafeAnchor>
3535
);
3636
},
3737

‎src/NavItem.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import classNames from 'classnames';
33
import BootstrapMixin from './BootstrapMixin';
4+
import SafeAnchor from './SafeAnchor';
45

56
const NavItem = React.createClass({
67
mixins: [BootstrapMixin],
@@ -15,12 +16,6 @@ const NavItem = React.createClass({
1516
target: React.PropTypes.string
1617
},
1718

18-
getDefaultProps() {
19-
return {
20-
href: '#'
21-
};
22-
},
23-
2419
render() {
2520
let {
2621
disabled,
@@ -38,8 +33,7 @@ const NavItem = React.createClass({
3833
href,
3934
title,
4035
target,
41-
onClick: this.handleClick,
42-
ref: 'anchor'
36+
onClick: this.handleClick
4337
};
4438

4539
if (href === '#') {
@@ -48,9 +42,9 @@ const NavItem = React.createClass({
4842

4943
return (
5044
<li {...props} className={classNames(props.className, classes)}>
51-
<a {...linkProps}>
45+
<SafeAnchor {...linkProps}>
5246
{ children }
53-
</a>
47+
</SafeAnchor>
5448
</li>
5549
);
5650
},

‎src/PageItem.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import classNames from 'classnames';
3+
import SafeAnchor from './SafeAnchor';
34

45
const PageItem = React.createClass({
56

@@ -14,12 +15,6 @@ const PageItem = React.createClass({
1415
eventKey: React.PropTypes.any
1516
},
1617

17-
getDefaultProps() {
18-
return {
19-
href: '#'
20-
};
21-
},
22-
2318
render() {
2419
let classes = {
2520
'disabled': this.props.disabled,
@@ -31,14 +26,13 @@ const PageItem = React.createClass({
3126
<li
3227
{...this.props}
3328
className={classNames(this.props.className, classes)}>
34-
<a
29+
<SafeAnchor
3530
href={this.props.href}
3631
title={this.props.title}
3732
target={this.props.target}
38-
onClick={this.handleSelect}
39-
ref="anchor">
33+
onClick={this.handleSelect}>
4034
{this.props.children}
41-
</a>
35+
</SafeAnchor>
4236
</li>
4337
);
4438
},

‎src/SafeAnchor.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
3+
/**
4+
* Note: This is intended as a stop-gap for accessibility concerns that the
5+
* Bootstrap CSS does not address as they have styled anchors and not buttons
6+
* in many cases.
7+
*/
8+
export default class SafeAnchor extends React.Component {
9+
constructor(props) {
10+
super(props);
11+
12+
this.handleClick = this.handleClick.bind(this);
13+
}
14+
15+
handleClick(event) {
16+
if (this.props.href === undefined) {
17+
event.preventDefault();
18+
}
19+
20+
if (this.props.onClick) {
21+
this.props.onClick(event);
22+
}
23+
}
24+
25+
render() {
26+
return (
27+
<a role={this.props.href ? undefined : 'button'}
28+
{...this.props}
29+
onClick={this.handleClick}
30+
href={this.props.href || ''}/>
31+
);
32+
}
33+
}
34+
35+
SafeAnchor.propTypes = {
36+
href: React.PropTypes.string,
37+
onClick: React.PropTypes.func
38+
};

‎src/SubNav.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import classNames from 'classnames';
44
import ValidComponentChildren from './utils/ValidComponentChildren';
55
import createChainedFunction from './utils/createChainedFunction';
66
import BootstrapMixin from './BootstrapMixin';
7+
import SafeAnchor from './SafeAnchor';
78

89
const SubNav = React.createClass({
910
mixins: [BootstrapMixin],
@@ -99,14 +100,13 @@ const SubNav = React.createClass({
99100

100101
return (
101102
<li {...this.props} className={classNames(this.props.className, classes)}>
102-
<a
103+
<SafeAnchor
103104
href={this.props.href}
104105
title={this.props.title}
105106
target={this.props.target}
106-
onClick={this.handleClick}
107-
ref="anchor">
107+
onClick={this.handleClick}>
108108
{this.props.text}
109-
</a>
109+
</SafeAnchor>
110110
<ul className="nav">
111111
{ValidComponentChildren.map(this.props.children, this.renderNavItem)}
112112
</ul>

‎src/Thumbnail.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import classSet from 'classnames';
33
import BootstrapMixin from './BootstrapMixin';
4+
import SafeAnchor from './SafeAnchor';
45

56
const Thumbnail = React.createClass({
67
mixins: [BootstrapMixin],
@@ -16,9 +17,9 @@ const Thumbnail = React.createClass({
1617

1718
if(this.props.href) {
1819
return (
19-
<a {...this.props} href={this.props.href} className={classSet(this.props.className, classes)}>
20+
<SafeAnchor {...this.props} href={this.props.href} className={classSet(this.props.className, classes)}>
2021
<img src={this.props.src} alt={this.props.alt} />
21-
</a>
22+
</SafeAnchor>
2223
);
2324
}
2425
else {

‎src/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import Pager from './Pager';
4242
import Popover from './Popover';
4343
import ProgressBar from './ProgressBar';
4444
import Row from './Row';
45+
import SafeAnchor from './SafeAnchor';
4546
import SplitButton from './SplitButton';
4647
import SubNav from './SubNav';
4748
import TabbedArea from './TabbedArea';
@@ -97,6 +98,7 @@ export default {
9798
Popover,
9899
ProgressBar,
99100
Row,
101+
SafeAnchor,
100102
SplitButton,
101103
SubNav,
102104
TabbedArea,

‎test/NavSpec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@ describe('Nav', function () {
8383
</Nav>
8484
);
8585

86-
let items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
86+
let items = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A');
8787

88-
ReactTestUtils.Simulate.click(items[1].refs.anchor);
88+
ReactTestUtils.Simulate.click(items[1]);
8989
});
9090

9191
it('Should set the correct item active by href', function () {

‎test/PageItemSpec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ describe('PageItem', function () {
3636
it('Should call "onSelect" when item is clicked', function (done) {
3737
function handleSelect(key, href) {
3838
assert.equal(key, 1);
39-
assert.equal(href, '#');
39+
assert.equal(href, undefined);
4040
done();
4141
}
4242
let instance = ReactTestUtils.renderIntoDocument(

‎test/SafeAnchorSpec.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react';
2+
import ReactTestUtils from 'react/lib/ReactTestUtils';
3+
import SafeAnchor from '../src/SafeAnchor';
4+
5+
describe('SafeAnchor', function() {
6+
it('renders an anchor tag', function() {
7+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor />);
8+
const node = React.findDOMNode(instance);
9+
10+
node.tagName.should.equal('A');
11+
});
12+
13+
it('forwards arbitrary props to the anchor', function() {
14+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor herpa='derpa' />);
15+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
16+
17+
anchor.props.herpa.should.equal('derpa');
18+
});
19+
20+
it('forwards provided href', function() {
21+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor href='http://google.com' />);
22+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
23+
24+
anchor.props.href.should.equal('http://google.com');
25+
});
26+
27+
it('ensures that an href is provided', function() {
28+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor />);
29+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
30+
31+
anchor.props.href.should.equal('');
32+
});
33+
34+
it('forwards onClick handler', function(done) {
35+
const handleClick = (event) => {
36+
done();
37+
};
38+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor onClick={handleClick} />);
39+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
40+
41+
ReactTestUtils.Simulate.click(anchor);
42+
});
43+
44+
it('prevents default when no href is provided', function(done) {
45+
const handleClick = (event) => {
46+
event.defaultPrevented.should.be.true;
47+
done();
48+
};
49+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor onClick={handleClick} />);
50+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
51+
52+
ReactTestUtils.Simulate.click(anchor);
53+
});
54+
55+
it('does not prevent default when href is provided', function(done) {
56+
const handleClick = (event) => {
57+
expect(event.defaultPrevented).to.not.be.ok;
58+
done();
59+
};
60+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor href='#' onClick={handleClick} />);
61+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
62+
63+
ReactTestUtils.Simulate.click(anchor);
64+
});
65+
66+
it('forwards provided role', function () {
67+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor role='test' />);
68+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
69+
70+
anchor.props.role.should.equal('test');
71+
});
72+
73+
it('forwards provided role with href', function () {
74+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor role='test' href='http://google.com' />);
75+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
76+
77+
anchor.props.role.should.equal('test');
78+
});
79+
80+
it('set role=button with no provided href', function () {
81+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor />);
82+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
83+
84+
anchor.props.role.should.equal('button');
85+
});
86+
87+
it('sets no role with provided href', function () {
88+
const instance = ReactTestUtils.renderIntoDocument(<SafeAnchor href='http://google.com' />);
89+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
90+
91+
expect(anchor.props.role).to.be.undefined;
92+
});
93+
});

0 commit comments

Comments
 (0)