@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.
Files changed (6) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/components/button/index.tsx +11 -2
  3. package/components/jetpack-footer/index.tsx +13 -1
  4. package/components/jetpack-footer/style.scss +13 -0
  5. package/components/jetpack-logo/index.tsx +3 -1
  6. package/package.json +5 -5
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
package/components/button/index.tsx CHANGED
@@ -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
- <Icon size={ externalIconSize } icon={ external } className={ styles[ 'external-icon' ] } />
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
 
package/components/jetpack-footer/index.tsx CHANGED
@@ -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 && <Icon icon={ external } size={ 16 } /> }
154
+ { isExternalLink && <ExternalIcon /> }
143
155
  </a>
144
156
  </li>
145
157
  );
package/components/jetpack-footer/style.scss CHANGED
@@ -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
 
package/components/jetpack-logo/index.tsx CHANGED
@@ -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
- <desc id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack' ) }</desc>
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",
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.23",
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.5",
42
- "@storybook/blocks": "7.6.5",
43
- "@storybook/react": "7.6.5",
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",