Faq focus

[CorinaMurg]

Description

Refactored accordion code to make the component accessible.

Related Issue

None

Acceptance Criteria

• Accordion elements are tab-able
• Each accordion element and its status (collapsed/uncollapsed) is announced by screen reader as a button.
• Only one answer is revealed at a time.

Type of Changes

	Type
✓	🐛 Bug fix
	✨ New feature
✓	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Testing Steps / QA Criteria

To pull our branch locally, run git pull origin faq-focus
Next, run git checkout faq-focus
Install dependencies npm install
Launch the app with npm start

Check for the following:

1. Each accordion element is tab-able
2. Each accordion element is announced by screen reader as a button.
3. The screen reader announces the question and the answer (if open)
4. Only one answer is revealed at a time.
5. A dark outline is visible when an element is in focus.

[github-actions]

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

https://tcl-63-smart-shopping-list--pr36-faq-focus-biq90ed7.web.app

_{(expires Sun, 15 Oct 2023 16:07:16 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 33cd697c9ae2cd133e732431f4d096ea24d56582}

[shangguanwang]

I love how you separate the accordion data and accordion as its own separate components! Tested on my end and the screen reader is working, well done!