Blog

Thanks to Nat Tarnoff for helping me get ready for this talk. We talked about Angular 2’s strange relationship with attributes and addressed the ambiguity on how to work with native DOM elements from within an Angular application. Finally, we ended with a Demo of how to use Visual ARIA with Protractor to catch ARIA… Read more CSUN 2017 – Angular 2: Prototyping & Testing Accessible Widgets

An easy way to get started using ARIA in Angular 2. Also, see how Protractor and Visual ARIA combine to catch ARIA errors in your-end to-end tests. https://github.com/clane/A2A11yQuickstart

Currently, in the Angular 2 documentation, ElementRef is used in attribute directive example despite security warnings. This is quite confusing. I look forward to Renderer losing it’s experimental designation.

Data binding is a relationship between an HTML widget and data source. This relationship allows applications to display data values to a user and respond to user actions (clicks, touches, keystrokes). This relationship facilitates this, without needing to manually push application data values into the HTML, attach event listeners, pull changed values from the screen,… Read more Angular 2 doesn’t like attributes but still offers attribute bindings

https://www.bennadel.com/blog/3088-native-key-combination-event-binding-support-in-angular-2-beta-17.htm keydown.a keydown.b keydown.c keydown.dot keydown.Spacebar keydown.meta.Enter keydown.alt.Enter keydown.control.Enter keydown.shift.Enter keydown.meta.o keydown.meta.s keydown.meta.f keydown.escape The “special key” modifiers are: alt control meta – The Command key on Mac and the Windows key on Windows. shift There are then two replacement keys that are there just keep the syntax from breaking: Space – Or, you can… Read more Angular 2 Beta 17 actually ships with native key-combination support.

Setting focus in Angular 2 requires working with native DOM elements. While this is possible, the documentation recommends against doing so. But making ARIA widgets keyboard accessible requires focus management. So it looks like we have a choice between two APIs, ElementRef and Renderer. First we will look at ElementRef. At this time, it is… Read more Setting focus in Angular 2

Template binding works with properties and events, not attributes. In the world of Angular 2, the only role of attributes is to initialize element and directive state. When we data bind, we’re dealing exclusively with element and directive properties and events. Attributes effectively disappear. See https://angular.io/docs/ts/latest/guide/template-syntax.html