|
1 | 1 | # Announce
|
2 | 2 |
|
3 |
| -The `$announcer.set` method is available on the property injected into the Vue instance, so it is available everywhere in your application. |
4 |
| -With it it is possible to announce any necessary information and in real time to a person with a screen reader. |
| 3 | +The `$announcer` is available on the property injected into the Vue instance, so it is available everywhere in your application. With it it is possible to announce any necessary information and in real time to a person with a screen reader. |
5 | 4 |
|
6 |
| -### Method ($announcer.set) |
| 5 | +## Methods |
| 6 | + |
| 7 | +### `$announcer.set(message, politiness)` |
| 8 | + |
| 9 | +The `$announcer.set` method is directly responsible for making changes to the announcer. |
| 10 | + |
| 11 | +| Argument | Type | Description |
| 12 | +| ----------------- | --------- | ---------------------------------------------------- |
| 13 | +| `message` | String | Text to be announced. |
| 14 | +| `politiness` | String | Defines the priority of how updates will be handled. ([read more about live regions](/guide/accessibility.html)) |
7 | 15 |
|
8 | 16 | ```vue
|
9 | 17 | <template>
|
@@ -32,12 +40,28 @@ export default {
|
32 | 40 | notify () {
|
33 | 41 | this.errorMessage = 'It\'s error message'
|
34 | 42 | this.$announcer.set(this.errorMessage, 'assertive')
|
35 |
| - // or |
36 |
| - this.$announcer.assertive(this.errorMessage) |
37 | 43 | }
|
38 | 44 | }
|
39 | 45 | }
|
40 | 46 | </script>
|
41 | 47 | ```
|
42 | 48 |
|
| 49 | +### `$announcer.polite(message)` |
| 50 | + |
| 51 | +The `$announcer.polite` is a wrapper of the "set" method that defines the politeness setting as `polite` |
| 52 | + |
| 53 | +```javascript |
| 54 | +// e.g. |
| 55 | +this.$announcer.polite(this.message) |
| 56 | +``` |
| 57 | + |
| 58 | +### `$announcer.assertive(message)` |
| 59 | + |
| 60 | +The `$announcer.assertive` is a wrapper of the "set" method that defines the politeness setting as `assertive` |
| 61 | + |
| 62 | +```javascript |
| 63 | +// e.g. |
| 64 | +this.$announcer.assertive(this.errorMessage) |
| 65 | +``` |
| 66 | + |
43 | 67 | [Learn more about the politeness settings and when to use.](/guide/accessibility.md)
|
0 commit comments