2
showcase
Shipped: Comparison table for three plans
I built a responsive and accessible plan comparison page using React. It compares Basic, Pro, and Premium plans across 15 features and includes a “Show differences only” control.
A reviewer can verify the acceptance criteria by:
* Opening the GitHub repository and running
npm install and npm run dev.
* Checking the desktop view to see the semantic comparison table.
* Resizing the browser to 320px and verifying there is no horizontal scrolling. The layout changes to stacked plan cards.
* Using the keyboard Tab key to reach the “Show differences only” checkbox and Space to toggle it.
* Verifying that the checkbox has a visible focus indicator.
* Enabling “Show differences only” and checking that only features with different values between plans are displayed.
* Inspecting the semantic table structure using table, caption, thead, tbody, th, td, and appropriate scope attributes.
* Reviewing the screenshots and demo recording included in the README for a quick visual demonstration of the responsive layout and functionality.
* The README also documents the accessibility, responsive design, and keyboard-testing decisions.
Repository: https://github.com/AteefaAzhar-Syed/accessible-layout
Built for the Verified Frontend Internship · accessible layoutAdd a comment
0/2000