Issue 7: search and filter items in shopping list

NickRoccodev11 commented 1 month ago

Description

This PR adds two functionalities to locate items:

[x] Search Input:
- Semanticlabel that adds keyboard focus to input
  - button that conditionally renders based on searchInputstate
  - button contains an aria-label attribute for providing context for screen readers
[x] Filter Text:
- filter text should match any part of item name
- Only list items that match searchInput text are rendered

Related Issue

closes #7

Acceptance Criteria

[ ] A form is added to the top of the List view, above the shopping list
[ ] The form includes the following elements
- A text field (with semantic !) which narrows down the list as the user types
- When there’s text in the field, some kind of button (e.g., an X) to clear the field. When the field is cleared, the list is reset to its unfiltered state.

Type of Changes

Type
✓	:sparkles: Enhancement
✓	:link: Accessibility

Updates

Before

https://github.com/user-attachments/assets/2e303632-8dc4-429f-a714-65e521876c9e

After

https://github.com/user-attachments/assets/aa67e1c4-92bd-4824-9789-572d11e8310b

Testing Steps / QA Criteria

[ ] Sign in using your Google account.
[ ] Navigate to Home page and click on test-list.
[ ] Navigate to List page and click on 'Search Items' label to focus to the input.
[ ] Inside the input, begin typing an item name.
[ ] The displayed list should filter based on your input.
[ ] To clear the input, click the "x" button.

github-actions[bot] commented 1 month ago

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

https://tcl-74-smart-shopping-list--pr23-dtp-nr-listfiltersea-wkjzss3b.web.app

_{(expires Fri, 06 Sep 2024 15:14:47 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}