@automattic/jetpack-connection 0.32.1 → 0.32.2

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,10 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
4
4
 
5
+ ## [0.32.2] - 2024-02-19
6
+ ### Added
7
+ - Add connection indicator for screen readers [#35714]
8
+
5
9
  ## [0.32.1] - 2024-02-13
6
10
  ### Changed
7
11
  - Updated package dependencies. [#35608]
@@ -702,6 +706,7 @@
702
706
  - `Main` and `ConnectUser` components added.
703
707
  - `JetpackRestApiClient` API client added.
704
708
 
709
+ [0.32.2]: https://github.com/Automattic/jetpack-connection-js/compare/v0.32.1...v0.32.2
705
710
  [0.32.1]: https://github.com/Automattic/jetpack-connection-js/compare/v0.32.0...v0.32.1
706
711
  [0.32.0]: https://github.com/Automattic/jetpack-connection-js/compare/v0.31.2...v0.32.0
707
712
  [0.31.2]: https://github.com/Automattic/jetpack-connection-js/compare/v0.31.1...v0.31.2
@@ -10,6 +10,7 @@ import ConnectScreenVisual from './visual';
10
10
  * @param {object} props -- The properties.
11
11
  * @param {string?} props.title -- The Title.
12
12
  * @param {string?} props.buttonLabel -- The Connect Button label.
13
+ * @param {string?} props.loadingLabel -- The text read by screen readers when connecting.
13
14
  * @param {string} props.apiRoot -- API root.
14
15
  * @param {string} props.apiNonce -- API nonce.
15
16
  * @param {string} props.registrationNonce -- Registration nonce.
@@ -27,6 +28,7 @@ import ConnectScreenVisual from './visual';
27
28
  const ConnectScreen = ( {
28
29
  title,
29
30
  buttonLabel,
31
+ loadingLabel,
30
32
  apiRoot,
31
33
  apiNonce,
32
34
  registrationNonce,
@@ -66,6 +68,7 @@ const ConnectScreen = ( {
66
68
  images={ images }
67
69
  assetBaseUrl={ assetBaseUrl }
68
70
  buttonLabel={ buttonLabel }
71
+ loadingLabel={ loadingLabel }
69
72
  handleButtonClick={ handleRegisterSite }
70
73
  displayButtonError={ displayButtonError }
71
74
  errorCode={ errorCode }
@@ -82,6 +85,7 @@ const ConnectScreen = ( {
82
85
  ConnectScreen.propTypes = {
83
86
  title: PropTypes.string,
84
87
  buttonLabel: PropTypes.string,
88
+ loadingLabel: PropTypes.string,
85
89
  apiRoot: PropTypes.string.isRequired,
86
90
  apiNonce: PropTypes.string.isRequired,
87
91
  registrationNonce: PropTypes.string.isRequired,
@@ -40,6 +40,22 @@
40
40
  }
41
41
  }
42
42
 
43
+ &__loading-message {
44
+ // Hidden visually but not from screen readers
45
+ position: absolute;
46
+ clip: rect(1px, 1px, 1px, 1px);
47
+ padding: 0;
48
+ border: 0;
49
+ height: 1px;
50
+ width: 1px;
51
+ overflow: hidden;
52
+ white-space: nowrap;
53
+
54
+ &:empty {
55
+ display: none;
56
+ }
57
+ }
58
+
43
59
  &__footer {
44
60
  margin-top: 32px;
45
61
  }
@@ -24,6 +24,7 @@ const ConnectScreenVisual = props => {
24
24
  displayButtonError,
25
25
  errorCode,
26
26
  buttonIsLoading,
27
+ loadingLabel,
27
28
  footer,
28
29
  isOfflineMode,
29
30
  logo,
@@ -83,6 +84,9 @@ const ConnectScreenVisual = props => {
83
84
  isLoading={ buttonIsLoading }
84
85
  isDisabled={ isOfflineMode }
85
86
  />
87
+ <span className="jp-connection__connect-screen__loading-message" role="status">
88
+ { buttonIsLoading ? loadingLabel : '' }
89
+ </span>
86
90
 
87
91
  { footer && <div className="jp-connection__connect-screen__footer">{ footer }</div> }
88
92
  </div>
@@ -109,6 +113,8 @@ ConnectScreenVisual.propTypes = {
109
113
  errorCode: PropTypes.string,
110
114
  /** Whether the button is loading or not. */
111
115
  buttonIsLoading: PropTypes.bool,
116
+ /** Text read by screen readers after the button is activated */
117
+ loadingLabel: PropTypes.string,
112
118
  /** Node that will be rendered after ToS */
113
119
  footer: PropTypes.node,
114
120
  /** Whether the site is in offline mode. */
@@ -120,6 +126,7 @@ ConnectScreenVisual.propTypes = {
120
126
  ConnectScreenVisual.defaultProps = {
121
127
  isLoading: false,
122
128
  buttonIsLoading: false,
129
+ loadingLabel: __( 'Loading', 'jetpack' ),
123
130
  displayButtonError: false,
124
131
  errorCode: null,
125
132
  handleButtonClick: () => {},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-connection",
3
- "version": "0.32.1",
3
+ "version": "0.32.2",
4
4
  "description": "Jetpack Connection Component",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
6
6
  "bugs": {
@@ -16,7 +16,7 @@
16
16
  "dependencies": {
17
17
  "@automattic/jetpack-analytics": "^0.1.29",
18
18
  "@automattic/jetpack-api": "^0.16.10",
19
- "@automattic/jetpack-components": "^0.48.2",
19
+ "@automattic/jetpack-components": "^0.48.3",
20
20
  "@automattic/jetpack-config": "^0.1.24",
21
21
  "@wordpress/base-styles": "4.42.0",
22
22
  "@wordpress/browserslist-config": "5.34.0",