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 14.2 Create <Disclosure> component #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

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

Content requirements

• When closed, users cannot see its children
• When closed, users cannot use the Tab key to navigate to its focusable children (links, buttons, checkboxes)
• 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]

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}

[dterceroparker]

Wow! Impressive! You both went above and beyond by even adding icons.

We all know that dark and light mode colors can vary based on computer setups, but I was able to test by highlighting the content (hopefully I didn't miss anything!).

Since we removed the tabular format, my only feedback would be to consider updating the clickable boxes for purchasing, as they don't currently convey the action of purchasing. These could be replaced with purchase icons in a future issue.

Overall, I'm truly impressed!

[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.

[NickRoccodev11]

looks fantastic. very impressive!