diff --git a/README.md b/README.md
index ee6affd3b..c11f3892f 100644
--- a/README.md
+++ b/README.md
@@ -186,7 +186,7 @@ There are a few core concepts to understand in order to make the most out of thi
- `color` - applies color classes, ex: ` `
- `size` - for controlling size classes. ex: ` `
- `tag` - customize component output by passing in an element name or Component
- - boolean based props (attributes) when possible for alternative style classes or `sr-only` content
+ - boolean based props (attributes) when possible for alternative style classes or `visually-hidden` content
## [Documentation](https://reactstrap.github.io)
diff --git a/docs/lib/Home/index.js b/docs/lib/Home/index.js
index 21eb6740d..1e9502e29 100644
--- a/docs/lib/Home/index.js
+++ b/docs/lib/Home/index.js
@@ -251,7 +251,7 @@ const PreferredExample = (props) => {
boolean based props (attributes) when possible for alternative
- style classes or sr-only content
+ style classes or visually-hidden content
diff --git a/src/CarouselControl.js b/src/CarouselControl.js
index e34dbbdea..8d113fe21 100644
--- a/src/CarouselControl.js
+++ b/src/CarouselControl.js
@@ -16,7 +16,7 @@ const CarouselControl = (props) => {
), cssModule);
const screenReaderClasses = mapToCssModules(classNames(
- 'sr-only'
+ 'visually-hidden'
), cssModule);
diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
index 970aa9f48..dc558c1e3 100644
--- a/src/DropdownToggle.js
+++ b/src/DropdownToggle.js
@@ -68,7 +68,7 @@ class DropdownToggle extends React.Component {
typeof props.children !== 'undefined' ? (
props.children
) : (
- {ariaLabel}
+ {ariaLabel}
);
let Tag;
diff --git a/src/Label.js b/src/Label.js
index 6891657df..fabf2653c 100644
--- a/src/Label.js
+++ b/src/Label.js
@@ -94,7 +94,7 @@ const Label = (props) => {
const classes = mapToCssModules(classNames(
className,
- hidden ? 'sr-only' : false,
+ hidden ? 'visually-hidden' : false,
check ? 'form-check-label' : false,
size ? `col-form-label-${size}` : false,
colClasses,
diff --git a/src/PaginationLink.js b/src/PaginationLink.js
index ea5b27f29..320a9d9df 100644
--- a/src/PaginationLink.js
+++ b/src/PaginationLink.js
@@ -78,8 +78,8 @@ const PaginationLink = (props) => {
{children || defaultCaret}
,
{ariaLabel}
,
diff --git a/src/Spinner.js b/src/Spinner.js
index 7c1765e3a..5ef511368 100644
--- a/src/Spinner.js
+++ b/src/Spinner.js
@@ -44,7 +44,7 @@ const Spinner = props => {
return (
{children &&
-
+
{children}
}
diff --git a/src/__tests__/DropdownToggle.spec.js b/src/__tests__/DropdownToggle.spec.js
index 1fac33c49..68286d292 100644
--- a/src/__tests__/DropdownToggle.spec.js
+++ b/src/__tests__/DropdownToggle.spec.js
@@ -28,7 +28,7 @@ describe('DropdownToggle', () => {
expect(wrapper.text()).toBe('Ello world');
});
- it('should add default sr-only content', () => {
+ it('should add default visually-hidden content', () => {
const wrapper = mount(
@@ -36,10 +36,10 @@ describe('DropdownToggle', () => {
);
expect(wrapper.text()).toBe('Toggle Dropdown');
- expect(wrapper.find('.sr-only').hostNodes().length).toBe(1);
+ expect(wrapper.find('.visually-hidden').hostNodes().length).toBe(1);
});
- it('should add default sr-only content', () => {
+ it('should add default visually-hidden content', () => {
const wrapper = mount(
@@ -47,7 +47,7 @@ describe('DropdownToggle', () => {
);
expect(wrapper.text()).toBe('Dropup Toggle');
- expect(wrapper.find('.sr-only').hostNodes().length).toBe(1);
+ expect(wrapper.find('.visually-hidden').hostNodes().length).toBe(1);
});
it('should render elements', () => {
@@ -149,7 +149,7 @@ describe('DropdownToggle', () => {
Ello world
);
-
+
const instance = wrapper.instance();
instance.onClick({
diff --git a/src/__tests__/Label.spec.js b/src/__tests__/Label.spec.js
index 11d782ba5..d71e4b218 100644
--- a/src/__tests__/Label.spec.js
+++ b/src/__tests__/Label.spec.js
@@ -81,10 +81,10 @@ describe('Label', () => {
expect(wrapper.hasClass('col-auto')).toBe(true);
});
- it('should render with "sr-only" class when hidden prop is truthy', () => {
+ it('should render with "visually-hidden" class when hidden prop is truthy', () => {
const wrapper = shallow(Yo! );
- expect(wrapper.hasClass('sr-only')).toBe(true);
+ expect(wrapper.hasClass('visually-hidden')).toBe(true);
});
it('should render with "col-form-label-${size}" class when size is provided', () => {
diff --git a/src/__tests__/PaginationLink.spec.js b/src/__tests__/PaginationLink.spec.js
index 47b2defdd..4f751f479 100644
--- a/src/__tests__/PaginationLink.spec.js
+++ b/src/__tests__/PaginationLink.spec.js
@@ -32,7 +32,7 @@ describe('PaginationLink', () => {
expect(wrapper.prop('aria-label')).toBe('Previous');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u2039');
- expect(wrapper.find('.sr-only').text()).toBe('Previous');
+ expect(wrapper.find('.visually-hidden').text()).toBe('Previous');
});
it('should render next', () => {
@@ -40,7 +40,7 @@ describe('PaginationLink', () => {
expect(wrapper.prop('aria-label')).toBe('Next');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u203A');
- expect(wrapper.find('.sr-only').text()).toBe('Next');
+ expect(wrapper.find('.visually-hidden').text()).toBe('Next');
});
it('should render default previous caret with children as an empty array', () => {
@@ -48,7 +48,7 @@ describe('PaginationLink', () => {
expect(wrapper.prop('aria-label')).toBe('Previous');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u2039');
- expect(wrapper.find('.sr-only').text()).toBe('Previous');
+ expect(wrapper.find('.visually-hidden').text()).toBe('Previous');
});
it('should render default next caret with children as an empty array', () => {
@@ -56,14 +56,14 @@ describe('PaginationLink', () => {
expect(wrapper.prop('aria-label')).toBe('Next');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u203A');
- expect(wrapper.find('.sr-only').text()).toBe('Next');
+ expect(wrapper.find('.visually-hidden').text()).toBe('Next');
});
it('should render custom aria label', () => {
const wrapper = shallow( );
expect(wrapper.prop('aria-label')).toBe('Yo');
- expect(wrapper.find('.sr-only').text()).toBe('Yo');
+ expect(wrapper.find('.visually-hidden').text()).toBe('Yo');
});
it('should render custom caret specified as a string', () => {
@@ -83,7 +83,7 @@ describe('PaginationLink', () => {
expect(wrapper.prop('aria-label')).toBe('First');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00ab');
- expect(wrapper.find('.sr-only').text()).toBe('First');
+ expect(wrapper.find('.visually-hidden').text()).toBe('First');
});
it('should render last', () => {
@@ -91,7 +91,7 @@ describe('PaginationLink', () => {
expect(wrapper.prop('aria-label')).toBe('Last');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00bb');
- expect(wrapper.find('.sr-only').text()).toBe('Last');
+ expect(wrapper.find('.visually-hidden').text()).toBe('Last');
});
it('should render default first caret with children as an empty array', () => {
@@ -99,7 +99,7 @@ describe('PaginationLink', () => {
expect(wrapper.prop('aria-label')).toBe('First');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00ab');
- expect(wrapper.find('.sr-only').text()).toBe('First');
+ expect(wrapper.find('.visually-hidden').text()).toBe('First');
});
it('should render default last caret with children as an empty array', () => {
@@ -107,7 +107,7 @@ describe('PaginationLink', () => {
expect(wrapper.prop('aria-label')).toBe('Last');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00bb');
- expect(wrapper.find('.sr-only').text()).toBe('Last');
+ expect(wrapper.find('.visually-hidden').text()).toBe('Last');
});
});
diff --git a/src/__tests__/Spinner.spec.js b/src/__tests__/Spinner.spec.js
index 8f3f48173..95b190930 100644
--- a/src/__tests__/Spinner.spec.js
+++ b/src/__tests__/Spinner.spec.js
@@ -27,6 +27,12 @@ describe('Spinner', () => {
expect(wrapper.text()).toBe('Yo!');
});
+ it('should render visually-hidden children', () => {
+ const wrapper = shallow(Yo! );
+
+ expect(wrapper.find({ children: 'Yo!'}).hasClass('visually-hidden')).toBe(true);
+ });
+
it('should render default type of border', () => {
const wrapper = shallow( );