Ap sm delete item

[andiedoescode]

Description

• Added delete button next to each ListItem.
• deleteHandler function for the buttom to trigger user confirmation window, then the deleteItem function.
• Completed deleteItem function in firebase.js

Note: While completing this issue, lead to potential creation of new tickets (deleting lists, user feedback/error handling UI)

Related Issue

Closes #12

Acceptance Criteria

• The ListItem component renders a button that allows the user to delete an item from their list when clicked
• Clicking the delete button prompts the user to confirm that they really want to delete the item
• The deleteItem function in api/firebase.js has been filled out, and deletes the item from the Firestore database

Type of Changes

new feature

Updates

Before

After

Testing Steps / QA Criteria

• Open deployment preview link OR navigate to branch ap-sm-delete-item.
• Log in to account.
• Select 'dinner' list.
• Navigate to List page.
• Select an item to delete - click the 'X' next to the checkbox.
• Confirm that dialog box pops up to request confirmation of item deletion with the selected item's name.
• When you click 'OK', the item should disappear from the List page.
• Select another item to delete. When the confirmation dialog pops up, click 'Cancel'.
• Ensure that the item does not disappear from the list.

[github-actions]

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

https://tcl-68-smart-shopping-list--pr33-ap-sm-delete-item-oljvk08l.web.app

_{(expires Sun, 24 Mar 2024 01:48:02 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 8cb5d089a99ba9972009993f4dd31796b0cbda84}

[DevinaG007]

Looks good! I do have one nit: I think the delete button could be made more accessible since we're using an X for the text of the button, and it might not be 100% clear. Check out this article on accessible buttons that I found. Otherwise, lovely work as always!

[etiry]

Good work--simple and straightforward solution!

[raaynaldo]

LGTM 🎉

[andiedoescode]

Looks good! I do have one nit: I think the delete button could be made more accessible since we're using an X for the text of the button, and it might not be 100% clear. Check out this article on accessible buttons that I found. Otherwise, lovely work as always!

Very valid nit and likely good practice to incorporate the accessibility assessment throughout the whole process!

[DevinaG007]

Looks good!