Add note taking app to main with steps and tests

[jdwilkin4]

This will go in the new JS and A11y module

This will come after the following lecture block

Understanding aria-expanded, aria-live, and Common ARIA States

What is the aria-expanded attribute and how does it work?
What is the aria-live attribute and how does it work?
What are some common ARIA states used on custom control elements?
What is the aria-controls attribute and how does it work?

We can have a Build a Note Taking App workshop to cover contenteditable and aria-live

Prototype: https://codepen.io/huyenltnguyen/pen/XJJvJBY

The workshop also introduces the focus and blur events.

Steps should be designed to cover the following points:

• These attributes exist and have correct values
• The content of the aria-live div is updated accordingly
• Explain what the focus and blur events are for

It will go here in the order

[jdwilkin4]

This will be blocked for now until JS and A11y modules has been added on main

[huyenltnguyen]

I forgot to add a note to the doc so I'm just adding it here.

Initially I made the app save the note/user input to local storage, but I realized local storage isn't taught up to this point of the curriculum, so I then updated the prototype to just save the input to a variable. I think we might want to add a note about this decision, something like:

In reality, you'll want to save the text to local storage so it persists the next time you visit the app. You'll learn about local storage in later modules.

Screenshot of the module order