feat(v5): rename screen reader classes (#5665)

react-bootstrap · Feb 19, 2021 · 907c0b1 · 907c0b1
1 parent db8d137
commit 907c0b1
Show file tree

Hide file tree

Showing 25 changed files with 75 additions and 49 deletions.
diff --git a/src/Carousel.tsx b/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>
           )}
         </>

diff --git a/src/FormLabel.tsx b/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,
     );
 

diff --git a/src/PageItem.tsx b/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>
     );
   }

diff --git a/src/ProgressBar.tsx b/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,

diff --git a/src/SplitButton.tsx b/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

diff --git a/test/CarouselSpec.js b/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}`,
       );

diff --git a/test/FormLabelSpec.js b/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',
     );
   });
 

diff --git a/test/ProgressBarSpec.js b/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', () => {

diff --git a/test/SplitButtonSpec.js b/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');
   });

diff --git a/tests/simple-types-test.tsx b/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>

diff --git a/www/src/components/Announce.js b/www/src/components/Announce.js
@@ -13,7 +13,7 @@ class Announce extends React.Component {
       <div
         {...props}
         role="alert"
-        className="sr-only"
+        className="visually-hidden"
         aria-live={assertive ? 'assertive' : 'polite'}
       >
         {children}

diff --git a/www/src/components/ImportApi.js b/www/src/components/ImportApi.js
@@ -46,7 +46,7 @@ const CopyImport = ({ name }) => {
     >
       <Link onClick={handleCopy} className="js-search-exclude">
         <FontAwesomeIcon icon={faCopy} />
-        <span className="sr-only">{`Copy import code for the ${name} component`}</span>
+        <span className="visually-hidden">{`Copy import code for the ${name} component`}</span>
       </Link>
     </OverlayTrigger>
   );

diff --git a/www/src/components/LinkToSource.js b/www/src/components/LinkToSource.js
@@ -26,7 +26,7 @@ export default (props) => {
     >
       <Link href={linkToComponentOnGitHub} className="js-search-exclude">
         <FontAwesomeIcon icon={faCode} />
-        <span className="sr-only">view source file</span>
+        <span className="visually-hidden">view source file</span>
       </Link>
     </OverlayTrigger>
   );

diff --git a/www/src/components/NavMain.js b/www/src/components/NavMain.js
@@ -55,7 +55,7 @@ const StyledNavbar = styled(Navbar).attrs({
 `;
 
 const SkipToContentLink = styled('a')`
-  composes: sr-only sr-only-focusable bg-primary text-white px-4 py-2 me-2 from global;
+  composes: visually-hidden visually-hidden-focusable bg-primary text-white px-4 py-2 me-2 from global;
 `;
 
 const StyledNavLink = styled(Nav.Link)`
@@ -157,7 +157,7 @@ function NavMain({ activePage }) {
               rel="noopener noreferrer"
             >
               <FontAwesomeIcon icon={faGithub} size="lg" />
-              <span className="sr-only">Github</span>
+              <span className="visually-hidden">Github</span>
             </StyledNavLink>
           </OverlayTrigger>
           <OverlayTrigger
@@ -171,7 +171,7 @@ function NavMain({ activePage }) {
               rel="noopener noreferrer"
             >
               <FontAwesomeIcon icon={faDiscord} size="lg" />
-              <span className="sr-only">Discord</span>
+              <span className="visually-hidden">Discord</span>
             </StyledNavLink>
           </OverlayTrigger>
         </Nav>

diff --git a/www/src/examples/Badge/Button.js b/www/src/examples/Badge/Button.js
@@ -1,4 +1,4 @@
 <Button variant="primary">
   Profile <Badge bg="secondary">9</Badge>
-  <span className="sr-only">unread messages</span>
+  <span className="visually-hidden">unread messages</span>
 </Button>;
diff --git a/www/src/examples/Form/GridAutoSizing.js b/www/src/examples/Form/GridAutoSizing.js
@@ -1,7 +1,7 @@
 <Form>
   <Row className="align-items-center">
     <Col xs="auto">
-      <Form.Label htmlFor="inlineFormInput" srOnly>
+      <Form.Label htmlFor="inlineFormInput" visuallyHidden>
         Name
       </Form.Label>
       <Form.Control
@@ -11,7 +11,7 @@
       />
     </Col>
     <Col xs="auto">
-      <Form.Label htmlFor="inlineFormInputGroup" srOnly>
+      <Form.Label htmlFor="inlineFormInputGroup" visuallyHidden>
         Username
       </Form.Label>
       <InputGroup className="mb-2">

diff --git a/www/src/examples/Form/GridAutoSizingColMix.js b/www/src/examples/Form/GridAutoSizingColMix.js
@@ -1,13 +1,13 @@
 <Form>
   <Row className="align-items-center">
     <Col sm={3} className="my-1">
-      <Form.Label htmlFor="inlineFormInputName" srOnly>
+      <Form.Label htmlFor="inlineFormInputName" visuallyHidden>
         Name
       </Form.Label>
       <Form.Control id="inlineFormInputName" placeholder="Jane Doe" />
     </Col>
     <Col sm={3} className="my-1">
-      <Form.Label htmlFor="inlineFormInputGroupUsername" srOnly>
+      <Form.Label htmlFor="inlineFormInputGroupUsername" visuallyHidden>
         Username
       </Form.Label>
       <InputGroup>

diff --git a/www/src/examples/Form/GridAutoSizingCustom.js b/www/src/examples/Form/GridAutoSizingCustom.js
@@ -1,7 +1,11 @@
 <Form>
   <Row className="align-items-center">
     <Col xs="auto" className="my-1">
-      <Form.Label className="me-sm-2" htmlFor="inlineFormCustomSelect" srOnly>
+      <Form.Label
+        className="me-sm-2"
+        htmlFor="inlineFormCustomSelect"
+        visuallyHidden
+      >
         Preference
       </Form.Label>
       <Form.Select className="me-sm-2" id="inlineFormCustomSelect">

diff --git a/www/src/examples/ProgressBar/ScreenreaderLabel.js b/www/src/examples/ProgressBar/ScreenreaderLabel.js
@@ -1,5 +1,7 @@
 const now = 60;
 
-const progressInstance = <ProgressBar now={now} label={`${now}%`} srOnly />;
+const progressInstance = (
+  <ProgressBar now={now} label={`${now}%`} visuallyHidden />
+);
 
 render(progressInstance);
diff --git a/www/src/examples/Spinner/Basic.js b/www/src/examples/Spinner/Basic.js
@@ -1,3 +1,3 @@
 <Spinner animation="border" role="status">
-  <span className="sr-only">Loading...</span>
+  <span className="visually-hidden">Loading...</span>
 </Spinner>;
diff --git a/www/src/examples/Spinner/Buttons.js b/www/src/examples/Spinner/Buttons.js
@@ -7,7 +7,7 @@
       role="status"
       aria-hidden="true"
     />
-    <span className="sr-only">Loading...</span>
+    <span className="visually-hidden">Loading...</span>
   </Button>{' '}
   <Button variant="primary" disabled>
     <Spinner