Skip to content

Commit a4aca23

Browse files
ok7saiok7sai
committed
docs: update Aria Menu focus/hover style and add context menu example
1 parent e695379 commit a4aca23

21 files changed

Lines changed: 207 additions & 33 deletions

File tree

‎adev/src/content/examples/aria/menu/src/menu-context/app/app.css‎

Lines changed: 81 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,83 @@
1-
h1 {
2-
background: var(--tertiary-contrast);
3-
color: #e0e0e0;
4-
padding: 2rem;
5-
margin: 0;
6-
font-family:
7-
system-ui,
8-
-apple-system,
9-
sans-serif;
10-
font-size: 2rem;
1+
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
2+
3+
:host {
4+
display: flex;
5+
flex-direction: column;
6+
gap: 1.5rem;
7+
width: 100%;
8+
max-width: 40rem;
9+
margin: 0 auto;
10+
font-family: var(--inter-font);
11+
--border-color: color-mix(in srgb, var(--full-contrast) 20%, var(--page-background));
12+
}
13+
14+
.context-zone {
15+
border: 2px dashed var(--border-color);
16+
padding: 6rem 2rem;
1117
text-align: center;
18+
border-radius: 0.75rem;
19+
background-color: color-mix(in srgb, var(--full-contrast) 2%, transparent);
20+
cursor: context-menu;
21+
user-select: none;
22+
font-size: 1rem;
23+
opacity: 0.8;
24+
transition: background-color 0.2s;
25+
}
26+
27+
.context-zone:hover {
28+
background-color: color-mix(in srgb, var(--full-contrast) 4%, transparent);
29+
}
30+
31+
[ngMenu] {
32+
margin: 0;
33+
width: 12rem;
34+
padding: 0.25rem;
35+
border-radius: 0.5rem;
36+
border: 1px solid var(--border-color);
37+
background-color: var(--page-background);
38+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
39+
}
40+
41+
[ngMenu][data-visible='false'] {
42+
display: none;
43+
}
44+
45+
[ngMenuItem] {
46+
outline: none;
47+
display: flex;
48+
cursor: pointer;
49+
align-items: center;
50+
gap: 0.5rem;
51+
padding: 0.5rem;
52+
font-size: 0.875rem;
53+
border-radius: 0.25rem;
54+
}
55+
56+
/* Use proper selectors for hover/focus highlight! */
57+
[ngMenuItem]:not([aria-disabled='true']):hover,
58+
[ngMenuItem]:not([aria-disabled='true']):focus,
59+
[ngMenuItem][aria-expanded='true'] {
60+
background: color-mix(in srgb, var(--border-color) 10%, transparent);
61+
}
62+
63+
[ngMenuItem]:focus {
64+
outline: 2px solid var(--vivid-pink);
65+
outline-offset: -2px;
66+
}
67+
68+
[ngMenuItem] .icon {
69+
opacity: 0.875;
70+
font-size: 1.25rem;
71+
}
72+
73+
[ngMenuItem] .label {
74+
flex: 1;
75+
opacity: 0.875;
76+
font-size: 0.875rem;
77+
}
78+
79+
[ngMenu] .separator {
80+
border-top: 1px solid var(--border-color);
81+
margin: 0.25rem 0;
82+
opacity: 0.25;
1283
}

‎adev/src/content/examples/aria/menu/src/menu-context/app/app.html‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,43 @@
1-
<h1>Coming Soon</h1>
1+
<!-- Target area for right-click -->
2+
<div (contextmenu)="onContextMenu($event)" class="context-zone">
3+
Right-click inside this area to open the context menu.
4+
</div>
5+
6+
<!-- Hidden trigger positioned dynamically at cursor coordinates -->
7+
<div
8+
#triggerEl
9+
ngMenuTrigger
10+
#trigger="ngMenuTrigger"
11+
[menu]="contextMenu()"
12+
style="position: fixed; visibility: hidden;"
13+
[style.left.px]="menuPosition().x"
14+
[style.top.px]="menuPosition().y"
15+
></div>
16+
17+
<!-- Overlay container for the menu -->
18+
<ng-template
19+
[cdkConnectedOverlayOpen]="trigger.expanded()"
20+
[cdkConnectedOverlay]="{origin: triggerEl, usePopover: 'inline'}"
21+
cdkAttachPopoverAsChild
22+
>
23+
<div ngMenu #contextMenu="ngMenu" (itemSelected)="onItemSelected($event)">
24+
<ng-template ngMenuContent>
25+
<div ngMenuItem value="Edit">
26+
<span class="icon material-symbols-outlined" translate="no" aria-hidden="true">edit</span>
27+
<span class="label">Edit</span>
28+
</div>
29+
30+
<div ngMenuItem value="Copy">
31+
<span class="icon material-symbols-outlined" translate="no" aria-hidden="true">content_copy</span>
32+
<span class="label">Copy</span>
33+
</div>
34+
35+
<div role="separator" class="separator"></div>
36+
37+
<div ngMenuItem value="Delete" style="color: var(--vivid-pink);">
38+
<span class="icon material-symbols-outlined" translate="no" aria-hidden="true">delete</span>
39+
<span class="label">Delete</span>
40+
</div>
41+
</ng-template>
42+
</div>
43+
</ng-template>

‎adev/src/content/examples/aria/menu/src/menu-context/app/app.ts‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
1-
import {Component} from '@angular/core';
1+
import {Component, viewChild, signal} from '@angular/core';
2+
import {Menu, MenuContent, MenuItem, MenuTrigger} from '@angular/aria/menu';
3+
import {OverlayModule} from '@angular/cdk/overlay';
24

35
@Component({
46
selector: 'app-root',
57
templateUrl: './app.html',
68
styleUrl: './app.css',
9+
imports: [Menu, MenuContent, MenuItem, MenuTrigger, OverlayModule],
710
})
8-
export class App {}
11+
export class App {
12+
trigger = viewChild.required<MenuTrigger<string>>('trigger');
13+
contextMenu = viewChild<Menu<string>>('contextMenu');
14+
15+
// Position of the context menu
16+
menuPosition = signal({x: 0, y: 0});
17+
18+
onContextMenu(event: MouseEvent) {
19+
event.preventDefault();
20+
21+
// Update position coordinates
22+
this.menuPosition.set({x: event.clientX, y: event.clientY});
23+
24+
// Open the menu via the trigger
25+
this.trigger().open();
26+
}
27+
28+
onItemSelected(value: string) {
29+
console.log(`Action selected: ${value}`);
30+
}
31+
}

‎adev/src/content/examples/aria/menu/src/menu-standalone/app/app.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@
3535
border-radius: 0.25rem;
3636
}
3737

38-
[ngMenuItem][data-active='true'] {
38+
[ngMenuItem]:not([aria-disabled='true']):hover,
39+
[ngMenuItem]:not([aria-disabled='true']):focus,
40+
[ngMenuItem][aria-expanded='true'] {
3941
background: color-mix(in srgb, var(--border-color) 10%, transparent);
4042
}
4143

‎adev/src/content/examples/aria/menu/src/menu-standalone/material/app/app.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@
5353
border-radius: 0.75rem;
5454
}
5555

56-
[ngMenuItem][data-active='true'] {
56+
[ngMenuItem]:not([aria-disabled='true']):hover,
57+
[ngMenuItem]:not([aria-disabled='true']):focus,
58+
[ngMenuItem][aria-expanded='true'] {
5759
color: color-mix(in srgb, var(--vivid-pink) 70%, var(--primary-contrast));
5860
background: color-mix(in srgb, var(--vivid-pink) 5%, transparent);
5961
}

‎adev/src/content/examples/aria/menu/src/menu-standalone/retro/app/app.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@
5858
font-size: 0.875rem;
5959
}
6060

61-
[ngMenuItem][data-active='true'] {
61+
[ngMenuItem]:not([aria-disabled='true']):hover,
62+
[ngMenuItem]:not([aria-disabled='true']):focus,
63+
[ngMenuItem][aria-expanded='true'] {
6264
background: color-mix(in srgb, var(--border-color) 10%, transparent);
6365
}
6466

‎adev/src/content/examples/aria/menu/src/menu-trigger-disabled/app/app.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,11 @@
5252
cursor: default;
5353
}
5454

55-
[ngMenuTrigger]:hover,
56-
[ngMenuItem][data-active='true'] {
55+
[ngMenuTrigger]:not([disabled]):hover,
56+
[ngMenuTrigger][aria-expanded='true'],
57+
[ngMenuItem]:not([aria-disabled='true']):hover,
58+
[ngMenuItem]:not([aria-disabled='true']):focus,
59+
[ngMenuItem][aria-expanded='true'] {
5760
background: color-mix(in srgb, var(--border-color) 10%, transparent);
5861
}
5962

‎adev/src/content/examples/aria/menu/src/menu-trigger-disabled/material/app/app.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@
6666
background: color-mix(in srgb, var(--vivid-pink) 10%, transparent);
6767
}
6868

69-
[ngMenuItem][data-active='true'] {
69+
[ngMenuItem]:not([aria-disabled='true']):hover,
70+
[ngMenuItem]:not([aria-disabled='true']):focus,
71+
[ngMenuItem][aria-expanded='true'] {
7072
color: color-mix(in srgb, var(--vivid-pink) 70%, var(--primary-contrast));
7173
background: color-mix(in srgb, var(--vivid-pink) 5%, transparent);
7274
}

‎adev/src/content/examples/aria/menu/src/menu-trigger-disabled/retro/app/app.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,9 @@
8383
font-size: 0.875rem;
8484
}
8585

86-
[ngMenuItem][data-active='true'] {
86+
[ngMenuItem]:not([aria-disabled='true']):hover,
87+
[ngMenuItem]:not([aria-disabled='true']):focus,
88+
[ngMenuItem][aria-expanded='true'] {
8789
background: color-mix(in srgb, var(--border-color) 10%, transparent);
8890
}
8991

‎adev/src/content/examples/aria/menu/src/menu-trigger/app/app.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,11 @@
4747
border-radius: 0.25rem;
4848
}
4949

50-
[ngMenuTrigger]:hover,
51-
[ngMenuItem][data-active='true'] {
50+
[ngMenuTrigger]:not([disabled]):hover,
51+
[ngMenuTrigger][aria-expanded='true'],
52+
[ngMenuItem]:not([aria-disabled='true']):hover,
53+
[ngMenuItem]:not([aria-disabled='true']):focus,
54+
[ngMenuItem][aria-expanded='true'] {
5255
background: color-mix(in srgb, var(--border-color) 10%, transparent);
5356
}
5457

0 commit comments

Comments
 (0)