feat(bs5): convert .sr-only to .visually-hidden

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: `<Button color="danger"/>`
     - `size` - for controlling size classes. ex: `<Button size="sm"/>`
     - `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)

docs/lib/Home/index.js

@@ -251,7 +251,7 @@ const PreferredExample = (props) => {
               </li>
               <li>
                 boolean based props (attributes) when possible for alternative
-                style classes or sr-only content
+                style classes or visually-hidden content
               </li>
             </ul>
           </Col>

src/CarouselControl.js

@@ -16,7 +16,7 @@ const CarouselControl = (props) => {
   ), cssModule);
 
   const screenReaderClasses = mapToCssModules(classNames(
-    'sr-only'
+    'visually-hidden'
   ), cssModule);
 
 

src/DropdownToggle.js

@@ -68,7 +68,7 @@ class DropdownToggle extends React.Component {
       typeof props.children !== 'undefined' ? (
         props.children
       ) : (
-        <span className="sr-only">{ariaLabel}</span>
+        <span className="visually-hidden">{ariaLabel}</span>
       );
 
     let Tag;

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,

src/PaginationLink.js

@@ -78,8 +78,8 @@ const PaginationLink = (props) => {
         {children || defaultCaret}
       </span>,
       <span
-        className="sr-only"
-        key="sr"
+        className="visually-hidden"
+        key="ariaLabel"
       >
         {ariaLabel}
       </span>,

src/Spinner.js

@@ -44,7 +44,7 @@ const Spinner = props => {
   return (
     <Tag role="status" {...attributes} className={classes}>
       {children &&
-        <span className={mapToCssModules('sr-only', cssModule)}>
+        <span className={mapToCssModules('visually-hidden', cssModule)}>
           {children}
         </span>
       }

src/__tests__/DropdownToggle.spec.js

@@ -28,26 +28,26 @@ 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(
       <DropdownContext.Provider value={{ isOpen, inNavbar, toggle }}>
         <DropdownToggle />
       </DropdownContext.Provider>
     );
 
     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(
       <DropdownContext.Provider value={{ isOpen, inNavbar, toggle }}>
         <DropdownToggle aria-label="Dropup Toggle" />
       </DropdownContext.Provider>
     );
 
     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', () => {
           <DropdownToggle>Ello world</DropdownToggle>
         </DropdownContext.Provider>
       );
-      
+
       const instance = wrapper.instance();
 
       instance.onClick({

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(<Label hidden>Yo!</Label>);
 
-    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', () => {

src/__tests__/PaginationLink.spec.js

@@ -32,38 +32,38 @@ 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', () => {
     const wrapper = shallow(<PaginationLink next />);
 
     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', () => {
     const wrapper = shallow(<PaginationLink previous children={[]} />);
 
     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', () => {
     const wrapper = shallow(<PaginationLink next children={[]} />);
 
     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(<PaginationLink next aria-label="Yo" />);
 
     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,31 +83,31 @@ 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', () => {
     const wrapper = shallow(<PaginationLink last />);
 
     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', () => {
     const wrapper = shallow(<PaginationLink first children={[]} />);
 
     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', () => {
     const wrapper = shallow(<PaginationLink last children={[]} />);
 
     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');
   });
 
 });

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(<Spinner>Yo!</Spinner>);
+
+    expect(wrapper.find({ children: 'Yo!'}).hasClass('visually-hidden')).toBe(true);
+  });
+
   it('should render default type of border', () => {
     const wrapper = shallow(<Spinner />);