@eccenca/gui-elements 25.1.0-rc.2 → 25.1.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/dist/cjs/components/Tooltip/Tooltip.js +11 -7
  3. package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
  4. package/dist/esm/components/Tooltip/Tooltip.js +11 -7
  5. package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/_shame.scss +1 -35
  8. package/src/common/scss/_accessibility-defaults.scss +101 -0
  9. package/src/components/Application/_header.scss +21 -9
  10. package/src/components/Application/_sidebar.scss +6 -0
  11. package/src/components/Application/_toolbar.scss +3 -3
  12. package/src/components/AutoSuggestion/AutoSuggestion.scss +3 -1
  13. package/src/components/Checkbox/checkbox.scss +9 -1
  14. package/src/components/Dialog/dialog.scss +8 -0
  15. package/src/components/Link/link.scss +5 -6
  16. package/src/components/MultiSuggestField/_multisuggestfield.scss +18 -0
  17. package/src/components/RadioButton/radiobutton.scss +5 -1
  18. package/src/components/TextField/textfield.scss +20 -0
  19. package/src/components/Tooltip/Tooltip.test.tsx +40 -5
  20. package/src/components/Tooltip/Tooltip.tsx +14 -10
  21. package/src/configuration/stories/customproperties.stories.tsx +4 -0
  22. package/src/extensions/codemirror/_codemirror.scss +18 -28
  23. package/src/index.scss +1 -0
package/CHANGELOG.md CHANGED
@@ -57,6 +57,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
57
57
  - use the latest provided `onChange` function
58
58
  - `<TextField />`, `<TextArea />`
59
59
  - fix emoji false-positives in invisible character detection
60
+ - Focus outlines
61
+ - we use again bold focus outlines for input elements
62
+ - they are also used for clickable elements that are focused via keyboard (tab navigation)
60
63
 
61
64
  ### Changed
62
65
 
package/dist/cjs/components/Tooltip/Tooltip.js CHANGED
@@ -39,6 +39,7 @@ const Tooltip = (_a) => {
39
39
  react_1.default.useEffect(() => {
40
40
  if (placeholderRef.current !== null) {
41
41
  const swap = (ev) => {
42
+ var _a;
42
43
  if (swapDelay.current) {
43
44
  clearTimeout(swapDelay.current);
44
45
  }
@@ -51,13 +52,16 @@ const Tooltip = (_a) => {
51
52
  }, swapDelayTime);
52
53
  if (placeholderRef.current !== null) {
53
54
  const eventType = ev.type === "focusin" ? "focusout" : "mouseleave";
54
- placeholderRef.current.addEventListener(eventType, () => {
55
- if ((eventType === "focusout" && eventMemory.current === "afterfocus") ||
56
- (eventType === "mouseleave" && eventMemory.current === "afterhover")) {
57
- eventMemory.current = null;
58
- }
59
- clearTimeout(swapDelay.current);
60
- });
55
+ const innerFocusTarget = (_a = placeholderRef.current.querySelector("[tabindex='0']")) === null || _a === void 0 ? void 0 : _a.children[0];
56
+ if (innerFocusTarget) {
57
+ innerFocusTarget.addEventListener(eventType, () => {
58
+ if ((eventType === "focusout" && eventMemory.current === "afterfocus") ||
59
+ (eventType === "mouseleave" && eventMemory.current === "afterhover")) {
60
+ eventMemory.current = null;
61
+ }
62
+ clearTimeout(swapDelay.current);
63
+ });
64
+ }
61
65
  }
62
66
  };
63
67
  placeholderRef.current.addEventListener("mouseenter", swap);
package/dist/cjs/components/Tooltip/Tooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
package/dist/esm/components/Tooltip/Tooltip.js CHANGED
@@ -60,6 +60,7 @@ export var Tooltip = function (_a) {
60
60
  React.useEffect(function () {
61
61
  if (placeholderRef.current !== null) {
62
62
  var swap_1 = function (ev) {
63
+ var _a;
63
64
  if (swapDelay.current) {
64
65
  clearTimeout(swapDelay.current);
65
66
  }
@@ -72,13 +73,16 @@ export var Tooltip = function (_a) {
72
73
  }, swapDelayTime);
73
74
  if (placeholderRef.current !== null) {
74
75
  var eventType_1 = ev.type === "focusin" ? "focusout" : "mouseleave";
75
- placeholderRef.current.addEventListener(eventType_1, function () {
76
- if ((eventType_1 === "focusout" && eventMemory.current === "afterfocus") ||
77
- (eventType_1 === "mouseleave" && eventMemory.current === "afterhover")) {
78
- eventMemory.current = null;
79
- }
80
- clearTimeout(swapDelay.current);
81
- });
76
+ var innerFocusTarget = (_a = placeholderRef.current.querySelector("[tabindex='0']")) === null || _a === void 0 ? void 0 : _a.children[0];
77
+ if (innerFocusTarget) {
78
+ innerFocusTarget.addEventListener(eventType_1, function () {
79
+ if ((eventType_1 === "focusout" && eventMemory.current === "afterfocus") ||
80
+ (eventType_1 === "mouseleave" && eventMemory.current === "afterhover")) {
81
+ eventMemory.current = null;
82
+ }
83
+ clearTimeout(swapDelay.current);
84
+ });
85
+ }
82
86
  }
83
87
  };
84
88
  placeholderRef.current.addEventListener("mouseenter", swap_1);
package/dist/esm/components/Tooltip/Tooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@eccenca/gui-elements",
3
3
  "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
4
- "version": "25.1.0-rc.2",
4
+ "version": "25.1.0-rc.3",
5
5
  "license": "Apache-2.0",
6
6
  "homepage": "https://github.com/eccenca/gui-elements",
7
7
  "bugs": "https://github.com/eccenca/gui-elements/issues",
package/src/_shame.scss CHANGED
@@ -1,31 +1,13 @@
1
1
  // Add stuff to test fast and dirty.
2
2
  // This file should not contain any styles.
3
3
 
4
- .#{$prefix}--assistive-text,
5
- .#{$prefix}--visually-hidden {
6
- /*
7
- TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers
8
- but we cannot use it directly because of other included rules there.
9
- */
10
- position: absolute;
11
- width: 1px;
12
- height: 1px;
13
- padding: 0;
14
- margin: -1px;
15
- overflow: hidden;
16
- clip: rect(0, 0, 0, 0);
17
- white-space: nowrap;
18
- visibility: inherit;
19
- border: 0;
20
- }
21
-
22
4
  /*
23
5
  WORKAROUND: thinner scrollbars
24
6
  */
25
7
 
26
8
  * {
27
- scrollbar-width: thin;
28
9
  scrollbar-color: #bbb transparent;
10
+ scrollbar-width: thin;
29
11
 
30
12
  &::-webkit-scrollbar {
31
13
  width: 0.25rem;
@@ -38,19 +20,3 @@
38
20
  border-radius: 0.125rem;
39
21
  }
40
22
  }
41
-
42
- /*
43
- CHANGE: default focus behaviour
44
- */
45
-
46
- :focus,
47
- input:focus-visible,
48
- textarea:focus-visible {
49
- outline: none;
50
- outline-offset: 0;
51
- }
52
-
53
- :focus-visible {
54
- outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
55
- outline-offset: 1px;
56
- }
package/src/common/scss/_accessibility-defaults.scss ADDED
@@ -0,0 +1,101 @@
1
+ .#{$prefix}--assistive-text,
2
+ .#{$prefix}--visually-hidden {
3
+ /*
4
+ originally from ~@carbon/styles/scss/css--helpers
5
+ but we cannot use it directly because of other included rules there.
6
+ */
7
+ position: absolute;
8
+ visibility: inherit;
9
+ width: 1px;
10
+ height: 1px;
11
+ padding: 0;
12
+ margin: -1px;
13
+ overflow: hidden;
14
+ white-space: nowrap;
15
+ border: 0;
16
+ clip-path: rect(0, 0, 0, 0);
17
+ }
18
+
19
+ /*
20
+ default focus indicator
21
+ */
22
+
23
+ :root {
24
+ --#{$eccgui}-a11y-outline-color: #{eccgui-color-var("layout", "magenta", "900")};
25
+ --#{$eccgui}-a11y-outline-style: solid;
26
+ --#{$eccgui}-a11y-outline-width: #{0.25 * $eccgui-size-block-whitespace};
27
+
28
+ // shift outline min 2px inside element to have a minimum 2px outline even with hidden overflow
29
+ --#{$eccgui}-a11y-outline-offset: min(calc(var(--#{$eccgui}-a11y-outline-width) * -0.5), -2px);
30
+ }
31
+
32
+ @keyframes outline-bounce {
33
+ 0% {
34
+ outline-width: calc(var(--#{$eccgui}-a11y-outline-width) * 0.5);
35
+ outline-color: var(--#{$eccgui}-a11y-outline-color);
36
+ outline-offset: var(--#{$eccgui}-a11y-outline-offset);
37
+ }
38
+
39
+ 33.3% {
40
+ outline-color: var(--#{$eccgui}-a11y-outline-color);
41
+ outline-offset: calc(var(--#{$eccgui}-a11y-outline-width));
42
+ }
43
+
44
+ 66.6% {
45
+ outline-color: currentcolor;
46
+ outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -2);
47
+ }
48
+
49
+ 100% {
50
+ outline-width: var(--#{$eccgui}-a11y-outline-width);
51
+ outline-color: var(--#{$eccgui}-a11y-outline-color);
52
+ outline-offset: var(--#{$eccgui}-a11y-outline-offset);
53
+ }
54
+ }
55
+
56
+ @mixin focus-by-keyboard-static {
57
+ // strong visual focus indication for keyboard devices
58
+
59
+ outline: var(--#{$eccgui}-a11y-outline-color) var(--#{$eccgui}-a11y-outline-style)
60
+ var(--#{$eccgui}-a11y-outline-width);
61
+ outline-offset: var(--#{$eccgui}-a11y-outline-offset);
62
+ }
63
+
64
+ @mixin focus-by-keyboard-animation {
65
+ @media (prefers-reduced-motion: no-preference) {
66
+ animation: outline-bounce 0.5s;
67
+ }
68
+ }
69
+
70
+ .#{$eccgui}-a11y-focus-by-keyboard-animated {
71
+ @include focus-by-keyboard-static;
72
+ @include focus-by-keyboard-animation;
73
+ }
74
+
75
+ .#{$eccgui}-a11y-focus-by-keyboard-static {
76
+ @include focus-by-keyboard-static;
77
+
78
+ animation: none;
79
+ }
80
+
81
+ @mixin focus-by-pointer {
82
+ // limited visual focus indication for pointer devices
83
+
84
+ outline: transparent none 0;
85
+ outline-offset: 0;
86
+ }
87
+
88
+ .#{$eccgui}-a11y-focus-by-pointer {
89
+ @include focus-by-pointer;
90
+ }
91
+
92
+ *[tabindex]:not([tabindex^="-"]):focus-visible,
93
+ :focus-visible {
94
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
95
+ }
96
+
97
+ input:focus:not(:focus-visible),
98
+ textarea:focus:not(:focus-visible),
99
+ :focus:not(:focus-visible) {
100
+ @extend .#{$eccgui}-a11y-focus-by-pointer;
101
+ }
package/src/components/Application/_header.scss CHANGED
@@ -190,15 +190,27 @@ a.#{$prefix}--header__menu-item:active {
190
190
  }
191
191
 
192
192
  // $shell-header-focus
193
- .#{$prefix}--header__action:focus,
194
- .#{$prefix}--header__action.#{$prefix}--btn--icon-only:focus,
195
- .#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
196
- a.#{$prefix}--header__name:focus,
197
- a.#{$prefix}--header__menu-item:focus {
198
- outline: 1px dotted $shell-header-focus;
199
- outline-offset: -1px;
200
- border: none;
201
- box-shadow: none;
193
+ .#{$prefix}--header__action,
194
+ .#{$prefix}--header__action.#{$prefix}--btn--icon-only,
195
+ .#{$prefix}--header__action.#{$prefix}--btn--primary,
196
+ a.#{$prefix}--header__name,
197
+ a.#{$prefix}--header__menu-item {
198
+ &:focus {
199
+ @extend .#{$eccgui}-a11y-focus-by-pointer;
200
+
201
+ border: none;
202
+ box-shadow: none;
203
+ }
204
+
205
+ &,
206
+ .#{$prefix}--popover--open & {
207
+ &:focus-visible {
208
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
209
+
210
+ border: none;
211
+ box-shadow: none;
212
+ }
213
+ }
202
214
  }
203
215
  .#{$prefix}--header__menu-title[aria-expanded="true"] {
204
216
  color: $shell-header-focus;
package/src/components/Application/_sidebar.scss CHANGED
@@ -28,3 +28,9 @@ $ui-02: $eccgui-color-workspace-background !default;
28
28
  padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px));
29
29
  transition: none;
30
30
  }
31
+
32
+ .#{$eccgui}-application__menu__toggler.cds--header__action {
33
+ &:focus-visible {
34
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
35
+ }
36
+ }
package/src/components/Application/_toolbar.scss CHANGED
@@ -51,18 +51,18 @@ $shell-panel-focus: $shell-header-focus !default;
51
51
  .#{$eccgui}-application__toolbar__panel-backdrop--onleave,
52
52
  .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
53
53
  position: fixed;
54
- inset: mini-units(8) 0 0 0;
54
+ inset: mini-units(8) 0 0;
55
55
  }
56
56
 
57
57
  .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
58
58
  top: 0;
59
59
  }
60
60
 
61
- // add rules for own class identiiers
61
+ // add rules for own class identifiers
62
62
 
63
63
  .#{$eccgui}-application__toolbar {
64
- flex-basis: auto;
65
64
  flex-grow: 0;
65
+ flex-basis: auto;
66
66
 
67
67
  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
68
68
  // for some reason the original calculation still moves out the tooltip
package/src/components/AutoSuggestion/AutoSuggestion.scss CHANGED
@@ -39,7 +39,9 @@
39
39
  }
40
40
 
41
41
  &:has(.cm-editor.cm-focused) {
42
- box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
42
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
43
+
44
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
43
45
  }
44
46
 
45
47
  .cm-editor {
package/src/components/Checkbox/checkbox.scss CHANGED
@@ -47,7 +47,7 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
47
47
  }
48
48
 
49
49
  input:focus ~ .#{$ns}-control-indicator {
50
- outline-offset: 0;
50
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
51
51
  }
52
52
 
53
53
  input:disabled ~ .#{$ns}-control-indicator,
@@ -72,6 +72,14 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
72
72
  background-image: url("~@carbon/icons/svg/32/checkbox--indeterminate.svg");
73
73
  }
74
74
  }
75
+
76
+ &.#{$ns}-switch {
77
+ --#{$eccgui}-a11y-outline-offset: 1px;
78
+
79
+ input:focus ~ .#{$ns}-control-indicator {
80
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
81
+ }
82
+ }
75
83
  }
76
84
 
77
85
  .#{$ns}-control-indicator + *,
package/src/components/Dialog/dialog.scss CHANGED
@@ -22,6 +22,14 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
22
22
  z-index: $eccgui-zindex-modals;
23
23
  }
24
24
 
25
+ .#{$ns}-overlay-start-focus-trap,
26
+ .#{$ns}-overlay-end-focus-trap {
27
+ // do not show focus on trap elements, we need to fix keeping focus on modal elements differently later
28
+ &[tabindex]:not([tabindex^="-"]):focus-visible {
29
+ @extend .#{$eccgui}-a11y-focus-by-pointer;
30
+ }
31
+ }
32
+
25
33
  .#{$eccgui}-dialog__backdrop {
26
34
  background-color: $eccgui-color-modal-backdrop;
27
35
  }
package/src/components/Link/link.scss CHANGED
@@ -31,13 +31,12 @@
31
31
  }
32
32
  }
33
33
 
34
- &:focus {
35
- outline: none;
36
- outline-offset: 0;
34
+ &:focus:not(.#{$prefix}--link--disabled) {
35
+ @include focus-by-pointer;
37
36
  }
38
37
 
39
- &:focus-visible {
40
- outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
41
- outline-offset: 1px;
38
+ &:focus-visible:not(.#{$prefix}--link--disabled) {
39
+ @include focus-by-keyboard-static;
40
+ @include focus-by-keyboard-animation;
42
41
  }
43
42
  }
package/src/components/MultiSuggestField/_multisuggestfield.scss CHANGED
@@ -6,3 +6,21 @@
6
6
  max-height: var(--eccgui-multisuggestfield-max-height, 45vh);
7
7
  }
8
8
  }
9
+
10
+ .#{$eccgui}-multisuggestfield {
11
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
12
+
13
+ &.#{$ns}-intent-success {
14
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
15
+ }
16
+ &.#{$ns}-intent-warning {
17
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
18
+ }
19
+ &.#{$ns}-intent-danger {
20
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
21
+ }
22
+
23
+ &:focus-within {
24
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
25
+ }
26
+ }
package/src/components/RadioButton/radiobutton.scss CHANGED
@@ -1,6 +1,10 @@
1
1
  // Checkbox need to be imported before, we won't double it here currently
2
2
 
3
3
  .#{$ns}-control {
4
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
5
+ --#{$eccgui}-a11y-outline-width: 2px;
6
+ --#{$eccgui}-a11y-outline-offset: 0;
7
+
4
8
  &.#{$ns}-radio {
5
9
  input ~ .#{$ns}-control-indicator,
6
10
  input:checked ~ .#{$ns}-control-indicator {
@@ -8,7 +12,7 @@
8
12
  }
9
13
 
10
14
  input:focus ~ .#{$ns}-control-indicator {
11
- outline-offset: 1px;
15
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
12
16
  }
13
17
 
14
18
  input:disabled ~ .#{$ns}-control-indicator,
package/src/components/TextField/textfield.scss CHANGED
@@ -103,6 +103,8 @@ $eccgui-map-intent-bgcolors: (
103
103
  }
104
104
 
105
105
  .#{$ns}-input {
106
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
107
+
106
108
  .#{$ns}-input-group[class*="#{$eccgui}-intent--"] & {
107
109
  animation-duration: 1s;
108
110
  animation-delay: 0.5s;
@@ -111,16 +113,23 @@ $eccgui-map-intent-bgcolors: (
111
113
  @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
112
114
  .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
113
115
  background-color: eccgui-color-var("semantic", $each-intent, "100");
116
+
117
+ --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
118
+
114
119
  animation-name: intent-state-flash-#{$each-intent};
115
120
  }
116
121
  }
117
122
 
118
123
  .#{$ns}-input-group.#{$eccgui}-intent--info & {
119
124
  @include pt-input-intent($eccgui-color-info-text);
125
+
126
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
120
127
  }
121
128
 
122
129
  .#{$ns}-input-group.#{$eccgui}-intent--accent & {
123
130
  @include pt-input-intent($eccgui-color-primary);
131
+
132
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
124
133
  }
125
134
 
126
135
  .#{$ns}-input-group.#{$eccgui}-intent--neutral & {
@@ -138,6 +147,10 @@ $eccgui-map-intent-bgcolors: (
138
147
 
139
148
  text-decoration: line-through $eccgui-color-danger-text 2px;
140
149
  }
150
+
151
+ &:focus-visible {
152
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
153
+ }
141
154
  }
142
155
 
143
156
  .#{$eccgui}-textarea {
@@ -151,16 +164,23 @@ $eccgui-map-intent-bgcolors: (
151
164
  @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
152
165
  &.#{$eccgui}-intent--#{$each-intent} {
153
166
  background-color: eccgui-color-var("semantic", $each-intent, "100");
167
+
168
+ --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
169
+
154
170
  animation-name: intent-state-flash-#{$each-intent};
155
171
  }
156
172
  }
157
173
 
158
174
  &.#{$eccgui}-intent--info {
159
175
  @include pt-input-intent($eccgui-color-info-text);
176
+
177
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
160
178
  }
161
179
 
162
180
  &.#{$eccgui}-intent--accent {
163
181
  @include pt-input-intent($eccgui-color-primary);
182
+
183
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
164
184
  }
165
185
 
166
186
  &.#{$eccgui}-intent--neutral {
package/src/components/Tooltip/Tooltip.test.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { fireEvent, render, screen, waitFor } from "@testing-library/react";
3
+ import userEvent from "@testing-library/user-event";
3
4
 
4
5
  import "@testing-library/jest-dom";
5
6
 
@@ -45,19 +46,53 @@ describe("Tooltip", () => {
45
46
  fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
46
47
  checkForPlaceholderClass(container, 1);
47
48
  await waitFor(() => {
48
- expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
49
49
  checkForPlaceholderClass(container, 0);
50
50
  });
51
+ expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
51
52
  });
52
53
  it("should be displayed on two continues mouse hover when placeholder is used", async () => {
53
54
  const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
54
55
  fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
55
56
  checkForPlaceholderClass(container, 1);
56
- await waitFor(async () => {
57
- expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
57
+ await waitFor(() => {
58
+ checkForPlaceholderClass(container, 0);
59
+ });
60
+ expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
61
+ fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
62
+ expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
63
+ });
64
+ it("should be displayed on focus when no placeholder is used", async () => {
65
+ // Blueprint ignores focus events with null relatedTarget (page-refocus guard), so we tab
66
+ // from a preceding element to produce a non-null relatedTarget.
67
+ render(
68
+ <>
69
+ <button>previous element</button>
70
+ <Tooltip {...TooltipStory.args} usePlaceholder={false} />
71
+ </>
72
+ );
73
+ const user = userEvent.setup();
74
+ await user.tab(); // focuses "previous element"
75
+ await user.tab(); // focuses tooltip target, relatedTarget is non-null → Blueprint opens
76
+ expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
77
+ });
78
+ it("should be displayed after keyboard focus when placeholder is used", async () => {
79
+ // Use a focusable button child so refocus() can call .focus() on it after the swap.
80
+ // Tab from a preceding element so relatedTarget is non-null when Blueprint handles focus.
81
+ const { container } = render(
82
+ <>
83
+ <button>previous element</button>
84
+ <Tooltip {...TooltipStory.args} usePlaceholder={true}>
85
+ <button>tooltip target</button>
86
+ </Tooltip>
87
+ </>
88
+ );
89
+ const user = userEvent.setup();
90
+ await user.tab(); // focuses "previous element"
91
+ await user.tab(); // focuses placeholder inner button, triggers focusin swap
92
+ checkForPlaceholderClass(container, 1);
93
+ await waitFor(() => {
58
94
  checkForPlaceholderClass(container, 0);
59
- fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
60
- expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
61
95
  });
96
+ expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
62
97
  });
63
98
  });
package/src/components/Tooltip/Tooltip.tsx CHANGED
@@ -50,7 +50,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
50
50
  swapPlaceholderDelay?: number;
51
51
  }
52
52
 
53
- export type TooltipSize = "small" | "medium" | "large"
53
+ export type TooltipSize = "small" | "medium" | "large";
54
54
 
55
55
  export const Tooltip = ({
56
56
  children,
@@ -100,15 +100,19 @@ export const Tooltip = ({
100
100
  }, swapDelayTime);
101
101
  if (placeholderRef.current !== null) {
102
102
  const eventType = ev.type === "focusin" ? "focusout" : "mouseleave";
103
- (placeholderRef.current as HTMLElement).addEventListener(eventType, () => {
104
- if (
105
- (eventType === "focusout" && eventMemory.current === "afterfocus") ||
106
- (eventType === "mouseleave" && eventMemory.current === "afterhover")
107
- ) {
108
- eventMemory.current = null;
109
- }
110
- clearTimeout(swapDelay.current as NodeJS.Timeout);
111
- });
103
+ const innerFocusTarget = (placeholderRef.current as HTMLElement).querySelector("[tabindex='0']")
104
+ ?.children[0];
105
+ if (innerFocusTarget) {
106
+ (innerFocusTarget as HTMLElement).addEventListener(eventType, () => {
107
+ if (
108
+ (eventType === "focusout" && eventMemory.current === "afterfocus") ||
109
+ (eventType === "mouseleave" && eventMemory.current === "afterhover")
110
+ ) {
111
+ eventMemory.current = null;
112
+ }
113
+ clearTimeout(swapDelay.current as NodeJS.Timeout);
114
+ });
115
+ }
112
116
  }
113
117
  };
114
118
  (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
package/src/configuration/stories/customproperties.stories.tsx CHANGED
@@ -34,6 +34,10 @@ const groups: { title: string; filterName: (name: string) => boolean }[] = [
34
34
  title: "Color aliases",
35
35
  filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`),
36
36
  },
37
+ {
38
+ title: "Accessibility",
39
+ filterName: (name) => name.startsWith(`--${eccgui}-a11y`),
40
+ },
37
41
  {
38
42
  title: "Opacity",
39
43
  filterName: (name) => name.startsWith(`--${eccgui}-opacity`),
package/src/extensions/codemirror/_codemirror.scss CHANGED
@@ -19,13 +19,13 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
19
19
 
20
20
  &__toolbar {
21
21
  position: absolute;
22
- z-index: 3;
23
- left: 1px;
24
- right: 1px;
25
22
  top: 1px;
26
- border-radius: $pt-border-radius $pt-border-radius 0 0;
27
- border-bottom: solid 1px $eccgui-color-codeeditor-separation;
23
+ right: 1px;
24
+ left: 1px;
25
+ z-index: 3;
28
26
  background-color: $eccgui-color-codeeditor-background;
27
+ border-bottom: solid 1px $eccgui-color-codeeditor-separation;
28
+ border-radius: $pt-border-radius $pt-border-radius 0 0;
29
29
  }
30
30
 
31
31
  &--has-toolbar {
@@ -37,9 +37,9 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
37
37
  &__preview {
38
38
  position: absolute;
39
39
  top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important;
40
- left: 1px;
41
40
  right: 1px;
42
41
  bottom: 1px;
42
+ left: 1px;
43
43
  z-index: 2;
44
44
  padding: $button-padding;
45
45
  overflow-y: auto;
@@ -50,12 +50,12 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
50
50
  .cm-editor {
51
51
  width: 100%;
52
52
  height: $eccgui-size-codeeditor-height;
53
- clip-path: unset !important; // we may check later why they set inset(0) now
54
53
  background-color: $eccgui-color-codeeditor-background;
55
54
  border-radius: $pt-border-radius;
56
55
 
57
56
  // get them a "border" like input boxes from blueprintjs
58
57
  box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
58
+ clip-path: unset !important; // we may check later why they set inset(0) now
59
59
 
60
60
  &.#{eccgui}-disabled {
61
61
  @extend .#{$ns}-input, .#{$ns}-disabled;
@@ -89,7 +89,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
89
89
  }
90
90
 
91
91
  &.#{eccgui}-intent--primary {
92
- @include pt-input-intent($eccgui-color-info-text);
92
+ @include pt-input-intent($eccgui-color-primary);
93
93
  }
94
94
 
95
95
  &.#{eccgui}-intent--info {
@@ -97,7 +97,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
97
97
  }
98
98
 
99
99
  &.#{eccgui}-intent--accent {
100
- @include pt-input-intent($eccgui-color-primary);
100
+ @include pt-input-intent($eccgui-color-accent);
101
101
  }
102
102
 
103
103
  &.#{eccgui}-intent--neutral {
@@ -124,39 +124,29 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
124
124
  }
125
125
 
126
126
  &.cm-focused {
127
- outline: none;
128
- box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
127
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
128
+ --#{$eccgui}-a11y-outline-offset: 0;
129
+
130
+ @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
129
131
 
130
132
  &.#{eccgui}-intent--warning {
131
- box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
133
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
132
134
  }
133
135
 
134
136
  &.#{eccgui}-intent--success {
135
- box-shadow: input-transition-shadow($eccgui-color-success-text, true), $input-box-shadow-focus;
137
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
136
138
  }
137
139
 
138
140
  &.#{eccgui}-intent--danger {
139
- box-shadow: input-transition-shadow($eccgui-color-danger-text, true), $input-box-shadow-focus;
141
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
140
142
  }
141
143
 
142
144
  &.#{eccgui}-intent--primary {
143
- box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
145
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
144
146
  }
145
147
 
146
148
  &.#{eccgui}-intent--info {
147
- box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
148
- }
149
-
150
- &.#{eccgui}-intent--accent {
151
- box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
152
- }
153
-
154
- &.#{eccgui}-intent--neutral {
155
- box-shadow: input-transition-shadow($eccgui-color-workspace-text, true), $input-box-shadow-focus;
156
- }
157
-
158
- &.#{eccgui}-intent--edited {
159
- box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
149
+ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
160
150
  }
161
151
 
162
152
  &.#{eccgui}-intent--removed {
package/src/index.scss CHANGED
@@ -61,6 +61,7 @@ $prefix-carbon: $prefix;
61
61
 
62
62
  // == Load basic components styles =============================================
63
63
 
64
+ @import "./common/scss/accessibility-defaults";
64
65
  @import "./components";
65
66
 
66
67
  // set more readable variable for prefix