Issue #14.2 Implement Disclosure component with collapsible content

[shuveksha-tuladhar]

Description

This PR introduces a disclosure component that allows users to expand and collapse content sections. The key features include:

• A trigger element that expands/collapses the content when clicked or when the space/enter keys are pressed.
• Dynamic icons that reflect the expanded and collapsed states using chevron icons.
• The trigger includes aria-expanded to reflect the current state and aria-controls to link to the content element.
• The content is hidden and non-focusable when collapsed.
• Proper id attributes for accessible linking between the trigger and content.

It also incorporates several enhancements aimed at improving the user interface and overall experience of the list feature:

• A Share icon has been added to each List, which currently navigates to the Manage List page
• A Delete button has been replaced by of a delete icon on each item.
• The tabular format has been removed, and Purchased dates and times are no longer displayed on each item, simplifying the layout.
• The Create a list input has been repositioned to the top of the page for improved visibility and accessibility.

Related Issue

• Closes #33

Acceptance Criteria

Conceptually, a disclosure is comprised of two parts: a trigger, which users interact with to control the state of the component, and content, which contains the content that is expanded and collapsed by the trigger.

Trigger requirements

• [x] Expands and collapses content when clicked and when the user presses the space or enter keys (button elements automatically handle this keyboard behavior!)
• [x] Shows two distinct icons to correspond with its expanded and collapsed states
• [x] Has an aria-expanded attribute which is 'true' when the disclosure is expanded and 'false' when the disclosure is collapsed
• [x] Has an aria-controls property whose value is the id of the content element

Content requirements

• [x] When closed, users cannot see its children
• [x] When closed, users cannot use the Tab key to navigate to its focusable children (links, buttons, checkboxes)
• [x] Has an id attribute

Type of Changes

• enhancement

Updates

Before

After

Testing Steps / QA Criteria

1. Sign in using a Google account.
2. Verify that the users' list is visible with collapsible content.
3. Ensure that the list contains chevron and share icons.
4. Click on a list name and confirm that the list of items is displayed, with options to toggle between purchase, delete icons, and search filters.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit ce80ef6):

https://tcl-74-smart-shopping-list--pr37-sd-st-14-2-muq6qvkn.web.app

_{(expires Sat, 05 Oct 2024 13:14:19 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}

[shuveksha-tuladhar]

Thank you @dterceroparker . We will work towards implementing light and dark modes once we decide on the CSS framework to use. In the meantime, I have fixed the background color. Additionally, a new issue (#38 ) has been created for the dynamic purchasing icon feature.