@@ -178,22 +178,24 @@ the host element with `checkChildren` set to `true`. Each of these directives ha
178
178
179
179
### Styling utilities
180
180
181
- The CDK ` a11y ` package comes with a set of CSS styles that can be used when building accessible
182
- components. To take advantage of them, you have to include the styles in your global stylesheet.
183
- If you're using Material together with the CDK, these styles have been included for you already.
181
+ The ` cdk/a11y ` package comes with Sass mixins that produce styles useful for building
182
+ accessible experiences.
184
183
185
- ``` scss
186
- @import ' ~@angular/cdk/text-field/text-field' ;
184
+ #### Hiding elements in an accessible way
187
185
188
- @include cdk-a11y ();
189
- ```
186
+ Screen readers and other assistive technology skip elements that have ` display: none ` ,
187
+ ` visibility: hidden ` , ` opacity: 0 ` , or ` height: 0 ` , or ` width: 0 ` . In some cases you may need to
188
+ visually hide an element while keeping it available to assistive technology. You can do so using
189
+ the ` a11y-visually-hidden ` Sass mixin, which emits the ` .cdk-visually-hidden ` CSS class.
190
190
191
- #### Hiding elements in an accessible way
191
+ If you're using Angular Material, this class is included automatically by Angular Material's theming
192
+ system. Otherwise, you can include this mixins in a global stylesheet.
192
193
193
- By default, screen readers and other assistive technology will skip elements that have
194
- ` display: none ` , ` visibility: hidden ` , etc. In some cases you may need to visually hide an element,
195
- while keeping it available for assistive technology. You can do so using the ` cdk-visually-hidden `
196
- class:
194
+ ``` scss
195
+ @use ' ~@angular/cdk' ;
196
+
197
+ @include cdk .a11y-visually-hidden ();
198
+ ```
197
199
198
200
``` html
199
201
<div class =" custom-checkbox" >
@@ -203,15 +205,36 @@ class:
203
205
204
206
#### Targeting high contrast users
205
207
206
- The ` a11y ` package offers a mixin that allows you to target users that have the Windows high
207
- contrast mode turned on. To target high contrast users, you can wrap your styles with the
208
- ` cdk-high-contrast ` mixin. The mixin works by targeting a CSS class which is added to the ` body `
209
- by the CDK when high contrast mode is detected at runtime.
208
+ Microsoft Windows includes an accessibility feature called [ Windows High Contrast Mode] [ ] . The
209
+ ` cdk/a11y ` package provides a Sass mixin that lets you define styles that only apply in high
210
+ contrast mode. To create a high contrast style, define your style inside the ` high-contrast ` mixin.
211
+
212
+ The mixin works by targeting a CSS class which is added to the ` body ` by the CDK when high contrast
213
+ mode is detected at runtime, via the ` HighContrastModeDetector ` service.
210
214
211
215
``` scss
216
+ @use ' ~@angular/cdk' ;
217
+
212
218
button {
213
- @include cdk- high-contrast {
219
+ @include cdk . high-contrast () {
214
220
outline : solid 1px ;
215
221
}
216
222
}
217
223
```
224
+
225
+ The ` high-contrast ` mixin accepts two optional parameters, ` $target ` and ` $encapsulation ` .
226
+
227
+ The ` $target ` parameter allows you to specify which variation of high contrast mode your style
228
+ targets. The accepted values are ` active ` (default), ` black-on-white ` , and ` white-on-black ` . These
229
+ values correspond to the supported values for the
230
+ [ ` -ms-high-contrast ` media query] [ ms-high-contrast ] .
231
+
232
+ The ` $encapsulation ` parameter affects how the emitted styles interact with style encapsulation.
233
+ The supported values are ` on ` , ` off ` , and ` any ` . The default value is ` any ` , which works for any
234
+ encapsulation scenario by emitting two selectors. Specifying either ` on ` or ` off ` slightly reduces
235
+ the amount of CSS emitted by limiting the styles to components with encapsulation enabled or
236
+ disabled, respectively. The styles emitted for encapsulated components work for both Angular's
237
+ emulated style encapsulation and for native Shadow DOM encapsulation.
238
+
239
+ [ Windows High Contrast Mode ] : https://support.microsoft.com/en-us/windows/use-high-contrast-mode-in-windows-10-fedc744c-90ac-69df-aed5-c8a90125e696
240
+ [ ms-high-contrast ] : https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
0 commit comments