feat(v5): rename screen reader classes (react-bootstrap#5665)

Author: ggtaylor

src/Carousel.tsx

@@ -608,13 +608,17 @@ function CarouselFunc(uncontrolledProps: CarouselProps, ref) {
           {(wrap || activeIndex !== 0) && (
             <SafeAnchor className={`${prefix}-control-prev`} onClick={prev}>
               {prevIcon}
-              {prevLabel && <span className="sr-only">{prevLabel}</span>}
+              {prevLabel && (
+                <span className="visually-hidden">{prevLabel}</span>
+              )}
             </SafeAnchor>
           )}
           {(wrap || activeIndex !== numChildren - 1) && (
             <SafeAnchor className={`${prefix}-control-next`} onClick={next}>
               {nextIcon}
-              {nextLabel && <span className="sr-only">{nextLabel}</span>}
+              {nextLabel && (
+                <span className="visually-hidden">{nextLabel}</span>
+              )}
             </SafeAnchor>
           )}
         </>

src/FormLabel.tsx

@@ -13,7 +13,7 @@ import {
 
 interface FormLabelBaseProps extends BsPrefixPropsWithChildren {
   htmlFor?: string;
-  srOnly?: boolean;
+  visuallyHidden?: boolean;
 }
 
 export interface FormLabelOwnProps extends FormLabelBaseProps {
@@ -59,15 +59,15 @@ const propTypes = {
    * Hides the label visually while still allowing it to be
    * read by assistive technologies.
    */
-  srOnly: PropTypes.bool,
+  visuallyHidden: PropTypes.bool,
 
   /** Set a custom element for this component */
   as: PropTypes.elementType,
 };
 
 const defaultProps = {
   column: false,
-  srOnly: false,
+  visuallyHidden: false,
 };
 
 const FormLabel: FormLabel = React.forwardRef(
@@ -77,7 +77,7 @@ const FormLabel: FormLabel = React.forwardRef(
       as: Component = 'label',
       bsPrefix,
       column,
-      srOnly,
+      visuallyHidden,
       className,
       htmlFor,
       ...props
@@ -95,7 +95,7 @@ const FormLabel: FormLabel = React.forwardRef(
     const classes = classNames(
       className,
       bsPrefix,
-      srOnly && 'sr-only',
+      visuallyHidden && 'visually-hidden',
       column && columnClass,
     );
 

src/PageItem.tsx

@@ -63,7 +63,7 @@ const PageItem: PageItem = React.forwardRef<HTMLLIElement, PageItemProps>(
         <Component className="page-link" disabled={disabled} {...props}>
           {children}
           {active && activeLabel && (
-            <span className="sr-only">{activeLabel}</span>
+            <span className="visually-hidden">{activeLabel}</span>
           )}
         </Component>
       </li>
@@ -82,7 +82,7 @@ function createButton(name: string, defaultValue: ReactNode, label = name) {
     return (
       <PageItem {...props}>
         <span aria-hidden="true">{children || defaultValue}</span>
-        <span className="sr-only">{label}</span>
+        <span className="visually-hidden">{label}</span>
       </PageItem>
     );
   }

src/ProgressBar.tsx

@@ -14,7 +14,7 @@ export interface ProgressBarProps
   now?: number;
   max?: number;
   label?: React.ReactNode;
-  srOnly?: boolean;
+  visuallyHidden?: boolean;
   striped?: boolean;
   animated?: boolean;
   variant?: 'success' | 'danger' | 'warning' | 'info' | string;
@@ -86,7 +86,7 @@ const propTypes = {
   /**
    * Hide's the label visually.
    */
-  srOnly: PropTypes.bool,
+  visuallyHidden: PropTypes.bool,
 
   /**
    * Uses a gradient to create a striped effect.
@@ -127,7 +127,7 @@ const defaultProps = {
   max: 100,
   animated: false,
   isChild: false,
-  srOnly: false,
+  visuallyHidden: false,
   striped: false,
 };
 
@@ -142,7 +142,7 @@ function renderProgressBar(
     now,
     max,
     label,
-    srOnly,
+    visuallyHidden,
     striped,
     animated,
     className,
@@ -168,7 +168,11 @@ function renderProgressBar(
       aria-valuemin={min}
       aria-valuemax={max}
     >
-      {srOnly ? <span className="sr-only">{label}</span> : label}
+      {visuallyHidden ? (
+        <span className="visually-hidden">{label}</span>
+      ) : (
+        label
+      )}
     </div>
   );
 }
@@ -188,7 +192,7 @@ const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
       now,
       max,
       label,
-      srOnly,
+      visuallyHidden,
       striped,
       animated,
       bsPrefix,
@@ -212,7 +216,7 @@ const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
                 now,
                 max,
                 label,
-                srOnly,
+                visuallyHidden,
                 striped,
                 animated,
                 bsPrefix,

src/SplitButton.tsx

@@ -143,7 +143,7 @@ const SplitButton = React.forwardRef<HTMLElement, SplitButtonProps>(
         disabled={props.disabled}
         childBsPrefix={bsPrefix}
       >
-        <span className="sr-only">{toggleLabel}</span>
+        <span className="visually-hidden">{toggleLabel}</span>
       </Dropdown.Toggle>
 
       <Dropdown.Menu

test/CarouselSpec.js

@@ -219,7 +219,7 @@ describe('<Carousel>', () => {
       </Carousel>,
     );
 
-    const labels = wrapper.find('.sr-only');
+    const labels = wrapper.find('.visually-hidden');
 
     expect(labels).to.have.lengthOf(2);
     expect(labels.at(0).text()).to.equal('Previous awesomeness');
@@ -240,7 +240,7 @@ describe('<Carousel>', () => {
         </Carousel>,
       );
 
-      expect(wrapper.find('.sr-only')).to.have.lengthOf(
+      expect(wrapper.find('.visually-hidden')).to.have.lengthOf(
         0,
         `should not render labels for value ${falsyValue}`,
       );

test/FormLabelSpec.js

@@ -35,9 +35,9 @@ describe('<FormLabel>', () => {
     ).assertSingle('label[htmlFor="foo"].col-sm-4.col-form-label');
   });
 
-  it('should respect srOnly', () => {
-    mount(<FormLabel srOnly>Label</FormLabel>).assertSingle(
-      'label.form-label.sr-only',
+  it('should respect visuallyHidden', () => {
+    mount(<FormLabel visuallyHidden>Label</FormLabel>).assertSingle(
+      'label.form-label.visually-hidden',
     );
   });
 

test/ProgressBarSpec.js

@@ -83,12 +83,12 @@ describe('<ProgressBar>', () => {
         min={0}
         max={10}
         now={5}
-        srOnly
+        visuallyHidden
         variant="success"
         label="progress bar label"
       />,
     )
-      .find('.sr-only')
+      .find('.visually-hidden')
       .getDOMNode();
 
     assert.equal(node.textContent, 'progress bar label');
@@ -106,8 +106,14 @@ describe('<ProgressBar>', () => {
     const customLabel = <strong className="special-label">My label</strong>;
 
     mount(
-      <ProgressBar min={0} max={10} now={5} label={customLabel} srOnly />,
-    ).find('.sr-only .special-label');
+      <ProgressBar
+        min={0}
+        max={10}
+        now={5}
+        label={customLabel}
+        visuallyHidden
+      />,
+    ).find('.visually-hidden .special-label');
   });
 
   it('Should show striped bar', () => {

test/SplitButtonSpec.js

@@ -83,7 +83,7 @@ describe('<SplitButton>', () => {
 
   it('should set accessible label on toggle', () => {
     mount(simple)
-      .assertSingle('.sr-only')
+      .assertSingle('.visually-hidden')
       .text()
       .should.equal('Toggle dropdown');
   });
@@ -94,7 +94,7 @@ describe('<SplitButton>', () => {
         <DropdownItem>Item 1</DropdownItem>
       </SplitButton>,
     )
-      .assertSingle('.sr-only')
+      .assertSingle('.visually-hidden')
       .text()
       .should.equal('Label');
   });

tests/simple-types-test.tsx

@@ -417,7 +417,7 @@ const MegaComponent = () => (
           as="div"
           column="sm"
           htmlFor="id"
-          srOnly
+          visuallyHidden
           bsPrefix="formlabel"
           style={style}
         >
@@ -895,7 +895,13 @@ const MegaComponent = () => (
       <ProgressBar striped animated variant="info" now={20} />
       <ProgressBar striped variant="warning" now={60} />
       <ProgressBar striped variant="danger" now={80} />
-      <ProgressBar id="id" label="label" srOnly bsPrefix="prefix" style={style}>
+      <ProgressBar
+        id="id"
+        label="label"
+        visuallyHidden
+        bsPrefix="prefix"
+        style={style}
+      >
         <ProgressBar isChild />
       </ProgressBar>
     </div>