fix: removing name as a substitute aria label

CHANGELOG.md

@@ -39,6 +39,8 @@
 - [Button component - 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)
+- [FormInput - does not offer a capability to not add an aria-label](https://github.com/Capgemini/dcx-react-library/issues/650)
 - [FormInput - should not have a tabindex defined](https://github.com/Capgemini/dcx-react-library/issues/623)
 - [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)

package.json

@@ -2,7 +2,7 @@
   "name": "@capgeminiuk/dcx-react-library",
   "author": "Capgemini UK",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.0-rc8",
   "source": "src/index.ts",
   "main": "dist/dcx-react-library.js",
   "module": "dist/dcx-react-library.module.js",
@@ -136,4 +136,4 @@
     "@cesium133/forgjs": "1.1.10",
     "imask": "^6.4.3"
   }
-}
+}

src/formCheckbox/FormCheckbox.tsx

@@ -49,7 +49,7 @@ export const FormCheckbox = ({
       inputProps={inputProps}
       itemProps={itemProps}
       labelProps={labelProps}
-      ariaLabel={ariaLabel || name}
+      ariaLabel={ariaLabel}
       ariaDataControls={ariaDataControls}
       ariaDescribedBy={ariaDescribedBy}
       ariaLabelledBy={ariaLabelledBy || labelProps?.id}

src/formCheckbox/__test__/FormCheckbox.test.tsx

@@ -133,7 +133,7 @@ describe('FormCheckbox', () => {
     expect(checkbox).toBeDisabled();
   });
 
-  it('should render a checkbox with aria label match name if unspecified', () => {
+  it('should render a checkbox with aria label being null if unspecified', () => {
     const handleChange = jest.fn();
 
     render(
@@ -146,9 +146,9 @@ describe('FormCheckbox', () => {
       />
     );
 
-    expect(screen.getByLabelText('my label').getAttribute('aria-label')).toBe(
-      'group1'
-    );
+    expect(
+      screen.getByLabelText('my label').getAttribute('aria-label')
+    ).toBeNull();
   });
 
   it('should render a checkbox with aria-data-controls and aria-labelledby as empty if unspecified', () => {
@@ -474,21 +474,19 @@ describe('FormCheckbox', () => {
     expect(input.className.trim()).toBe('my-input-class');
   });
 
-
   it('should render a checkbox with a custom label', () => {
     const handleChange = jest.fn();
     render(
       <FormCheckbox
         id="myId"
         name="group1"
         value="choice 1"
-        label=
-          <>
-            This is a custom label{' '}
-            <a data-testid="mylink" href="link">
-              hello
-            </a>
-          </>
+        label=<>
+          This is a custom label{' '}
+          <a data-testid="mylink" href="link">
+            hello
+          </a>
+        </>
         onChange={handleChange}
       />
     );
@@ -511,9 +509,8 @@ describe('FormCheckbox', () => {
     );
 
     const checkboxContainer = container.querySelector('.dcx-checkbox--error');
-    
+
     expect(checkboxContainer).toBeInTheDocument();
-
   });
 
   it('should not apply error styling when isError is false', () => {
@@ -548,5 +545,4 @@ describe('FormCheckbox', () => {
 
     expect(container.querySelector('.dcx-checkbox--error')).toBeNull();
   });
-
 });

src/formInput/FormInputMasked.tsx

@@ -49,9 +49,8 @@ export const FormInputMasked = ({
   ...props
 }: FormInputMaskedProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
-  const [mask, setMask] = useState<IMask.InputMask<
-    IMask.AnyMaskedOptions
-  > | null>(null);
+  const [mask, setMask] =
+    useState<IMask.InputMask<IMask.AnyMaskedOptions> | null>(null);
 
   useEffect(() => {
     if (mask && value) {
@@ -83,7 +82,7 @@ export const FormInputMasked = ({
       {...props}
       name={name}
       type={type}
-      aria-label={ariaLabel || name}
+      aria-label={ariaLabel}
     />
   );
 };

src/formSelect/FormSelect.tsx

@@ -4,7 +4,6 @@ import {
   OptionGroup,
   Hint,
   Option,
-  Roles,
   Label,
   classNames,
 } from '../common';
@@ -242,7 +241,7 @@ export const FormSelect = ({
         name={name || 'formSelect'}
         id={id || 'formSelect'}
         className={selectClassName}
-        aria-label={ariaLabel || Roles.list}
+        aria-label={ariaLabel}
         onChange={handleChange}
         style={style}
         tabIndex={tabIndex}

stories/changelog.mdx

@@ -43,6 +43,8 @@ import { Meta } from '@storybook/blocks';
 - [Button component - 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)
+- [FormInput - does not offer a capability to not add an aria-label](https://github.com/Capgemini/dcx-react-library/issues/650)
 - [FormInput - should not have a tabindex defined](https://github.com/Capgemini/dcx-react-library/issues/623)
 - [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)