From 702ad553b37a25ab516fc147201622ad122c39d1 Mon Sep 17 00:00:00 2001
From: Hanzhao Chen <hanzhao.chen@appfolio.com>
Date: Fri, 30 Oct 2020 12:51:37 -0700
Subject: [PATCH] feat(bs5): convert .sr-only to .visually-hidden

---
 README.md                            |  2 +-
 docs/lib/Home/index.js               |  2 +-
 src/CarouselControl.js               |  2 +-
 src/DropdownToggle.js                |  2 +-
 src/Label.js                         |  2 +-
 src/PaginationLink.js                |  4 ++--
 src/Spinner.js                       |  2 +-
 src/__tests__/DropdownToggle.spec.js | 10 +++++-----
 src/__tests__/Label.spec.js          |  4 ++--
 src/__tests__/PaginationLink.spec.js | 18 +++++++++---------
 src/__tests__/Spinner.spec.js        |  6 ++++++
 11 files changed, 30 insertions(+), 24 deletions(-)

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: `<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)
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) => {
               </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>
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
       ) : (
-        <span className="sr-only">{ariaLabel}</span>
+        <span className="visually-hidden">{ariaLabel}</span>
       );
 
     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}
       </span>,
       <span
-        className="sr-only"
-        key="sr"
+        className="visually-hidden"
+        key="ariaLabel"
       >
         {ariaLabel}
       </span>,
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 (
     <Tag role="status" {...attributes} className={classes}>
       {children &&
-        <span className={mapToCssModules('sr-only', cssModule)}>
+        <span className={mapToCssModules('visually-hidden', cssModule)}>
           {children}
         </span>
       }
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(
       <DropdownContext.Provider value={{ isOpen, inNavbar, toggle }}>
         <DropdownToggle />
@@ -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(
       <DropdownContext.Provider value={{ isOpen, inNavbar, toggle }}>
         <DropdownToggle aria-label="Dropup Toggle" />
@@ -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', () => {
           <DropdownToggle>Ello world</DropdownToggle>
         </DropdownContext.Provider>
       );
-      
+
       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(<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', () => {
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(<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,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(<Spinner>Yo!</Spinner>);
+
+    expect(wrapper.find({ children: 'Yo!'}).hasClass('visually-hidden')).toBe(true);
+  });
+
   it('should render default type of border', () => {
     const wrapper = shallow(<Spinner />);