https://github.com/kafkaesc/call-me-ishmael

Call-Me-Ishmael is a demo for how various HTML tags will interact with Angular's click and keyup event handlers. 🐋
https://github.com/kafkaesc/call-me-ishmael

accessibility angular aws bootstrap javascript typescript ux wcag web

Last synced: about 2 months ago
JSON representation

Call-Me-Ishmael is a demo for how various HTML tags will interact with Angular's click and keyup event handlers. 🐋

• Host: GitHub
• URL: https://github.com/kafkaesc/call-me-ishmael
• Owner: kafkaesc
• License: mit
• Created: 2021-08-22T20:56:11.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-13T17:08:34.000Z (12 months ago)
• Last Synced: 2024-01-14T02:23:13.688Z (12 months ago)
• Topics: accessibility, angular, aws, bootstrap, javascript, typescript, ux, wcag, web
• Language: HTML
• Homepage: https://call-me-ishmael.xyz
• Size: 1.66 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Call-Me-Ishmael

Built by Jared Hettinger

This project is a demonstration of how various HTML elements will interact with Angular's (click) and (keyup) event handlers. The main page will display several element labeled by their type and which event handlers are active, e.g., an anchor tag with only a click event handler will be labeled "<a> (click)".

An important behavior to notice is that several elements will be focusable but unresponsive if a user presses enter. This is an obvious source of frustration and an impediment critical enough to be a WCAG issue. It will be necessary to pair identical (keyup.enter) event handlers to maintain UX.

A second important behavior to notice is that a button element will automatically apply the click event handler if a user presses enter. This means that using the (keyup.enter) event handler on button elements the same as other elements will create a double submit bug specific to keyboard use.

In this demo all the buttons act to send a text message to your friend Ishmael, asking him to call you back. If you send him too many messages he will become annoyed and block you. Be careful using the button with both (click) and (keyup.enter) event handlers, because he'll get annoyed twice as fast!

To run:

1. navigate to the project folder

1. `npm install`

1. `ng serve -o`

A working version of this site can be viewed at https://call-me-ishmael.xyz.

The full code for this site can be viewed at https://github.com/kafkaesc/Call-Me-Ishmael.