Skip to content

Commit f5caf09

Browse files
gergely-nagygergely-nagy
authored
chore(Breadcrumb,Pagination): improve accessibility and docs (reactstrap#1033)
1 parent 98dfa03 commit f5caf09

File tree

11 files changed

+112
-21
lines changed

11 files changed

+112
-21
lines changed

‎docs/lib/Components/BreadcrumbsPage.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,28 @@ export default class BreadcrumbsPage extends React.Component {
2323
{BreadcrumbExampleSource}
2424
</PrismCode>
2525
</pre>
26+
<h4>Properties</h4>
27+
<pre>
28+
<PrismCode className="language-jsx">
29+
{`Breadcrumb.propTypes = {
30+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
31+
listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
32+
className: PropTypes.string,
33+
listClassName: PropTypes.string,
34+
cssModule: PropTypes.object,
35+
children: PropTypes.node,
36+
'aria-label': PropTypes.string
37+
};
38+
39+
BreadcrumbItem.propTypes = {
40+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
41+
active: PropTypes.bool,
42+
className: PropTypes.string,
43+
cssModule: PropTypes.object,
44+
};
45+
`}
46+
</PrismCode>
47+
</pre>
2648
<SectionTitle>No list</SectionTitle>
2749
<hr />
2850
<p>Breadcrumbs can work without the usage of list markup.</p>

‎docs/lib/Components/PaginationPage.js

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,33 @@ export default class PaginationPage extends React.Component {
3535
{`Pagination.propTypes = {
3636
children: PropTypes.node,
3737
className: PropTypes.string,
38+
listClassName: PropTypes.string,
39+
cssModule: PropTypes.object,
3840
size: PropTypes.string,
3941
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
40-
}`}
42+
listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
43+
'aria-label': PropTypes.string
44+
};
45+
46+
PaginationItem.propTypes = {
47+
active: PropTypes.bool,
48+
children: PropTypes.node,
49+
className: PropTypes.string,
50+
cssModule: PropTypes.object,
51+
disabled: PropTypes.bool,
52+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
53+
};
54+
55+
PaginationLink.propTypes = {
56+
children: PropTypes.node,
57+
className: PropTypes.string,
58+
cssModule: PropTypes.object,
59+
next: PropTypes.bool,
60+
previous: PropTypes.bool,
61+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
62+
'aria-label': PropTypes.string
63+
};
64+
`}
4165
</PrismCode>
4266
</pre>
4367
<SectionTitle>Disabled and active states</SectionTitle>

‎docs/lib/examples/Pagination.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
44
export default class Example extends React.Component {
55
render() {
66
return (
7-
<Pagination>
7+
<Pagination aria-label="Page navigation example">
88
<PaginationItem>
99
<PaginationLink previous href="#" />
1010
</PaginationItem>

‎docs/lib/examples/PaginationSizingLarge.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
44
export default class Example extends React.Component {
55
render() {
66
return (
7-
<Pagination size="lg">
7+
<Pagination size="lg" aria-label="Page navigation example">
88
<PaginationItem>
99
<PaginationLink previous href="#" />
1010
</PaginationItem>

‎docs/lib/examples/PaginationSizingSmall.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
44
export default class Example extends React.Component {
55
render() {
66
return (
7-
<Pagination size="sm">
7+
<Pagination size="sm" aria-label="Page navigation example">
88
<PaginationItem>
99
<PaginationLink previous href="#" />
1010
</PaginationItem>

‎docs/lib/examples/PaginationState.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
44
export default class Example extends React.Component {
55
render() {
66
return (
7-
<Pagination>
7+
<Pagination aria-label="Page navigation example">
88
<PaginationItem disabled>
99
<PaginationLink previous href="#" />
1010
</PaginationItem>

‎src/Breadcrumb.js

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,48 @@ import classNames from 'classnames';
44
import { mapToCssModules } from './utils';
55

66
const propTypes = {
7-
tag: PropTypes.string,
7+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
8+
listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
89
className: PropTypes.string,
10+
listClassName: PropTypes.string,
911
cssModule: PropTypes.object,
12+
children: PropTypes.node,
13+
'aria-label': PropTypes.string
1014
};
1115

1216
const defaultProps = {
13-
tag: 'ol'
17+
tag: 'nav',
18+
listTag: 'ol',
19+
'aria-label': 'breadcrumb'
1420
};
1521

1622
const Breadcrumb = (props) => {
1723
const {
1824
className,
25+
listClassName,
1926
cssModule,
27+
children,
2028
tag: Tag,
29+
listTag: ListTag,
30+
'aria-label': label,
2131
...attributes
2232
} = props;
33+
2334
const classes = mapToCssModules(classNames(
24-
className,
25-
'breadcrumb'
35+
className
36+
), cssModule);
37+
38+
const listClasses = mapToCssModules(classNames(
39+
'breadcrumb',
40+
listClassName
2641
), cssModule);
2742

2843
return (
29-
<Tag {...attributes} className={classes} />
44+
<Tag {...attributes} className={classes} aria-label={label}>
45+
<ListTag className={listClasses}>
46+
{children}
47+
</ListTag>
48+
</Tag>
3049
);
3150
};
3251

‎src/BreadcrumbItem.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const BreadcrumbItem = (props) => {
2929
), cssModule);
3030

3131
return (
32-
<Tag {...attributes} className={classes} />
32+
<Tag {...attributes} className={classes} aria-current={active ? 'page' : undefined} />
3333
);
3434
};
3535

‎src/Pagination.js

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,48 @@ import { mapToCssModules } from './utils';
66
const propTypes = {
77
children: PropTypes.node,
88
className: PropTypes.string,
9+
listClassName: PropTypes.string,
910
cssModule: PropTypes.object,
1011
size: PropTypes.string,
1112
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
13+
listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
14+
'aria-label': PropTypes.string
1215
};
1316

1417
const defaultProps = {
15-
tag: 'ul',
18+
tag: 'nav',
19+
listTag: 'ul',
20+
'aria-label': 'pagination'
1621
};
1722

1823
const Pagination = (props) => {
1924
const {
2025
className,
26+
listClassName,
2127
cssModule,
2228
size,
2329
tag: Tag,
30+
listTag: ListTag,
31+
'aria-label': label,
2432
...attributes
2533
} = props;
2634

2735
const classes = mapToCssModules(classNames(
28-
className,
36+
className
37+
), cssModule);
38+
39+
const listClasses = mapToCssModules(classNames(
40+
listClassName,
2941
'pagination',
3042
{
3143
[`pagination-${size}`]: !!size,
3244
}
3345
), cssModule);
3446

3547
return (
36-
<Tag {...attributes} className={classes} />
48+
<Tag className={classes} aria-label={label}>
49+
<ListTag {...attributes} className={listClasses} />
50+
</Tag>
3751
);
3852
};
3953

‎src/__tests__/Breadcrumb.spec.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,22 @@ describe('Breadcrumb', () => {
99
expect(wrapper.text()).toBe('Yo!');
1010
});
1111

12+
it('should render "nav" by default', () => {
13+
const wrapper = shallow(<Breadcrumb>Yo!</Breadcrumb>);
14+
15+
expect(wrapper.type()).toBe('nav');
16+
});
17+
1218
it('should render "ol" by default', () => {
1319
const wrapper = shallow(<Breadcrumb>Yo!</Breadcrumb>);
1420

15-
expect(wrapper.type()).toBe('ol');
21+
expect(wrapper.children().type()).toBe('ol');
1622
});
1723

1824
it('should render with the "breadcrumb" class', () => {
1925
const wrapper = shallow(<Breadcrumb>Default Breadcrumb</Breadcrumb>);
2026

21-
expect(wrapper.hasClass('breadcrumb')).toBe(true);
27+
expect(wrapper.children().hasClass('breadcrumb')).toBe(true);
2228
});
2329

2430
it('should render custom tag', () => {

‎src/__tests__/Pagination.spec.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,16 @@ import { shallow, mount } from 'enzyme';
33
import { Pagination } from '../';
44

55
describe('Pagination', () => {
6-
it('should render default tag', () => {
6+
it('should render "nav" tag by default', () => {
77
const wrapper = mount(<Pagination />);
88

9-
expect(wrapper.find('ul').hostNodes().length).toBe(1);
9+
expect(wrapper.find('nav').hostNodes().length).toBe(1);
10+
});
11+
12+
it('should render default list tag', () => {
13+
const wrapper = mount(<Pagination />);
14+
15+
expect(wrapper.children().find('ul').hostNodes().length).toBe(1);
1016
});
1117

1218
it('should render custom tag', () => {
@@ -18,7 +24,7 @@ describe('Pagination', () => {
1824
it('should render with "pagination" class', () => {
1925
const wrapper = shallow(<Pagination />);
2026

21-
expect(wrapper.hasClass('pagination')).toBe(true);
27+
expect(wrapper.children().hasClass('pagination')).toBe(true);
2228
});
2329

2430
it('should render children', () => {
@@ -31,7 +37,7 @@ describe('Pagination', () => {
3137
const small = shallow(<Pagination size="sm" />);
3238
const large = shallow(<Pagination size="lg" />);
3339

34-
expect(small.hasClass('pagination-sm')).toBe(true);
35-
expect(large.hasClass('pagination-lg')).toBe(true);
40+
expect(small.children().hasClass('pagination-sm')).toBe(true);
41+
expect(large.children().hasClass('pagination-lg')).toBe(true);
3642
});
3743
});

0 commit comments

Comments
 (0)