Abstracted expanding button component

[danrparker]

Description

This pull request refactors the timetable expansion logic by introducing a new reusable ExpandingButton component and updating the EventTimetable component to work with it. This change improves code modularity and accessibility, making the timetable expansion more flexible and easier to maintain.

Component Refactoring and Reusability:

• Added a new ExpandingButton component (expanding-button.ce.vue) that encapsulates the expand/collapse button and its associated content, with proper accessibility attributes and slot support for custom content.
• Registered the new ExpandingButton component and added a Storybook story for documentation and testing. [1] [2]

Integration and API Changes:

• Refactored the SocialSportPage to use the new ExpandingButton for the timetable, passing the expanded state to EventTimetable via the is-visible prop. [1] [2]
• Updated the EventTimetable component to remove its own expand/collapse button and related logic, and replaced the isExpanded state and prop with isVisible, which is now controlled by the parent component. All relevant tabindex bindings now use isVisible instead of isExpanded. [1] [2] [3] [4] [5] [6] [7] [8]

Behavior and Accessibility Improvements:

• Ensured that the timetable content and interactive elements are only accessible when visible, improving keyboard navigation and accessibility. [1] [2] [3] [4]
• The timetable now fetches events on mount rather than on expand, ensuring data is loaded promptly.

Checklist

• I accept the contributor license agreement for this repository.
• All active GitHub checks for tests, formatting, and security are passing.
• The correct base branch is being used (if not main).
• A GitHub issue or linear task is linked to this pull request.

[linear]

WEB-536 Abstract expanding button into it's own component

[cloudflare-workers-and-pages]

Deploying website-storybook with    Cloudflare Pages

Latest commit:	5d166b3
Status:	✅  Deploy successful!
Preview URL:	https://e0b4d90e.vue-3-components.pages.dev
Branch Preview URL:	https://dparker-web-536.vue-3-components.pages.dev

View logs

[nathanbillis]

Think this is okay, bit confused about the template part in the social sport page

[danrparker]

Think this is okay, bit confused about the template part in the social sport page

It's to pass the expanded state to the component in the slot.