@automattic/jetpack-components 0.48.3 → 0.48.4
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.
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.48.4] - 2024-02-22
|
|
6
|
+
### Added
|
|
7
|
+
- Adding accesible text for external links on connection page and footer [#35733]
|
|
8
|
+
|
|
9
|
+
### Changed
|
|
10
|
+
- Updated package dependencies. [#35793]
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
- Jetpack Logo: prevent VoiceOver on Safari from reading SVG content [#35752]
|
|
14
|
+
|
|
5
15
|
## [0.48.3] - 2024-02-19
|
|
6
16
|
### Added
|
|
7
17
|
- Added support for annotations in graph [#34978]
|
|
@@ -945,6 +955,7 @@
|
|
|
945
955
|
### Changed
|
|
946
956
|
- Update node version requirement to 14.16.1
|
|
947
957
|
|
|
958
|
+
[0.48.4]: https://github.com/Automattic/jetpack-components/compare/0.48.3...0.48.4
|
|
948
959
|
[0.48.3]: https://github.com/Automattic/jetpack-components/compare/0.48.2...0.48.3
|
|
949
960
|
[0.48.2]: https://github.com/Automattic/jetpack-components/compare/0.48.1...0.48.2
|
|
950
961
|
[0.48.1]: https://github.com/Automattic/jetpack-components/compare/0.48.0...0.48.1
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* External dependencies
|
|
3
3
|
*/
|
|
4
|
-
import { Button as WPButton, Spinner } from '@wordpress/components';
|
|
4
|
+
import { Button as WPButton, Spinner, VisuallyHidden } from '@wordpress/components';
|
|
5
|
+
import { __ } from '@wordpress/i18n';
|
|
5
6
|
import { Icon, external } from '@wordpress/icons';
|
|
6
7
|
import classNames from 'classnames';
|
|
7
8
|
import React, { forwardRef } from 'react';
|
|
@@ -49,7 +50,15 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
|
|
|
49
50
|
|
|
50
51
|
const externalIconSize = size === 'normal' ? 20 : 16;
|
|
51
52
|
const externalIcon = isExternalLink && (
|
|
52
|
-
|
|
53
|
+
<>
|
|
54
|
+
<Icon size={ externalIconSize } icon={ external } className={ styles[ 'external-icon' ] } />
|
|
55
|
+
<VisuallyHidden as="span">
|
|
56
|
+
{
|
|
57
|
+
/* translators: accessibility text */
|
|
58
|
+
__( '(opens in a new tab)', 'jetpack' )
|
|
59
|
+
}
|
|
60
|
+
</VisuallyHidden>
|
|
61
|
+
</>
|
|
53
62
|
);
|
|
54
63
|
const externalTarget = isExternalLink ? '_blank' : undefined;
|
|
55
64
|
|
|
@@ -16,6 +16,18 @@ const JetpackIcon: React.FC = () => (
|
|
|
16
16
|
<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />
|
|
17
17
|
);
|
|
18
18
|
|
|
19
|
+
const ExternalIcon: React.FC = () => (
|
|
20
|
+
<>
|
|
21
|
+
<Icon icon={ external } size={ 16 } />
|
|
22
|
+
<span className="jp-dashboard-footer__accessible-external-link">
|
|
23
|
+
{
|
|
24
|
+
/* translators: accessibility text */
|
|
25
|
+
__( '(opens in a new tab)', 'jetpack' )
|
|
26
|
+
}
|
|
27
|
+
</span>
|
|
28
|
+
</>
|
|
29
|
+
);
|
|
30
|
+
|
|
19
31
|
/**
|
|
20
32
|
* JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
|
|
21
33
|
*
|
|
@@ -139,7 +151,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
|
|
|
139
151
|
tabIndex={ isButton ? 0 : undefined }
|
|
140
152
|
>
|
|
141
153
|
{ item.label }
|
|
142
|
-
{ isExternalLink && <
|
|
154
|
+
{ isExternalLink && <ExternalIcon /> }
|
|
143
155
|
</a>
|
|
144
156
|
</li>
|
|
145
157
|
);
|
|
@@ -71,6 +71,19 @@
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
+
.jp-dashboard-footer__accessible-external-link {
|
|
75
|
+
border: 0px;
|
|
76
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
77
|
+
clip-path: inset(50%);
|
|
78
|
+
height: 1px;
|
|
79
|
+
margin: -1px;
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
padding: 0px;
|
|
82
|
+
position: absolute;
|
|
83
|
+
width: 1px;
|
|
84
|
+
overflow-wrap: normal;
|
|
85
|
+
}
|
|
86
|
+
|
|
74
87
|
.jp-dashboard-footer__jp-item {
|
|
75
88
|
padding-inline-end: 1rem;
|
|
76
89
|
|
|
@@ -22,8 +22,10 @@ const JetpackLogo: React.FC< JetpackLogoProps > = ( {
|
|
|
22
22
|
aria-labelledby="jetpack-logo-title"
|
|
23
23
|
height={ height }
|
|
24
24
|
{ ...otherProps }
|
|
25
|
+
// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
|
|
26
|
+
role="img"
|
|
25
27
|
>
|
|
26
|
-
<
|
|
28
|
+
<title id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack' ) }</title>
|
|
27
29
|
<path
|
|
28
30
|
fill={ logoColor }
|
|
29
31
|
d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "0.48.
|
|
3
|
+
"version": "0.48.4",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@automattic/format-currency": "1.0.1",
|
|
18
|
-
"@automattic/jetpack-boost-score-api": "^0.1.
|
|
18
|
+
"@automattic/jetpack-boost-score-api": "^0.1.24",
|
|
19
19
|
"@babel/runtime": "^7",
|
|
20
20
|
"@wordpress/browserslist-config": "5.34.0",
|
|
21
21
|
"@wordpress/components": "26.0.0",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"@babel/core": "7.23.5",
|
|
39
39
|
"@babel/preset-react": "7.23.3",
|
|
40
40
|
"@jest/globals": "29.4.3",
|
|
41
|
-
"@storybook/addon-actions": "7.6.
|
|
42
|
-
"@storybook/blocks": "7.6.
|
|
43
|
-
"@storybook/react": "7.6.
|
|
41
|
+
"@storybook/addon-actions": "7.6.17",
|
|
42
|
+
"@storybook/blocks": "7.6.17",
|
|
43
|
+
"@storybook/react": "7.6.17",
|
|
44
44
|
"@testing-library/dom": "9.3.4",
|
|
45
45
|
"@testing-library/react": "14.2.0",
|
|
46
46
|
"@testing-library/user-event": "14.5.2",
|