Skip to content

Commit 738e84a

Browse files
committed
docs(cdk/a11y): update Sass docs for new theming API
This change updates the Sass documentation for cdk/a11y to reflect the new `@use`-based API. Additionally, it adds documentation for the parameters to `cdk.high-contrast`.
1 parent 7508f46 commit 738e84a

File tree

1 file changed

+40
-17
lines changed

1 file changed

+40
-17
lines changed

src/cdk/a11y/a11y.md

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -178,22 +178,24 @@ the host element with `checkChildren` set to `true`. Each of these directives ha
178178

179179
### Styling utilities
180180

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.
184183

185-
```scss
186-
@import '~@angular/cdk/text-field/text-field';
184+
#### Hiding elements in an accessible way
187185

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.
190190

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.
192193

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+
```
197199

198200
```html
199201
<div class="custom-checkbox">
@@ -203,15 +205,36 @@ class:
203205

204206
#### Targeting high contrast users
205207

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.
210214

211215
```scss
216+
@use '~@angular/cdk';
217+
212218
button {
213-
@include cdk-high-contrast {
219+
@include cdk.high-contrast() {
214220
outline: solid 1px;
215221
}
216222
}
217223
```
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

Comments
 (0)