feat: adding visually hidden text to button for screen readers

CHANGELOG.md

@@ -36,7 +36,7 @@
 **A11y**
 
 - [remove tab index if not set](https://github.com/Capgemini/dcx-react-library/pull/630)
-- [Button component - does not render the aria-label attribute properly](https://github.com/Capgemini/dcx-react-library/issues/618)
+- [Button - does not render the aria-label attribute properly](https://github.com/Capgemini/dcx-react-library/issues/618)
 - [Tab - Actionable Element](https://github.com/Capgemini/dcx-react-library/issues/629)
 - [FormRadio and FormInput - does not offer a capability to not add an aria-label](https://github.com/Capgemini/dcx-react-library/issues/621)
 - [Checkbox - does not offer a capability to not add an aria-label](https://github.com/Capgemini/dcx-react-library/issues/650)
@@ -45,6 +45,7 @@
 - [FormInput - An aria attribute has been given an invalid value](https://github.com/Capgemini/dcx-react-library/issues/631)
 - [Autocomplete - is not accessible and needs to be adjusted](https://github.com/Capgemini/dcx-react-library/issues/624)
 - [Details - contains a default TabIndex](https://github.com/Capgemini/dcx-react-library/issues/640)
+- [Button - adding visually hidden text to button for screen readers](https://github.com/Capgemini/dcx-react-library/issues/652)
 
 **Bug**
 

example/src/components/ButtonDemo.tsx

@@ -62,12 +62,21 @@ export const ButtonDemo = () => {
         }
       />
       <h1>Button with children element</h1>
-      <Button isLoading={isLoading} onClick={() => {}} label="">
+      <Button isLoading={isLoading} onClick={() => {}}>
         <span>
           this is the content
           <strong> passed as children</strong>
         </span>
       </Button>
+      <h1>Button with visually hidden text</h1>
+      <Button
+        label="label"
+        onClick={() => {}}
+        visuallyHiddenText={{
+          text: 'this text is hidden',
+          className: 'visually-hidden',
+        }}
+      />
     </>
   );
 };

src/button/Button.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { classNames, debounce } from '../common';
+import { VisuallyHidden } from '../common/components/commonTypes';
 
 export enum BUTTON_TYPE {
   BUTTON = 'button',
@@ -80,6 +81,10 @@ type ButtonProps = React.HTMLAttributes<HTMLButtonElement> & {
    * allow to specify a custom content
    */
   children?: string | number | JSX.Element | JSX.Element[];
+  /**
+   * allows the addition of visually hidden text
+   */
+  visuallyHiddenText?: VisuallyHidden;
 };
 
 export const Button = ({
@@ -101,6 +106,7 @@ export const Button = ({
   className,
   variant,
   children,
+  visuallyHiddenText,
   ...props
 }: ButtonProps) => {
   const [disable, setDisable] = React.useState<boolean>(disabled);
@@ -170,6 +176,11 @@ export const Button = ({
     >
       {prefix}
       {isLoading && loadingLabel ? loadingLabel : label}
+      {visuallyHiddenText && (
+        <span className={visuallyHiddenText.className}>
+          {visuallyHiddenText.text}
+        </span>
+      )}
       {!isLoading && children}
       {postfix}
     </button>

src/button/__tests__/Button.test.tsx

@@ -319,4 +319,20 @@ describe('Button', () => {
     const button: any = screen.getByRole('button');
     expect(button.getAttribute('aria-label')).toBe('Registers');
   });
+
+  it('should render a button with visually hidden text', () => {
+    const handleClick = jest.fn();
+    const { getByText } = render(
+      <Button
+        label="label"
+        onClick={handleClick}
+        visuallyHiddenText={{
+          text: 'this text is hidden',
+          className: 'visually-hidden',
+        }}
+      />
+    );
+
+    expect(getByText('this text is hidden')).toBeInTheDocument();
+  });
 });

stories/Button/ClassBased.stories.js

@@ -89,3 +89,19 @@ export const CustomContent = {
     children: [<strong>Login</strong>],
   },
 };
+
+/**
+ * Button allows the addition of visually hidden text for screen readers.
+ */
+export const WithVisuallyHiddenText = {
+  name: 'With Visually Hidden Text',
+  args: {
+    label: 'Edit',
+    className: 'govuk-button',
+    visuallyHiddenText: {
+      text: 'Visually Hidden Text',
+      className: 'govuk-visually-hidden',
+    },
+  },
+  argTypes: { onClick: { action: 'clicked' } },
+};

stories/Button/Documentation.mdx

@@ -54,6 +54,10 @@ A more complex example with all the possible properties is:
   value="value"
   className="class"
   variant="primary"
+  visuallyHiddenText={{
+   text: 'this text is hidden',
+   className: 'visually-hidden',
+  }} 
 >
 /**
  * if you use label you can't pass this extra content

stories/changelog.mdx

@@ -40,7 +40,7 @@ import { Meta } from '@storybook/blocks';
 **A11y**
 
 - [remove tab index if not set](https://github.com/Capgemini/dcx-react-library/pull/630)
-- [Button component - does not render the aria-label attribute properly](https://github.com/Capgemini/dcx-react-library/issues/618)
+- [Button - does not render the aria-label attribute properly](https://github.com/Capgemini/dcx-react-library/issues/618)
 - [Tab - Actionable Element](https://github.com/Capgemini/dcx-react-library/issues/629)
 - [FormRadio and FormInput - does not offer a capability to not add an aria-label](https://github.com/Capgemini/dcx-react-library/issues/621)
 - [Checkbox - does not offer a capability to not add an aria-label](https://github.com/Capgemini/dcx-react-library/issues/650)
@@ -49,6 +49,7 @@ import { Meta } from '@storybook/blocks';
 - [FormInput - An aria attribute has been given an invalid value](https://github.com/Capgemini/dcx-react-library/issues/631)
 - [Autocomplete - is not accessible and needs to be adjusted](https://github.com/Capgemini/dcx-react-library/issues/624)
 - [Details - contains a default TabIndex](https://github.com/Capgemini/dcx-react-library/issues/640)
+- [Button - adding visually hidden text to button for screen readers](https://github.com/Capgemini/dcx-react-library/issues/652)
 
 **Bug**