Skip to content

Commit f8db9f6

Browse files
bennadelbennadel
committed
Add tab-access for links demo in Angular 7.2.15.
1 parent c09ab4a commit f8db9f6

24 files changed

+7492
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Giving (click) Anchor Links Tab-Access Using A Directive In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/tabbable-anchor-angular7/)
1314
* [Pasting Images Into Your App Using File Blobs And URL.createObjectURL() In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/pasting-images-angular7/)
1415
* [Creating An Inline Auto-Complete Directive Using NgModel And A Control Value Accessor In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/inline-auto-complete-input-angular7/)
1516
* [Desktop Safari Seems To Add Extra Padding To CSS Flexbox Item Inside List Item](https://bennadel.github.io/JavaScript-Demos/demos/safari-li-flexbox-wonky/)

‎demos/tabbable-anchor-angular7/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/

‎demos/tabbable-anchor-angular7/app/app.component.less‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
.actions {
8+
display: flex ;
9+
10+
a {
11+
background-color: #f0f0f0 ;
12+
border-radius: 5px 5px 5px 5px ;
13+
color: red ;
14+
cursor: pointer ;
15+
margin-right: 10px ;
16+
padding: 4px 10px 4px 10px ;
17+
}
18+
}

‎demos/tabbable-anchor-angular7/app/app.component.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "my-app",
10+
styleUrls: [ "./app.component.less" ],
11+
template:
12+
`
13+
<p>
14+
<a href="#">Native Href link</a> (experiment control)
15+
</p>
16+
17+
<p class="actions">
18+
<a (click)="logClick( 'Item one' )">Item One</a>
19+
<a (click)="logClick( 'Item two' )">Item Two</a>
20+
<a (click)="logClick( 'Item three' )">Item Three</a>
21+
<a (click)="logClick( 'Item four' )">Item Four</a>
22+
</p>
23+
24+
<!-- NOTE: The [x-no-tabbing] attribute will cause demo Directive to not omitted. -->
25+
<p class="actions">
26+
<a x-no-tabbing (click)="logClick( 'Item one' )">Item One</a>
27+
<a x-no-tabbing (click)="logClick( 'Item two' )">Item Two</a>
28+
<a x-no-tabbing (click)="logClick( 'Item three' )">Item Three</a>
29+
<a x-no-tabbing (click)="logClick( 'Item four' )">Item Four</a>
30+
</p>
31+
`
32+
})
33+
export class AppComponent {
34+
35+
// I log the click event.
36+
public logClick( value: string ) : void {
37+
38+
console.group( "Clicked Anchor" );
39+
console.log( value );
40+
console.groupEnd();
41+
42+
}
43+
44+
}

‎demos/tabbable-anchor-angular7/app/app.module.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
6+
// Import the application components and services.
7+
import { AppComponent } from "./app.component";
8+
import { TabbingClickDirective } from "./tabbing-click.directive";
9+
10+
// ----------------------------------------------------------------------------------- //
11+
// ----------------------------------------------------------------------------------- //
12+
13+
@NgModule({
14+
imports: [
15+
BrowserModule
16+
],
17+
declarations: [
18+
AppComponent,
19+
TabbingClickDirective
20+
],
21+
bootstrap: [
22+
AppComponent
23+
]
24+
})
25+
export class AppModule {
26+
// ...
27+
}

‎demos/tabbable-anchor-angular7/app/main.htm‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Giving (click) Anchor Links Tab-Access Using A Directive In Angular 7.2.15
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Giving (click) Anchor Links Tab-Access Using A Directive In Angular 7.2.15
14+
</h1>
15+
16+
<my-app>
17+
<p>
18+
<em>Loading files...</em>
19+
</p>
20+
21+
<p>
22+
npm Run Scripts:
23+
</p>
24+
25+
<ul>
26+
<li>
27+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
28+
</li>
29+
<li>
30+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
31+
</li>
32+
</ul>
33+
</my-app>
34+
35+
</body>
36+
</html>

‎demos/tabbable-anchor-angular7/app/main.polyfill.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/es";
4+
import "zone.js/dist/zone.js";

‎demos/tabbable-anchor-angular7/app/main.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
// Import the core angular services.
3+
import { enableProdMode } from "@angular/core";
4+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
5+
6+
// Import the root module for bootstrapping.
7+
import { AppModule } from "./app.module";
8+
9+
// ----------------------------------------------------------------------------------- //
10+
// ----------------------------------------------------------------------------------- //
11+
12+
// NOTE: This ENV value is being provided by Webpack's DefinePlugin. It is populated
13+
// on the mode in which the webpack-cli was invoked.
14+
if ( process.env.NODE_ENV === "production" ) {
15+
16+
enableProdMode();
17+
18+
}
19+
20+
platformBrowserDynamic().bootstrapModule( AppModule );

‎demos/tabbable-anchor-angular7/app/tabbing-click.directive.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
// Import the core angular services.
3+
import { Directive } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Directive({
9+
selector: "a[click]:not([href]):not([role]):not([tabindex]):not([x-no-tabbing])",
10+
host: {
11+
// Adding [tabindex] allows tab-based access to this element. The "0" indicates
12+
// that the tabbing order should follow the native DOM element ordering.
13+
"tabindex": "0",
14+
// Adding [role] tells screen readers that this "link" is really a "button",
15+
// in that it triggers an action, but doesn't navigate to a new resource.
16+
"role": "button",
17+
// Adding (keydown) allows us to translate the Enter and Spacebar keys into a
18+
// "click" event. This is the native behavior of a Button; so, we are trying to
19+
// mimic that behavior for our "link button".
20+
// --
21+
// NOTE: This is perhaps a good "code smell" that we should be using a Button
22+
// instead of a link for this host element.
23+
"(keydown.enter)": "$event.preventDefault() ; $event.target.click() ;",
24+
"(keydown.space)": "$event.preventDefault() ; $event.target.click() ;"
25+
}
26+
})
27+
export class TabbingClickDirective {
28+
// ....
29+
}

‎demos/tabbable-anchor-angular7/build/main.c7a9dfa41c184cf09d4c.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)