From f369f8535d850ec3d479265f948578c3ad3f4287 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Mon, 19 Oct 2020 17:20:31 -0400
Subject: [PATCH] Add default aria label to Popover component

---
 .../CodeMirrorInput/VariablesField.test.jsx        | 14 +++++++-------
 awx/ui_next/src/components/Popover/Popover.jsx     |  9 +++++++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
index 5547bdf7ea..d2249b853d 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { mount } from 'enzyme';
 import { Formik } from 'formik';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import VariablesField from './VariablesField';
 
 describe('VariablesField', () => {
@@ -11,7 +11,7 @@ describe('VariablesField', () => {
 
   it('should render code mirror input', () => {
     const value = '---\n';
-    const wrapper = mount(
+    const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }}>
         {() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
@@ -24,7 +24,7 @@ describe('VariablesField', () => {
 
   it('should render yaml/json toggles', async () => {
     const value = '---\n';
-    const wrapper = mount(
+    const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }}>
         {() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
@@ -52,7 +52,7 @@ describe('VariablesField', () => {
 
   it('should set Formik error if yaml is invalid', async () => {
     const value = '---\nfoo bar\n';
-    const wrapper = mount(
+    const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }}>
         {() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
@@ -71,7 +71,7 @@ describe('VariablesField', () => {
   });
   it('should render tooltip', () => {
     const value = '---\n';
-    const wrapper = mount(
+    const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }}>
         {() => (
           <VariablesField
@@ -89,7 +89,7 @@ describe('VariablesField', () => {
   it('should submit value through Formik', async () => {
     const value = '---\nfoo: bar\n';
     const handleSubmit = jest.fn();
-    const wrapper = mount(
+    const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }} onSubmit={handleSubmit}>
         {formik => (
           <form onSubmit={formik.handleSubmit}>
@@ -116,7 +116,7 @@ describe('VariablesField', () => {
 
   it('should initialize to JSON if value is JSON', async () => {
     const value = '{"foo": "bar"}';
-    const wrapper = mount(
+    const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }} onSubmit={jest.fn()}>
         {formik => (
           <form onSubmit={formik.handleSubmit}>
diff --git a/awx/ui_next/src/components/Popover/Popover.jsx b/awx/ui_next/src/components/Popover/Popover.jsx
index e87eb076ac..00d93d4f7c 100644
--- a/awx/ui_next/src/components/Popover/Popover.jsx
+++ b/awx/ui_next/src/components/Popover/Popover.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { node, string } from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import { Popover as PFPopover } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
@@ -9,7 +11,7 @@ const PopoverButton = styled.button`
   margin: -(var(--pf-global--spacer--xs));
 `;
 
-function Popover({ content, header, id, maxWidth, ...rest }) {
+function Popover({ i18n, ariaLabel, content, header, id, maxWidth, ...rest }) {
   if (!content) {
     return null;
   }
@@ -24,6 +26,7 @@ function Popover({ content, header, id, maxWidth, ...rest }) {
       {...rest}
     >
       <PopoverButton
+        aria-label={ariaLabel ?? i18n._(t`More information`)}
         aria-haspopup="true"
         className="pf-c-form__group-label-help"
         onClick={e => e.preventDefault()}
@@ -36,16 +39,18 @@ function Popover({ content, header, id, maxWidth, ...rest }) {
 }
 
 Popover.propTypes = {
+  ariaLabel: string,
   content: node,
   header: node,
   id: string,
   maxWidth: string,
 };
 Popover.defaultProps = {
+  ariaLabel: null,
   content: null,
   header: null,
   id: '',
   maxWidth: '',
 };
 
-export default Popover;
+export default withI18n()(Popover);