Repository: storybookjs/storybook
File: code/core/src/components/components/Button/Button.tsx (TypeScript)

Code before:

  /**
   * A more thorough description of what the Button does, provided to non-sighted users through an
   * aria-describedby attribute. Use sparingly for buttons that trigger complex actions.
   */
  ariaDescription?: string;

  /**
   * An optional keyboard shortcut to enable the button. Will be displayed in the tooltip and passed
   * to aria-keyshortcuts for assistive technologies. The binding of the shortcut and action is
   * managed globally in the manager's shortcuts module.
   */
  shortcut?: API_KeyCollection;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      as = 'button',
      asChild = false,
      animation = 'none',
      size = 'small',
      variant = 'outline',
      padding = 'medium',
      disabled = false,
      hidden = false,
      readOnly = false,
      active,
      onClick,
      ariaLabel,
      ariaDescription = undefined,
      tooltip = undefined,
      shortcut = undefined,
      disableAllTooltips = false,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : as;

    let deprecated = undefined;
    if (!readOnly && (ariaLabel === undefined || ariaLabel === '')) {
      deprecated = 'ariaLabel';
      deprecate(
        `The 'ariaLabel' prop on 'Button' will become mandatory in Storybook 11. Buttons with text content should set 'ariaLabel={false}' to indicate that they are accessible as-is. Buttons without text content must provide a meaningful 'ariaLabel' for accessibility. The button content is: ${props.children}.`
      );

      // TODO in Storybook 11
      // throw new Error(
      //   'Button requires an ARIA label to be accessible. Please provide a valid ariaLabel prop.'
      // );

Review comment (suggestion):
We shouldn't need to make any changes to the Button component. It already spreads HTML attributes it receives (see line 150), so if you pass https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden to it, it should be honoured without any code change.

Code after:

  /**
   * A more thorough description of what the Button does, provided to non-sighted users through an
   * aria-describedby attribute. Use sparingly for buttons that trigger complex actions.
   */
  ariaDescription?: string;

  /**
   * An optional keyboard shortcut to enable the button. Will be displayed in the tooltip and passed
   * to aria-keyshortcuts for assistive technologies. The binding of the shortcut and action is
   * managed globally in the manager's shortcuts module.
   */
  shortcut?: API_KeyCollection;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      as = 'button',
      asChild = false,
      animation = 'none',
      size = 'small',
      variant = 'outline',
      padding = 'medium',
      disabled = false,
      readOnly = false,
      active,
      onClick,
      ariaLabel,
      ariaDescription = undefined,
      tooltip = undefined,
      shortcut = undefined,
      disableAllTooltips = false,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : as;

    let deprecated = undefined;
    if (!readOnly && (ariaLabel === undefined || ariaLabel === '')) {
      deprecated = 'ariaLabel';
      deprecate(
        `The 'ariaLabel' prop on 'Button' will become mandatory in Storybook 11. Buttons with text content should set 'ariaLabel={false}' to indicate that they are accessible as-is. Buttons without text content must provide a meaningful 'ariaLabel' for accessibility. The button content is: ${props.children}.`
      );

      // TODO in Storybook 11
      // throw new Error(
      //   'Button requires an ARIA label to be accessible. Please provide a valid ariaLabel prop.'
      // );
    }