Skip to content

Commit 2ff88c9

Browse files
committed
feat: update README
1 parent 9038692 commit 2ff88c9

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,49 @@ Example:
5959
</main>
6060
```
6161

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+
62105
### Customizing the definition of a route change
63106

64107
This addon provides support for custom definitions of which route changes should trigger refocusing behavior.

0 commit comments

Comments
 (0)