@atlaskit/tabs 13.3.4 → 13.3.5

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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/tabs.js +1 -1
  3. package/dist/cjs/internal/styles.js +34 -15
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/components/tabs.js +1 -1
  6. package/dist/es2019/internal/styles.js +33 -15
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/components/tabs.js +1 -1
  9. package/dist/esm/internal/styles.js +35 -15
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/tabs
2
2
 
3
+ ## 13.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`0637c50e226`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0637c50e226) - Updated Tabs compnent to prefer to use focus-visible over focus css selectors.
8
+
3
9
  ## 13.3.4
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/tabs.js CHANGED
@@ -36,7 +36,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
36
36
  var analyticsAttributes = {
37
37
  componentName: 'tabs',
38
38
  packageName: "@atlaskit/tabs",
39
- packageVersion: "13.3.4"
39
+ packageVersion: "13.3.5"
40
40
  };
41
41
 
42
42
  var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
package/dist/cjs/internal/styles.js CHANGED
@@ -23,16 +23,28 @@ var borderRadius = (0, _constants.borderRadius)();
23
23
  var gridSize = (0, _constants.gridSize)();
24
24
  var tabLeftRightPadding = "".concat(gridSize, "px");
25
25
  var tabTopBottomPadding = "".concat(gridSize / 2, "px");
26
- var underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
26
+ var underlineHeight = '2px';
27
+ var highContrastFocusStyles = {
28
+ outline: '1px solid'
29
+ }; // Required so the focus ring is visible in high contrast mode
27
30
 
28
31
  var highContrastFocusRing = {
29
32
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
30
- '&:focus': {
31
- outline: '1px solid'
33
+ '&:focus-visible': highContrastFocusStyles,
34
+ '@supports not selector(*:focus-visible)': {
35
+ '&:focus': highContrastFocusStyles
32
36
  }
33
37
  }
34
38
  };
35
39
 
40
+ var tabFocusStyles = function tabFocusStyles(mode) {
41
+ return {
42
+ boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
43
+ borderRadius: borderRadius,
44
+ outline: 'none'
45
+ };
46
+ };
47
+
36
48
  var getTabPanelStyles = function getTabPanelStyles(mode) {
37
49
  return _objectSpread({
38
50
  flexGrow: 1,
@@ -44,10 +56,9 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
44
56
  minHeight: '0%',
45
57
  display: 'flex',
46
58
  padding: "0 ".concat(tabLeftRightPadding),
47
- '&:focus': {
48
- boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
49
- borderRadius: borderRadius,
50
- outline: 'none'
59
+ '&:focus-visible': tabFocusStyles(mode),
60
+ '@supports not selector(*:focus-visible)': {
61
+ '&:focus': tabFocusStyles(mode)
51
62
  }
52
63
  }, highContrastFocusRing);
53
64
  };
@@ -94,6 +105,19 @@ var getTabListStyles = function getTabListStyles(mode) {
94
105
 
95
106
  exports.getTabListStyles = getTabListStyles;
96
107
 
108
+ var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
109
+ var colors = (0, _colors.getTabColors)(mode);
110
+ return {
111
+ boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
112
+ borderRadius: borderRadius,
113
+ outline: 'none',
114
+ // Hide TabLine on focus
115
+ '&::after': {
116
+ opacity: 0
117
+ }
118
+ };
119
+ };
120
+
97
121
  var getTabStyles = function getTabStyles(mode) {
98
122
  var colors = (0, _colors.getTabColors)(mode);
99
123
  return _objectSpread(_objectSpread({
@@ -122,14 +146,9 @@ var getTabStyles = function getTabStyles(mode) {
122
146
  height: 0
123
147
  })
124
148
  },
125
- '&:focus': {
126
- boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
127
- borderRadius: borderRadius,
128
- outline: 'none',
129
- // Hide TabLine on focus
130
- '&::after': {
131
- opacity: 0
132
- }
149
+ '&:focus-visible': tabPanelFocusStyles(mode),
150
+ '@supports not selector(*:focus-visible)': {
151
+ '&:focus': tabPanelFocusStyles(mode)
133
152
  }
134
153
  }, highContrastFocusRing), {}, {
135
154
  '&[aria-selected="true"]': {
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "13.3.4",
3
+ "version": "13.3.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/tabs.js CHANGED
@@ -10,7 +10,7 @@ import { onMouseDownBlur } from '../internal/utils';
10
10
  const analyticsAttributes = {
11
11
  componentName: 'tabs',
12
12
  packageName: "@atlaskit/tabs",
13
- packageVersion: "13.3.4"
13
+ packageVersion: "13.3.5"
14
14
  };
15
15
 
16
16
  const getTabPanelWithContext = ({
package/dist/es2019/internal/styles.js CHANGED
@@ -5,16 +5,26 @@ const borderRadius = getBorderRadius();
5
5
  const gridSize = getGridSize();
6
6
  const tabLeftRightPadding = `${gridSize}px`;
7
7
  const tabTopBottomPadding = `${gridSize / 2}px`;
8
- const underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
8
+ const underlineHeight = '2px';
9
+ const highContrastFocusStyles = {
10
+ outline: '1px solid'
11
+ }; // Required so the focus ring is visible in high contrast mode
9
12
 
10
13
  const highContrastFocusRing = {
11
14
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
12
- '&:focus': {
13
- outline: '1px solid'
15
+ '&:focus-visible': highContrastFocusStyles,
16
+ '@supports not selector(*:focus-visible)': {
17
+ '&:focus': highContrastFocusStyles
14
18
  }
15
19
  }
16
20
  };
17
21
 
22
+ const tabFocusStyles = mode => ({
23
+ boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
24
+ borderRadius: borderRadius,
25
+ outline: 'none'
26
+ });
27
+
18
28
  const getTabPanelStyles = mode => ({
19
29
  flexGrow: 1,
20
30
 
@@ -25,10 +35,9 @@ const getTabPanelStyles = mode => ({
25
35
  minHeight: '0%',
26
36
  display: 'flex',
27
37
  padding: `0 ${tabLeftRightPadding}`,
28
- '&:focus': {
29
- boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
30
- borderRadius: borderRadius,
31
- outline: 'none'
38
+ '&:focus-visible': tabFocusStyles(mode),
39
+ '@supports not selector(*:focus-visible)': {
40
+ '&:focus': tabFocusStyles(mode)
32
41
  },
33
42
  ...highContrastFocusRing
34
43
  });
@@ -63,6 +72,20 @@ css({
63
72
  backgroundColor: getTabLineColor(mode).lineColor
64
73
  }
65
74
  });
75
+
76
+ const tabPanelFocusStyles = mode => {
77
+ const colors = getTabColors(mode);
78
+ return {
79
+ boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
80
+ borderRadius: borderRadius,
81
+ outline: 'none',
82
+ // Hide TabLine on focus
83
+ '&::after': {
84
+ opacity: 0
85
+ }
86
+ };
87
+ };
88
+
66
89
  export const getTabStyles = mode => {
67
90
  const colors = getTabColors(mode);
68
91
  return {
@@ -91,14 +114,9 @@ export const getTabStyles = mode => {
91
114
  height: 0
92
115
  }
93
116
  },
94
- '&:focus': {
95
- boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
96
- borderRadius: borderRadius,
97
- outline: 'none',
98
- // Hide TabLine on focus
99
- '&::after': {
100
- opacity: 0
101
- }
117
+ '&:focus-visible': tabPanelFocusStyles(mode),
118
+ '@supports not selector(*:focus-visible)': {
119
+ '&:focus': tabPanelFocusStyles(mode)
102
120
  },
103
121
  ...highContrastFocusRing,
104
122
  '&[aria-selected="true"]': {
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "13.3.4",
3
+ "version": "13.3.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/tabs.js CHANGED
@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
18
18
  var analyticsAttributes = {
19
19
  componentName: 'tabs',
20
20
  packageName: "@atlaskit/tabs",
21
- packageVersion: "13.3.4"
21
+ packageVersion: "13.3.5"
22
22
  };
23
23
 
24
24
  var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
package/dist/esm/internal/styles.js CHANGED
@@ -11,16 +11,28 @@ var borderRadius = getBorderRadius();
11
11
  var gridSize = getGridSize();
12
12
  var tabLeftRightPadding = "".concat(gridSize, "px");
13
13
  var tabTopBottomPadding = "".concat(gridSize / 2, "px");
14
- var underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
14
+ var underlineHeight = '2px';
15
+ var highContrastFocusStyles = {
16
+ outline: '1px solid'
17
+ }; // Required so the focus ring is visible in high contrast mode
15
18
 
16
19
  var highContrastFocusRing = {
17
20
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
18
- '&:focus': {
19
- outline: '1px solid'
21
+ '&:focus-visible': highContrastFocusStyles,
22
+ '@supports not selector(*:focus-visible)': {
23
+ '&:focus': highContrastFocusStyles
20
24
  }
21
25
  }
22
26
  };
23
27
 
28
+ var tabFocusStyles = function tabFocusStyles(mode) {
29
+ return {
30
+ boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
31
+ borderRadius: borderRadius,
32
+ outline: 'none'
33
+ };
34
+ };
35
+
24
36
  var getTabPanelStyles = function getTabPanelStyles(mode) {
25
37
  return _objectSpread({
26
38
  flexGrow: 1,
@@ -32,10 +44,9 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
32
44
  minHeight: '0%',
33
45
  display: 'flex',
34
46
  padding: "0 ".concat(tabLeftRightPadding),
35
- '&:focus': {
36
- boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
37
- borderRadius: borderRadius,
38
- outline: 'none'
47
+ '&:focus-visible': tabFocusStyles(mode),
48
+ '@supports not selector(*:focus-visible)': {
49
+ '&:focus': tabFocusStyles(mode)
39
50
  }
40
51
  }, highContrastFocusRing);
41
52
  };
@@ -76,6 +87,20 @@ export var getTabListStyles = function getTabListStyles(mode) {
76
87
  })
77
88
  );
78
89
  };
90
+
91
+ var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
92
+ var colors = getTabColors(mode);
93
+ return {
94
+ boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
95
+ borderRadius: borderRadius,
96
+ outline: 'none',
97
+ // Hide TabLine on focus
98
+ '&::after': {
99
+ opacity: 0
100
+ }
101
+ };
102
+ };
103
+
79
104
  export var getTabStyles = function getTabStyles(mode) {
80
105
  var colors = getTabColors(mode);
81
106
  return _objectSpread(_objectSpread({
@@ -104,14 +129,9 @@ export var getTabStyles = function getTabStyles(mode) {
104
129
  height: 0
105
130
  })
106
131
  },
107
- '&:focus': {
108
- boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
109
- borderRadius: borderRadius,
110
- outline: 'none',
111
- // Hide TabLine on focus
112
- '&::after': {
113
- opacity: 0
114
- }
132
+ '&:focus-visible': tabPanelFocusStyles(mode),
133
+ '@supports not selector(*:focus-visible)': {
134
+ '&:focus': tabPanelFocusStyles(mode)
115
135
  }
116
136
  }, highContrastFocusRing), {}, {
117
137
  '&[aria-selected="true"]': {
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "13.3.4",
3
+ "version": "13.3.5",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "13.3.4",
3
+ "version": "13.3.5",
4
4
  "description": "Tabs are used to organize content by grouping similar information on the same page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"