From e0853b54084e6e9f75d1a6038161d3e0180f8efb Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Fri, 18 Jan 2019 11:13:07 +0800
Subject: [PATCH] Add country code as keyword for countries search
 (https://github.com/woocommerce/woocommerce-admin/pull/1337)

* Add country name to tooltip and screen reader text

* Add country code to autocompleter keywords
---
 .../analytics/report/customers/table.js       | 21 +++++++++++++++++--
 .../src/search/autocompleters/countries.js    |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/plugins/woocommerce-admin/client/analytics/report/customers/table.js b/plugins/woocommerce-admin/client/analytics/report/customers/table.js
index 1e10f51148c..497cdb53631 100644
--- a/plugins/woocommerce-admin/client/analytics/report/customers/table.js
+++ b/plugins/woocommerce-admin/client/analytics/report/customers/table.js
@@ -3,7 +3,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
+import { Tooltip } from '@wordpress/components';
 
 /**
  * WooCommerce dependencies
@@ -90,6 +91,12 @@ export default class CustomersReportTable extends Component {
 		];
 	}
 
+	getCountryName( code ) {
+		const countries = ( wcSettings.dataEndpoints && wcSettings.dataEndpoints.countries ) || [];
+		const country = countries.find( c => c.code === code );
+		return country ? country.name : null;
+	}
+
 	getRowsContent( customers ) {
 		return customers.map( customer => {
 			const {
@@ -106,6 +113,7 @@ export default class CustomersReportTable extends Component {
 				city,
 				country,
 			} = customer;
+			const countryName = this.getCountryName( country );
 
 			const customerNameLink = user_id ? (
 				<Link href={ 'user-edit.php?user_id=' + user_id } type="wp-admin">
@@ -121,6 +129,15 @@ export default class CustomersReportTable extends Component {
 				'—'
 			);
 
+			const countryDisplay = (
+				<Fragment>
+					<Tooltip text={ countryName }>
+						<span aria-hidden="true">{ country }</span>
+					</Tooltip>
+					<span className="screen-reader-text">{ countryName }</span>
+				</Fragment>
+			);
+
 			return [
 				{
 					display: customerNameLink,
@@ -155,7 +172,7 @@ export default class CustomersReportTable extends Component {
 					value: date_last_active,
 				},
 				{
-					display: country,
+					display: countryDisplay,
 					value: country,
 				},
 				{
diff --git a/plugins/woocommerce-admin/packages/components/src/search/autocompleters/countries.js b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/countries.js
index 8e1813bfd2c..d713c66684d 100644
--- a/plugins/woocommerce-admin/packages/components/src/search/autocompleters/countries.js
+++ b/plugins/woocommerce-admin/packages/components/src/search/autocompleters/countries.js
@@ -24,7 +24,7 @@ export default {
 		return wcSettings.dataEndpoints.countries || [];
 	},
 	getOptionKeywords( country ) {
-		return [ decodeEntities( country.name ) ];
+		return [ country.code, decodeEntities( country.name ) ];
 	},
 	getOptionLabel( country, query ) {
 		const name = decodeEntities( country.name );