Accessibility: Button pressed state and lists

packages/react-calendar/src/Flex.tsx

@@ -1,6 +1,6 @@
 import { Children, cloneElement } from 'react';
 
-type FlexProps = React.HTMLAttributes<HTMLDivElement> & {
+type FlexProps = React.HTMLAttributes<HTMLUListElement> & {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   children: React.ReactElement<any>[];
   className?: string;
@@ -26,32 +26,43 @@ export default function Flex({
   ...otherProps
 }: FlexProps) {
   return (
-    <div
+    <ul
       className={className}
       style={{
         display: 'flex',
         flexDirection: direction,
         flexWrap: wrap ? 'wrap' : 'nowrap',
+        margin: 0,
+        padding: 0,
         ...style,
       }}
       {...otherProps}
     >
       {Children.map(children, (child, index) => {
         const marginInlineStart = offset && index === 0 ? toPercent((100 * offset) / count) : null;
 
-        return cloneElement(child, {
-          ...child.props,
-          style: {
-            flexBasis: toPercent(100 / count),
-            flexShrink: 0,
-            flexGrow: 0,
-            overflow: 'hidden',
-            marginLeft: marginInlineStart,
-            marginInlineStart: marginInlineStart,
-            marginInlineEnd: 0,
-          },
-        });
+        return (
+          <li
+            style={{
+              display: 'flex',
+              flexBasis: toPercent(100 / count),
+              flexShrink: 0,
+              flexGrow: 0,
+              overflow: 'hidden',
+              marginLeft: marginInlineStart || undefined,
+              marginInlineStart: marginInlineStart || undefined,
+              marginInlineEnd: 0,
+            }}
+          >
+            {cloneElement(child, {
+              ...child.props,
+              style: {
+                flex: 1,
+              },
+            })}
+          </li>
+        );
       })}
-    </div>
+    </ul>
   );
 }

packages/react-calendar/src/Tile.tsx

@@ -120,6 +120,7 @@ export default function Tile(props: TileProps) {
       onMouseOver={onMouseOver ? () => onMouseOver(date) : undefined}
       style={style}
       type="button"
+      aria-pressed={!!classes?.find((classString) => classString.indexOf('--active') != -1)}
     >
       {formatAbbr ? <abbr aria-label={formatAbbr(locale, date)}>{children}</abbr> : children}
       {tileContent}