@automattic/jetpack-components 0.48.2 → 0.48.4

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.48.4] - 2024-02-22
+### Added
+- Adding accesible text for external links on connection page and footer [#35733]
+
+### Changed
+- Updated package dependencies. [#35793]
+
+### Fixed
+- Jetpack Logo: prevent VoiceOver on Safari from reading SVG content [#35752]
+
+## [0.48.3] - 2024-02-19
+### Added
+- Added support for annotations in graph [#34978]
+
 ## [0.48.2] - 2024-02-13
 ### Changed
 - Updated package dependencies. [#35608]
@@ -941,6 +955,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.48.4]: https://github.com/Automattic/jetpack-components/compare/0.48.3...0.48.4
+[0.48.3]: https://github.com/Automattic/jetpack-components/compare/0.48.2...0.48.3
 [0.48.2]: https://github.com/Automattic/jetpack-components/compare/0.48.1...0.48.2
 [0.48.1]: https://github.com/Automattic/jetpack-components/compare/0.48.0...0.48.1
 [0.48.0]: https://github.com/Automattic/jetpack-components/compare/0.47.0...0.48.0

package/components/boost-score-graph/annotations-plugin.ts

@@ -0,0 +1,70 @@
+import uPlot from 'uplot';
+import { Annotation } from '.';
+
+import './style-annotation.scss';
+
+// eslint-disable-next-line jsdoc/require-returns
+/**
+ * Custom tooltips plugin for uPlot.
+ *
+ * @param {Annotation[]} annotations - The periods to display in the tooltip.
+ */
+export function annotationsPlugin( annotations: Annotation[] ) {
+	let containerEl, annotationsContainer;
+
+	/**
+	 * Initialize the plugin
+	 *
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function init( u: uPlot ) {
+		containerEl = u.under;
+
+		annotationsContainer = document.createElement( 'div' );
+
+		annotationsContainer.classList.add( 'jb-graph-annotations' );
+
+		const annotationEl = document.createElement( 'div' );
+		annotationEl.classList.add( 'jb-graph-annotations__annotation' );
+
+		annotations.forEach( annotation => {
+			const lineEl = document.createElement( 'div' );
+			lineEl.classList.add( 'jb-graph-annotations__line' );
+			lineEl.addEventListener( 'mouseenter', () => {
+				annotationEl.innerHTML = annotation.text;
+				annotationEl.style.display = 'block';
+				annotationEl.style.left = u.valToPos( annotation.timestamp / 1000, 'x' ) + 'px';
+			} );
+			lineEl.addEventListener( 'mouseleave', () => {
+				annotationEl.style.display = 'none';
+			} );
+
+			annotation.line = lineEl;
+			annotationsContainer.appendChild( lineEl );
+		} );
+
+		containerEl.appendChild( annotationsContainer );
+		u.over.appendChild( annotationEl );
+	}
+
+	/**
+	 * Called when the chart is resized.
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function setSize( u: uPlot ) {
+		annotations.forEach( annotation => {
+			const annotationEl = annotation.line;
+
+			uPlot.assign( annotationEl.style, {
+				left: u.valToPos( annotation.timestamp / 1000, 'x' ) + 'px',
+			} );
+		} );
+	}
+
+	return {
+		hooks: {
+			init,
+			setSize,
+		},
+	};
+}

package/components/boost-score-graph/index.tsx

@@ -17,8 +17,14 @@ export interface Period {
 		mobile_tbt: number;
 	};
 }
+export interface Annotation {
+	timestamp: number;
+	text: string;
+	line?: HTMLElement;
+}
 export interface BoostScoreGraphProps {
 	periods?: Period[];
+	annotations?: Annotation[];
 	startDate?: number;
 	endDate?: number;
 	title?: string;
@@ -42,6 +48,7 @@ export type ScoreGraphAlignedData = [
  */
 export const BoostScoreGraph: FunctionComponent< BoostScoreGraphProps > = ( {
 	periods = [],
+	annotations = [],
 	startDate = 0,
 	endDate = 0,
 	title,
@@ -80,7 +87,11 @@ export const BoostScoreGraph: FunctionComponent< BoostScoreGraphProps > = ( {
 					<Background />
 				</div>
 			) : (
-				<UplotLineChart periods={ periods } range={ { startDate, endDate } } />
+				<UplotLineChart
+					periods={ periods }
+					annotations={ annotations }
+					range={ { startDate, endDate } }
+				/>
 			) }
 		</div>
 	);

package/components/boost-score-graph/style-annotation.scss

@@ -0,0 +1,70 @@
+$black: #101517;
+$white: #ffffff;
+
+.jb-graph-annotations {
+	pointer-events: none;
+	position: relative;
+	left: 0;
+	top: 0;
+	height: 100%;
+	width: 100%;
+	overflow: visible;
+
+	&__line {
+		position: absolute;
+		width: 10px;
+		height: 100%;
+		transform: translateX(-50%);
+		pointer-events: all;
+		width: 10px;
+		z-index: 1;
+
+		/*
+		 * The actual line is a pseudo element because we want to give a bigger hover area.
+		 */
+		&::after {
+			position: absolute;
+			content: '';
+			display: block;
+			width: 2px;
+			height: 100%;
+			background: rgba(146, 175, 215, 0.5);
+			left: calc(50% - 1px);
+		}
+
+		&:hover {
+			&::after {
+				background: rgba(146, 175, 215, 1);
+			}
+		}
+	}
+
+	&__annotation {
+		&::after {
+			content: '';
+			width: 0;
+			height: 0;
+			border-left: 8px solid transparent;
+			border-right: 8px solid transparent;
+			border-bottom: 8px solid $black;
+			position: absolute;
+			top: -7px;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
+		display: none;
+		top: 100%;
+		background-color: $black;
+		color: $white;
+		width: fit-content;
+		padding: 16px 24px;
+		border-radius: 4px;
+		font-size: 14px;
+		position: relative;
+		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+		text-align: center;
+		transform: translateX(-50%);
+		z-index: 2;
+	}
+}

package/components/boost-score-graph/tooltips-plugin.ts

@@ -20,13 +20,14 @@ export function tooltipsPlugin( periods ) {
 	 * @param {object} _opts - Options for the uPlot instance.
 	 */
 	function init( u, _opts ) {
-		const over = u.over;
+		const container = u.over;
 		reactDom = ReactDOM.createRoot( reactRoot );
 		reactRoot.style.position = 'absolute';
 		reactRoot.style.bottom = -20 + 'px';
 		reactRoot.style.translate = '-50% calc( 100% - 20px )';
+		reactRoot.style.zIndex = '1000';
 
-		over.appendChild( reactRoot );
+		container.appendChild( reactRoot );
 
 		/**
 		 * Hides all tooltips.
@@ -42,21 +43,15 @@ export function tooltipsPlugin( periods ) {
 			reactRoot.style.display = null;
 		}
 
-		over.addEventListener( 'mouseleave', () => {
+		container.addEventListener( 'mouseleave', () => {
 			if ( ! u.cursor._lock ) {
 				hideTips();
 			}
 		} );
 
-		over.addEventListener( 'mouseenter', () => {
+		container.addEventListener( 'mouseenter', () => {
 			showTips();
 		} );
-
-		if ( u.cursor.left < 0 ) {
-			hideTips();
-		} else {
-			showTips();
-		}
 	}
 
 	/**

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -4,13 +4,13 @@ import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
 import { getUserLocale } from '../../lib/locale';
 import numberFormat from '../number-format';
+import { annotationsPlugin } from './annotations-plugin';
 import { dayHighlightPlugin } from './day-highlight-plugin';
 import getDateFormat from './get-date-format';
 import { tooltipsPlugin } from './tooltips-plugin';
 import { useBoostScoreTransform } from './use-boost-score-transform';
 import useResize from './use-resize';
-import { Period } from '.';
-
+import { type Annotation, Period } from '.';
 import './style-uplot.scss';
 
 const DEFAULT_DIMENSIONS = {
@@ -20,6 +20,7 @@ const DEFAULT_DIMENSIONS = {
 
 interface UplotChartProps {
 	periods: Period[];
+	annotations?: Annotation[];
 	options?: Partial< uPlot.Options >;
 	legendContainer?: React.RefObject< HTMLDivElement >;
 	solidFill?: boolean;
@@ -88,9 +89,10 @@ function getColor( score: number, opacity = 'FF' ) {
  * @param {object} props - The props object for the UplotLineChart component.
  * @param {{ startDate: number, endDate: number }} props.range - The date range of the chart.
  * @param {Period[]} props.periods - The periods to display in the chart.
+ * @param {Annotation[]} props.annotations - The annotations to display in the chart.
  * @returns {React.Element} The JSX element representing the UplotLineChart component.
  */
-export default function UplotLineChart( { range, periods }: UplotChartProps ) {
+export default function UplotLineChart( { range, periods, annotations = [] }: UplotChartProps ) {
 	const uplot = useRef< uPlot | null >( null );
 	const uplotContainer = useRef( null );
 
@@ -176,12 +178,24 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
 			legend: {
 				show: false,
 			},
-			plugins: [ tooltipsPlugin( periods ), dayHighlightPlugin() ],
+			plugins: [
+				annotationsPlugin( annotations ),
+				tooltipsPlugin( periods ),
+				dayHighlightPlugin(),
+			],
 		};
 		return {
 			...defaultOptions,
 		};
-	}, [ width, lastDesktopScore, lastMobileScore, periods, range.endDate, range.startDate ] );
+	}, [
+		width,
+		lastDesktopScore,
+		lastMobileScore,
+		range.startDate,
+		range.endDate,
+		periods,
+		annotations,
+	] );
 
 	useResize( uplot, uplotContainer );
 	const onCreate = useCallback( chart => {

package/components/button/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Button as WPButton, Spinner } from '@wordpress/components';
+import { Button as WPButton, Spinner, VisuallyHidden } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import classNames from 'classnames';
 import React, { forwardRef } from 'react';
@@ -49,7 +50,15 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 
 	const externalIconSize = size === 'normal' ? 20 : 16;
 	const externalIcon = isExternalLink && (
-		<Icon size={ externalIconSize } icon={ external } className={ styles[ 'external-icon' ] } />
+		<>
+			<Icon size={ externalIconSize } icon={ external } className={ styles[ 'external-icon' ] } />
+			<VisuallyHidden as="span">
+				{
+					/* translators: accessibility text */
+					__( '(opens in a new tab)', 'jetpack' )
+				}
+			</VisuallyHidden>
+		</>
 	);
 	const externalTarget = isExternalLink ? '_blank' : undefined;
 

package/components/jetpack-footer/index.tsx

@@ -16,6 +16,18 @@ const JetpackIcon: React.FC = () => (
 	<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />
 );
 
+const ExternalIcon: React.FC = () => (
+	<>
+		<Icon icon={ external } size={ 16 } />
+		<span className="jp-dashboard-footer__accessible-external-link">
+			{
+				/* translators: accessibility text */
+				__( '(opens in a new tab)', 'jetpack' )
+			}
+		</span>
+	</>
+);
+
 /**
  * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
  *
@@ -139,7 +151,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 								tabIndex={ isButton ? 0 : undefined }
 							>
 								{ item.label }
-								{ isExternalLink && <Icon icon={ external } size={ 16 } /> }
+								{ isExternalLink && <ExternalIcon /> }
 							</a>
 						</li>
 					);

package/components/jetpack-footer/style.scss

@@ -71,6 +71,19 @@
 	}
 }
 
+.jp-dashboard-footer__accessible-external-link {
+	border: 0px;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0px;
+    position: absolute;
+    width: 1px;
+    overflow-wrap: normal;
+}
+
 .jp-dashboard-footer__jp-item {
 	padding-inline-end: 1rem;
 

package/components/jetpack-logo/index.tsx

@@ -22,8 +22,10 @@ const JetpackLogo: React.FC< JetpackLogoProps > = ( {
 			aria-labelledby="jetpack-logo-title"
 			height={ height }
 			{ ...otherProps }
+			// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
+			role="img"
 		>
-			<desc id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack' ) }</desc>
+			<title id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack' ) }</title>
 			<path
 				fill={ logoColor }
 				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

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.48.2",
+	"version": "0.48.4",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.22",
+		"@automattic/jetpack-boost-score-api": "^0.1.24",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "5.34.0",
 		"@wordpress/components": "26.0.0",
@@ -38,9 +38,9 @@
 		"@babel/core": "7.23.5",
 		"@babel/preset-react": "7.23.3",
 		"@jest/globals": "29.4.3",
-		"@storybook/addon-actions": "7.6.5",
-		"@storybook/blocks": "7.6.5",
-		"@storybook/react": "7.6.5",
+		"@storybook/addon-actions": "7.6.17",
+		"@storybook/blocks": "7.6.17",
+		"@storybook/react": "7.6.17",
 		"@testing-library/dom": "9.3.4",
 		"@testing-library/react": "14.2.0",
 		"@testing-library/user-event": "14.5.2",