COMP6080

Web Front-End Programming

Week 7

ReactJS Intro + A11y

ReactJS Intro + A11y

We're going to use this lecture to give you a simple introduction to basic ReactJS App whilst also chatting about some important aspects of A11y to consider.

To do this, we will re-explore an activity from week 4.

Forms and Events

Let's build a simple form for a communication tool that:

• Says "Please invite your friends to join CSE" at the top
• Has a textarea with a welcome message. On blur, if the field is empty, colour the background red until valid.
• Has 2 inputs for emails addresses, with an "Add more" button at the end that populates more fields (2 at a time) until you reach 10 addresses
• Has a submit button that when clicked, provides a summary screen, before allowing the user to cancel or continue.
• The summary screen should contain a friendly image of a dog
• You should take particular care in styling this page nicely whilst also considering key accessibility elements

Feedback