ARIA Role Issue with Day Component in Storybook Ally

[Rikard-Johansson97]

I'm facing an ARIA role issue in react-day-picker when used with Storybook Ally. The error is: ARIA role gridcell is not allowed for given element.

Is there a way to modify the ARIA role for the Day component to fix this?

Error Screenshot:

I changed the role to button and added aria hidden to div to resolve the issue.

import { useRef } from 'react';

import { useDayRender } from 'hooks/useDayRender';

import { Button } from '../Button';

/** Represent the props used by the {@link Day} component. */
export interface DayProps {
  /** The month where the date is displayed. */
  displayMonth: Date;
  /** The date to render. */
  date: Date;
}

/**
 * The content of a day cell – as a button or span element according to its
 * modifiers.
 */
export function Day(props: DayProps): JSX.Element {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);

  if (dayRender.isHidden) {
    return <div aria-hidden></div>; // <-------- Added aria hidden
  }
  if (!dayRender.isButton) {
    return <div {...dayRender.divProps} />; 
  }
  return <Button name="day" ref={buttonRef} {...dayRender.buttonProps} role="button" />; // <-------- changed role
}

[gpbl]

@Rikard-Johansson97 this is an issue planned to be fixed in the next major release - as it would break the existing implementations. I am looking for some workarounds too: maybe a https://react-day-picker.js.org/guides/custom-components?