Accessible Component Testing with Jest and ARIA

Ensuring web accessibility is crucial for inclusive design. This challenge focuses on implementing tests using Jest to verify that your React components adhere to ARIA (Accessible Rich Internet Applications) best practices. You'll be writing tests that check for the presence and correct usage of ARIA attributes, ensuring your components are usable by individuals with disabilities.

Problem Description

You are tasked with creating a Jest testing suite for a simple React component called CustomButton. This component is intended to be used in various contexts and needs to be accessible. Your tests should verify the following ARIA-related aspects:

• aria-label: When the button has no visible text content (e.g., an icon only), it must have an aria-label attribute providing a descriptive text alternative.
• aria-disabled: If the disabled prop is passed to the component, the aria-disabled attribute should be present and set to "true".
• role="button": The component should have the role="button" attribute, indicating its interactive button nature.
• aria-pressed: If the component has a pressed prop, the aria-pressed attribute should be present and set to the value of the pressed prop (true or false).

The tests should cover scenarios where these attributes are present, absent, or have incorrect values. You'll need to use Jest's screen API to query the DOM and assert the presence and values of the ARIA attributes.

Examples

Example 1:

Input: <CustomButton><Icon/></CustomButton> (where Icon renders nothing visible)
Output: `aria-label` attribute exists on the button element.
Explanation:  Since the button has no visible text, an `aria-label` is required for screen readers.

Example 2:

Input: <CustomButton disabled>Click Me</CustomButton>
Output: `aria-disabled="true"` attribute exists on the button element.
Explanation: When the button is disabled, `aria-disabled` should reflect this state.

Example 3:

Input: <CustomButton pressed={true}>Press Me</CustomButton>
Output: `aria-pressed="true"` attribute exists on the button element.
Explanation: The `aria-pressed` attribute should mirror the value of the `pressed` prop.

Constraints

• You must use Jest and React Testing Library (@testing-library/react and @testing-library/jest-dom).
• The tests should be written in TypeScript.
• The CustomButton component is provided (see below). You are not allowed to modify the component itself.
• Tests should be clear, concise, and well-documented.
• Focus on testing the ARIA attributes; do not test the visual rendering of the button.

Notes

• Consider using screen.getByRole to find the button element.
• Use getAttribute from React Testing Library to check the values of ARIA attributes.
• Think about how to test both positive and negative scenarios (e.g., attribute present/absent, correct/incorrect value).
• The Icon component in Example 1 is assumed to render nothing visible.

Provided CustomButton Component:

import React from 'react';

interface CustomButtonProps {
  children?: React.ReactNode;
  disabled?: boolean;
  pressed?: boolean;
  ariaLabel?: string;
}

const CustomButton: React.FC<CustomButtonProps> = ({ children, disabled, pressed, ariaLabel }) => {
  return (
    <button
      {...(!disabled ? {} : { disabled: true })}
      aria-label={ariaLabel}
      aria-disabled={disabled}
      role="button"
      aria-pressed={pressed}
    >
      {children}
    </button>
  );
};

export default CustomButton;