[LUNA-1331] [BpkCheckbox] Add ARIA label prop

examples/bpk-component-checkbox/examples.js

@@ -182,6 +182,13 @@ const MixedExample = () => (
   </div>
 );
 
+const AriaLabelExample = () => (
+  <div>
+    <StatefulCheckbox id="abisko" name="abisko" label="Abisko" isChecked aria-label="checkbox 1"/>
+    <StatefulCheckbox id="bunol" name="bunol" label="Buñol" aria-label="checkbox 2"/>
+  </div>
+);
+
 export {
   DefaultExample,
   IndeterminateExample,
@@ -194,4 +201,5 @@ export {
   SmallLabelRequiredExample,
   SmallLabelInvalidExample,
   MixedExample,
+  AriaLabelExample,
 };

examples/bpk-component-checkbox/stories.js

@@ -29,6 +29,7 @@ import {
   RequiredExample,
   SmallLabelExample,
   MixedExample,
+  AriaLabelExample,
 } from './examples';
 
 export default {
@@ -44,9 +45,10 @@ export const White = WhiteExample;
 export const Disabled = DisabledExample;
 export const Required = RequiredExample;
 export const SmallLabel = SmallLabelExample;
+export const AriaLabel = AriaLabelExample;
 
 export const VisualTest = MixedExample;
 export const VisualTestWithZoom = VisualTest.bind({});
 VisualTestWithZoom.args = {
   zoomEnabled: true
-};
+};

packages/bpk-component-checkbox/src/BpkCheckbox.js

@@ -37,6 +37,7 @@ type Props = {
   smallLabel: boolean,
   valid: ?boolean,
   checked: boolean,
+  ariaLabel: ?string,
   /**
    * The indeterminate prop is only a visual clue, it does not affect the checked state of the checkbox. If `indeterminate` is flagged then the checkbox will be displayed with a minus sign in the box.  This is used when there is a checkbox group and the parent displays this state when not all child checkboxes are selected.
    */
@@ -45,6 +46,7 @@ type Props = {
 
 const BpkCheckbox = (props: Props) => {
   const {
+    ariaLabel,
     checked,
     className,
     disabled,
@@ -88,7 +90,7 @@ const BpkCheckbox = (props: Props) => {
         className={inputClasses}
         name={name}
         disabled={disabled}
-        aria-label={label}
+        aria-label={ariaLabel || label}
         aria-invalid={isInvalid}
         data-indeterminate={indeterminate}
         ref={(e) => {
@@ -113,6 +115,7 @@ const BpkCheckbox = (props: Props) => {
 BpkCheckbox.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
+  ariaLabel: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   white: PropTypes.bool,

packages/bpk-component-checkbox/src/accessibility-test.js

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 import BpkCheckbox from './BpkCheckbox';
@@ -31,4 +29,16 @@ describe('BpkCheckbox accessibility tests', () => {
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
+
+  it('should render using label as aria-label if no ariaLabel prop provided', async () => {
+    render(<BpkCheckbox name="checkbox" label="Prefer directs" />);
+    const label = screen.getByLabelText('Prefer directs');
+    expect(label).toBeInTheDocument();
+  });
+
+  it('should render using ariaLabel prop as aria-label if prop provided', async () => {
+    render(<BpkCheckbox name="checkbox" label="Prefer directs" ariaLabel="aria label test string"/>);
+    const ariaLabel = screen.getByLabelText('aria label test string');
+    expect(ariaLabel).toBeInTheDocument();
+  });
 });