File tree Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Original file line number Diff line number Diff line change @@ -59,6 +59,49 @@ Example:
59
59
</main >
60
60
```
61
61
62
+ Gjs/Gts:
63
+
64
+ ``` gts
65
+ import { NavigationNarrator } from 'ember-a11y-refocus';
66
+
67
+ <template>
68
+ <NavigationNarrator/>
69
+ <!-- other header content-->
70
+ </template>
71
+ ```
72
+
73
+ Template Registry is available for loose mode users:
74
+
75
+ ``` js
76
+ import type EmberA11yRefocusRegistry from ' ember-a11y-refocus/template-registry' ;
77
+
78
+ declare module ' @glint/environment-ember-loose/registry' {
79
+ export default interface Registry
80
+ extends EmberA11yRefocusRegistry{
81
+ }
82
+ }
83
+ ```
84
+
85
+ Minimal CSS is provided to style the skip link and navigation message. You can override these styles in your app's CSS.
86
+
87
+ ``` js
88
+ // ember-cli-build.js
89
+ const app = new EmberApp (defaults, {
90
+ const app = new EmberApp (defaults, {
91
+ sassOptions: {
92
+ includePaths: [' node_modules/ember-a11y-refocus/dist/styles' ],
93
+ },
94
+ });
95
+ });
96
+ ```
97
+
98
+ ``` scss
99
+ // app.scss
100
+
101
+ @use " navigation-narrator.css" ;
102
+ ```
103
+
104
+
62
105
### Customizing the definition of a route change
63
106
64
107
This addon provides support for custom definitions of which route changes should trigger refocusing behavior.
You can’t perform that action at this time.
0 commit comments