csoumya14 / Accordion-Challenge

Accordion-Challenge Using TypeScript

Overview

Created a re-usabe and accessible accordion component

Source of Inspiration for the design

Final Result

Available Scripts

In the project directory, you can run:

npm install

Downloads and install packages locally

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Features

• The component accepts other components.
• One can open and close the titles listed in the accordion.
• A test is performed for searching a content in a component.
• A test is performed for ensuring the click event handler function is called.
• A test is performed to check the button has "aria-expanded" attribute and it is detected.
• Aria attributes are used to make the component accessible.

Todo

• Add more keyboard support features for improving accessiblity.
• Add smooth transitions between up and down arrow images.
• Add media queries to make the component responsive.

Tech Used/ Dependencies

• This project was bootstrapped with Create React App.

• Dependencies used includes:
  

  1.Styled components
  

  2.TypeScript
  

  3.Jest