Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f8db9f6

Browse filesBrowse files
bennadelbennadel
committed
Add tab-access for links demo in Angular 7.2.15.
1 parent c09ab4a commit f8db9f6
Copy full SHA for f8db9f6
Expand file treeCollapse file tree

24 files changed

+7492
-0
lines changed
Open diff view settings
Collapse file

‎README.md‎

Copy file name to clipboardExpand all lines: README.md
+1Lines changed: 1 addition & 0 deletions
  • Display the source diff
  • Display the rich diff
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/)
Collapse file

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

Copy file name to clipboard
+4Lines 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/
Collapse file

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

Copy file name to clipboard
+18Lines 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+
}
Collapse file

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

Copy file name to clipboard
+44Lines 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+
}
Collapse file

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

Copy file name to clipboard
+27Lines 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+
}
Collapse file

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

Copy file name to clipboard
+36Lines 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>
Collapse file

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

Copy file name to clipboard
+4Lines 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";
Collapse file

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

Copy file name to clipboard
+20Lines 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 );
Collapse file

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

Copy file name to clipboard
+29Lines 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+
}
Collapse file

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

Copy file name to clipboardExpand all lines: demos/tabbable-anchor-angular7/build/main.c7a9dfa41c184cf09d4c.js
+2Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.