Makes table dates accessible (https://github.com/woocommerce/woocommerce-admin/pull/1274)

* Create 'Date' component to render accessible dates

* Add tests

plugins/woocommerce-admin/client/analytics/report/coupons/table.js

@@ -4,13 +4,12 @@
  */
 import { __, _n } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { format as formatDate } from '@wordpress/date';
 import { map } from 'lodash';
 
 /**
  * WooCommerce dependencies
  */
-import { Link } from '@woocommerce/components';
+import { Date, Link } from '@woocommerce/components';
 import { defaultTableDateFormat } from '@woocommerce/date';
 import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
 
@@ -102,13 +101,15 @@ export default class CouponsReportTable extends Component {
 					value: getCurrencyFormatDecimal( amount ),
 				},
 				{
-					display: formatDate( defaultTableDateFormat, date_created ),
+					display: <Date date={ date_created } visibleFormat={ defaultTableDateFormat } />,
 					value: date_created,
 				},
 				{
-					display: date_expires
-						? formatDate( defaultTableDateFormat, date_expires )
-						: __( 'N/A', 'wc-admin' ),
+					display: date_expires ? (
+						<Date date={ date_expires } visibleFormat={ defaultTableDateFormat } />
+					) : (
+						__( 'N/A', 'wc-admin' )
+					),
 					value: date_expires,
 				},
 				{

plugins/woocommerce-admin/client/analytics/report/customers/table.js

@@ -4,14 +4,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { format as formatDate } from '@wordpress/date';
 
 /**
  * WooCommerce dependencies
  */
 import { defaultTableDateFormat } from '@woocommerce/date';
 import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
-import { Link } from '@woocommerce/components';
+import { Date, Link } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -117,7 +116,7 @@ export default class CustomersReportTable extends Component {
 			);
 
 			const dateRegistered = date_registered
-				? formatDate( defaultTableDateFormat, date_registered )
+				? <Date date={ date_registered } visibleFormat={ defaultTableDateFormat } />
 				: '—';
 
 			return [
@@ -150,7 +149,7 @@ export default class CustomersReportTable extends Component {
 					value: getCurrencyFormatDecimal( avg_order_value ),
 				},
 				{
-					display: formatDate( defaultTableDateFormat, date_last_active ),
+					display: <Date date={ date_last_active } visibleFormat={ defaultTableDateFormat } />,
 					value: date_last_active,
 				},
 				{

plugins/woocommerce-admin/client/analytics/report/downloads/table.js

@@ -4,7 +4,6 @@
  */
 import { __, _n } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { format as formatDate } from '@wordpress/date';
 import { map } from 'lodash';
 import moment from 'moment';
 
@@ -12,7 +11,7 @@ import moment from 'moment';
  * WooCommerce dependencies
  */
 import { defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
-import { Link } from '@woocommerce/components';
+import { Date, Link } from '@woocommerce/components';
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 
 /**
@@ -82,7 +81,7 @@ export default class CouponsReportTable extends Component {
 
 			return [
 				{
-					display: formatDate( defaultTableDateFormat, date ),
+					display: <Date date={ date } visibleFormat={ defaultTableDateFormat } />,
 					value: date,
 				},
 				{

plugins/woocommerce-admin/client/analytics/report/orders/table.js

@@ -4,7 +4,6 @@
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
-import { format as formatDate } from '@wordpress/date';
 import { compose } from '@wordpress/compose';
 import { map } from 'lodash';
 
@@ -12,7 +11,7 @@ import { map } from 'lodash';
  * WooCommerce dependencies
  */
 import { appendTimestamp, defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
-import { Link, OrderStatus, ViewMoreList } from '@woocommerce/components';
+import { Date, Link, OrderStatus, ViewMoreList } from '@woocommerce/components';
 import { formatCurrency } from '@woocommerce/currency';
 
 /**
@@ -126,7 +125,7 @@ class OrdersReportTable extends Component {
 
 			return [
 				{
-					display: formatDate( defaultTableDateFormat, date ),
+					display: <Date date={ date } visibleFormat={ defaultTableDateFormat } />,
 					value: date,
 				},
 				{

plugins/woocommerce-admin/client/analytics/report/revenue/table.js

@@ -12,7 +12,7 @@ import { get } from 'lodash';
  * WooCommerce dependencies
  */
 import { appendTimestamp, defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
-import { Link } from '@woocommerce/components';
+import { Date, Link } from '@woocommerce/components';
 import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
 
 /**
@@ -118,7 +118,7 @@ class RevenueReportTable extends Component {
 			);
 			return [
 				{
-					display: formatDate( defaultTableDateFormat, row.date_start ),
+					display: <Date date={ row.date_start } visibleFormat={ defaultTableDateFormat } />,
 					value: row.date_start,
 				},
 				{

plugins/woocommerce-admin/client/devdocs/examples.json

@@ -4,6 +4,7 @@
   { "component": "Card" },
   { "component": "Chart" },
   { "component": "Count" },
+  { "component": "Date" },
   { "component": "DropdownButton" },
   { "component": "EllipsisMenu" },
   { "component": "EmptyContent" },

plugins/woocommerce-admin/docs/components/_sidebar.md

@@ -13,6 +13,7 @@
     * [Card](components/packages/card.md)
     * [Chart](components/packages/chart.md)
     * [Count](components/packages/count.md)
+    * [Date](components/packages/date.md)
     * [DropdownButton](components/packages/dropdown-button.md)
     * [EllipsisMenu](components/packages/ellipsis-menu.md)
     * [EmptyContent](components/packages/empty-content.md)

plugins/woocommerce-admin/docs/components/packages/chart.md

@@ -6,6 +6,13 @@ A chart container using d3, to display timeseries data with an interactive legen
 Props
 -----
 
+### `allowedIntervals`
+
+- Type: Array
+- Default: null
+
+Allowed intervals to show in a dropdown.
+
 ### `data`
 
 - Type: Array
@@ -27,6 +34,14 @@ Format to parse dates into d3 time format
 
 Label describing the legend items.
 
+### `mode`
+
+- Type: One of: 'item-comparison', 'time-comparison'
+- Default: `'time-comparison'`
+
+`item-comparison` (default) or `time-comparison`, this is used to generate correct
+ARIA properties.
+
 ### `path`
 
 - Type: String
@@ -41,6 +56,56 @@ Current path
 
 The query string represented in object form
 
+### `interactiveLegend`
+
+- Type: Boolean
+- Default: `true`
+
+Whether the legend items can be activated/deactivated.
+
+### `interval`
+
+- Type: One of: 'hour', 'day', 'week', 'month', 'quarter', 'year'
+- Default: `'day'`
+
+Interval specification (hourly, daily, weekly etc).
+
+### `intervalData`
+
+- Type: Object
+- Default: null
+
+Information about the currently selected interval, and set of allowed intervals for the chart. See `getIntervalsForQuery`.
+
+### `isRequesting`
+
+- Type: Boolean
+- Default: `false`
+
+Render a chart placeholder to signify an in-flight data request.
+
+### `legendPosition`
+
+- Type: One of: 'bottom', 'side', 'top'
+- Default: null
+
+Position the legend must be displayed in. If it's not defined, it's calculated
+depending on the viewport width and the mode.
+
+### `showHeaderControls`
+
+- Type: Boolean
+- Default: `true`
+
+Wether header UI controls must be displayed.
+
+### `title`
+
+- Type: String
+- Default: null
+
+A title describing this chart.
+
 ### `tooltipLabelFormat`
 
 - Type: One of type: string, func
@@ -62,6 +127,20 @@ A number formatting string or function to format the value displayed in the tool
 
 A string to use as a title for the tooltip. Takes preference over `tooltipLabelFormat`.
 
+### `type`
+
+- Type: One of: 'bar', 'line'
+- Default: `'line'`
+
+Chart type of either `line` or `bar`.
+
+### `valueType`
+
+- Type: String
+- Default: null
+
+What type of data is to be displayed? Number, Average, String?
+
 ### `xFormat`
 
 - Type: String
@@ -83,63 +162,6 @@ A datetime formatting string, passed to d3TimeFormat.
 
 A number formatting string, passed to d3Format.
 
-### `mode`
-
-- Type: One of: 'block', 'item-comparison', 'time-comparison'
-- Default: `'time-comparison'`
-
-`item-comparison` (default) or `time-comparison`, this is used to generate correct
-ARIA properties.
-
-### `title`
-
-- Type: String
-- Default: null
-
-A title describing this chart.
-
-### `type`
-
-- Type: One of: 'bar', 'line'
-- Default: `'line'`
-
-Chart type of either `line` or `bar`.
-
-### `intervalData`
-
-- Type: Object
-- Default: null
-
-Information about the currently selected interval, and set of allowed intervals for the chart. See `getIntervalsForQuery`.
-
-### `interval`
-
-- Type: One of: 'hour', 'day', 'week', 'month', 'quarter', 'year'
-- Default: `'day'`
-
-Interval specification (hourly, daily, weekly etc).
-
-### `allowedIntervals`
-
-- Type: Array
-- Default: null
-
-Allowed intervals to show in a dropdown.
-
-### `valueType`
-
-- Type: String
-- Default: null
-
-What type of data is to be displayed? Number, Average, String?
-
-### `isRequesting`
-
-- Type: Boolean
-- Default: `false`
-
-Render a chart placeholder to signify an in-flight data request.
-
 `ChartPlaceholder` (component)
 ==============================
 

plugins/woocommerce-admin/docs/components/packages/date.md

@@ -0,0 +1,39 @@
+`Date` (component)
+==================
+
+Use the `Date` component to display accessible dates or times.
+
+
+
+Props
+-----
+
+### `date`
+
+- **Required**
+- Type: String
+- Default: null
+
+Date to use in the component.
+
+### `machineFormat`
+
+- Type: String
+- Default: `'Y-m-d H:i:s'`
+
+Date format used in the `datetime` prop of the `time` element.
+
+### `screenReaderFormat`
+
+- Type: String
+- Default: `'F j, Y'`
+
+Date format used for screen readers.
+
+### `visibleFormat`
+
+- Type: String
+- Default: `'Y-m-d'`
+
+Date format displayed in the page.
+

plugins/woocommerce-admin/packages/components/src/date/example.md

@@ -0,0 +1,7 @@
+```jsx
+import { Date } from '@woocommerce/components';
+
+const MyDate = () => (
+  <Date date="2019-01-01" />
+);
+```

plugins/woocommerce-admin/packages/components/src/date/index.js

@@ -0,0 +1,52 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { format as formatDate } from '@wordpress/date';
+
+/**
+ * Use the `Date` component to display accessible dates or times.
+ *
+ * @return { object } -
+ */
+const Date = ( { date, machineFormat, screenReaderFormat, visibleFormat } ) => {
+	return (
+		<time dateTime={ formatDate( machineFormat, date ) }>
+			<span aria-hidden="true">
+				{ formatDate( visibleFormat, date ) }
+			</span>
+			<span className="screen-reader-text">
+				{ formatDate( screenReaderFormat, date ) }
+			</span>
+		</time>
+	);
+};
+
+Date.propTypes = {
+	/**
+	 * Date to use in the component.
+	 */
+	date: PropTypes.oneOfType( [ PropTypes.string, PropTypes.object ] ).isRequired,
+	/**
+	 * Date format used in the `datetime` prop of the `time` element.
+	 */
+	machineFormat: PropTypes.string,
+	/**
+	 * Date format used for screen readers.
+	 */
+	screenReaderFormat: PropTypes.string,
+	/**
+	 * Date format displayed in the page.
+	 */
+	visibleFormat: PropTypes.string,
+};
+
+Date.defaultProps = {
+	machineFormat: 'Y-m-d H:i:s',
+	screenReaderFormat: 'F j, Y',
+	visibleFormat: 'Y-m-d',
+};
+
+export default Date;

plugins/woocommerce-admin/packages/components/src/date/test/index.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ *
+ * @format
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import Date from '../';
+
+describe( 'Date', () => {
+	test( 'should use fallback formats', () => {
+		const time = shallow( <Date date="2019-01-01" /> );
+		const spans = time.find( 'span' );
+
+		expect( time.prop( 'dateTime' ) ).toBe( '2019-01-01 00:00:00' );
+		expect( spans.get( 0 ).props.children ).toBe( '2019-01-01' );
+		expect( spans.get( 1 ).props.children ).toBe( 'January 1, 2019' );
+	} );
+
+	test( 'should respect formats from props', () => {
+		const time = shallow(
+			<Date
+				date="2019-01-01"
+				machineFormat="Y-m-d"
+				screenReaderFormat="Y"
+				visibleFormat="m/d/Y"
+			/>
+		);
+		const spans = time.find( 'span' );
+
+		expect( time.prop( 'dateTime' ) ).toBe( '2019-01-01' );
+		expect( spans.get( 0 ).props.children ).toBe( '01/01/2019' );
+		expect( spans.get( 1 ).props.children ).toBe( '2019' );
+	} );
+} );

plugins/woocommerce-admin/packages/components/src/index.js

@@ -12,6 +12,7 @@ export { default as ChartPlaceholder } from './chart/placeholder';
 export { default as Card } from './card';
 export { default as Count } from './count';
 export { default as CompareFilter } from './filters/compare';
+export { default as Date } from './date';
 export { default as DateRangeFilterPicker } from './filters/date';
 export { default as DateRange } from './calendar/date-range';
 export { default as DatePicker } from './calendar/date-picker';