UNPKG

@blueprintjs/core/src/_accessibility.scss

Version:

1// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
2// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
3// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
4// and https://github.com/palantir/blueprint/blob/master/PATENTS
5
6/*
7Accessibility
8
9Blueprint strives to provide accessible components out of the box. Many of the JS components
10will apply accessible HTML attributes to support different modes of usage.
11
12Styleguide a11y
13*/
14
15/*
16Focus management
17
18Focus states (that glowy blue outline around the active element) are essential for keyboard
19navigation to indicate which element is currently active. They are less important, and
20occasionally outright intrusive, when using a mouse because you can click wherever you want at
21any time.
22
23Blueprint includes a utility that manages the appearance of focus styles. When enabled, focus
24styles will be hidden while the user interacts using the mouse and will appear when the <kbd class="pt-key">tab</kbd> key
25is pressed to begin keyboard navigation. Try this out for yourself below.
26
27**You must explictly enable this feature in your app (and you probably want to):**
28
29```ts
30import { FocusStyleManager } from "@blueprintjs/core";
31
32FocusStyleManager.onlyShowFocusOnTabs();
33```
34
35Note that the focus style for text inputs (a slightly thicker colored border) is not removed by this
36utility because it is always useful to know where you're typing.
37
38@react-example FocusExample
39
40Styleguide a11y.focus
41*/
42
43/*
44JavaScript API
45
46This behavior is controlled by a singleton instance called `FocusStyleManager` that lives in the
47__@blueprintjs/core__ package. It supports the following public methods:
48
49- `FocusStyleManager.isActive(): boolean`: Returns whether the `FocusStyleManager` is currently running.
50- `FocusStyleManager.onlyShowFocusOnTabs(): void`: Enable behavior which hides focus styles during mouse interaction.
51- `FocusStyleManager.alwaysShowFocus(): void`: Stop this behavior (focus styles are always visible).
52
53Styleguide a11y.focus.js
54*/
55
56:focus {
57  @include focus-outline();
58}
59
60.pt-focus-disabled :focus {
61  // override any focus outline anywhere
62  // stylelint-disable declaration-no-important
63  outline: none !important;
64
65  // special override for checkbox etc which render focus on a separate element
66  ~ .pt-control-indicator {
67    outline: none !important;
68  }
69}
70
71/*
72Color contrast
73
74Colors have been designed to be accessible to as many people as possible, even those who are visually impaired or
75experiencing any kind of colorblindness. Our colors have not only been chosen to go well together but to also adhere to
76[WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards.
77
78Weight: 1
79
80Styleguide a11y.contrast
81*/

1	`// Copyright 2016 Palantir Technologies, Inc. All rights reserved.`
2	`// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy`
3	`// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE`
4	`// and https://github.com/palantir/blueprint/blob/master/PATENTS`
5
6	`/*`
7	`Accessibility`
8
9	`Blueprint strives to provide accessible components out of the box. Many of the JS components`
10	`will apply accessible HTML attributes to support different modes of usage.`
11
12	`Styleguide a11y`
13	`*/`
14
15	`/*`
16	`Focus management`
17
18	`Focus states (that glowy blue outline around the active element) are essential for keyboard`
19	`navigation to indicate which element is currently active. They are less important, and`
20	`occasionally outright intrusive, when using a mouse because you can click wherever you want at`
21	`any time.`
22
23	`Blueprint includes a utility that manages the appearance of focus styles. When enabled, focus`
24	`styles will be hidden while the user interacts using the mouse and will appear when the <kbd class="pt-key">tab</kbd> key`
25	`is pressed to begin keyboard navigation. Try this out for yourself below.`
26
27	`You must explictly enable this feature in your app (and you probably want to):`
28
29	```ts
30	`import { FocusStyleManager } from "@blueprintjs/core";`
31
32	`FocusStyleManager.onlyShowFocusOnTabs();`
33	```
34
35	`Note that the focus style for text inputs (a slightly thicker colored border) is not removed by this`
36	`utility because it is always useful to know where you're typing.`
37
38	`@react-example FocusExample`
39
40	`Styleguide a11y.focus`
41	`*/`
42
43	`/*`
44	`JavaScript API`
45
46	This behavior is controlled by a singleton instance called `FocusStyleManager` that lives in the
47	`__@blueprintjs/core__ package. It supports the following public methods:`
48
49	- `FocusStyleManager.isActive(): boolean`: Returns whether the `FocusStyleManager` is currently running.
50	- `FocusStyleManager.onlyShowFocusOnTabs(): void`: Enable behavior which hides focus styles during mouse interaction.
51	- `FocusStyleManager.alwaysShowFocus(): void`: Stop this behavior (focus styles are always visible).
52
53	`Styleguide a11y.focus.js`
54	`*/`
55
56	`:focus {`
57	`@include focus-outline();`
58	`}`
59
60	`.pt-focus-disabled :focus {`
61	`// override any focus outline anywhere`
62	`// stylelint-disable declaration-no-important`
63	`outline: none !important;`
64
65	`// special override for checkbox etc which render focus on a separate element`
66	`~ .pt-control-indicator {`
67	`outline: none !important;`
68	`}`
69	`}`
70
71	`/*`
72	`Color contrast`
73
74	`Colors have been designed to be accessible to as many people as possible, even those who are visually impaired or`
75	`experiencing any kind of colorblindness. Our colors have not only been chosen to go well together but to also adhere to`
76	`[WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards.`
77
78	`Weight: 1`
79
80	`Styleguide a11y.contrast`
81	`*/`