External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-24 00:57:48 -02:30
Code Issues Packages Projects Releases Wiki Activity

Add default aria label to Popover component

Browse Source
This commit is contained in:
Marliana Lara
2020-10-19 17:20:31 -04:00
parent 35ba74d265
commit f369f8535d
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { act } from 'react-dom/test-utils'; import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import { Formik } from 'formik'; import { Formik } from 'formik';
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
import VariablesField from './VariablesField'; import VariablesField from './VariablesField';
describe('VariablesField', () => { describe('VariablesField', () => {
@@ -11,7 +11,7 @@ describe('VariablesField', () => {
it('should render code mirror input', () => { it('should render code mirror input', () => {
const value = '---\n'; const value = '---\n';
const wrapper = mount( const wrapper = mountWithContexts(
<Formik initialValues={{ variables: value }}> <Formik initialValues={{ variables: value }}>
{() => ( {() => (
<VariablesField id="the-field" name="variables" label="Variables" /> <VariablesField id="the-field" name="variables" label="Variables" />
@@ -24,7 +24,7 @@ describe('VariablesField', () => {
it('should render yaml/json toggles', async () => { it('should render yaml/json toggles', async () => {
const value = '---\n'; const value = '---\n';
const wrapper = mount( const wrapper = mountWithContexts(
<Formik initialValues={{ variables: value }}> <Formik initialValues={{ variables: value }}>
{() => ( {() => (
<VariablesField id="the-field" name="variables" label="Variables" /> <VariablesField id="the-field" name="variables" label="Variables" />
@@ -52,7 +52,7 @@ describe('VariablesField', () => {
it('should set Formik error if yaml is invalid', async () => { it('should set Formik error if yaml is invalid', async () => {
const value = '---\nfoo bar\n'; const value = '---\nfoo bar\n';
const wrapper = mount( const wrapper = mountWithContexts(
<Formik initialValues={{ variables: value }}> <Formik initialValues={{ variables: value }}>
{() => ( {() => (
<VariablesField id="the-field" name="variables" label="Variables" /> <VariablesField id="the-field" name="variables" label="Variables" />
@@ -71,7 +71,7 @@ describe('VariablesField', () => {
}); });
it('should render tooltip', () => { it('should render tooltip', () => {
const value = '---\n'; const value = '---\n';
const wrapper = mount( const wrapper = mountWithContexts(
<Formik initialValues={{ variables: value }}> <Formik initialValues={{ variables: value }}>
{() => ( {() => (
<VariablesField <VariablesField
@@ -89,7 +89,7 @@ describe('VariablesField', () => {
it('should submit value through Formik', async () => { it('should submit value through Formik', async () => {
const value = '---\nfoo: bar\n'; const value = '---\nfoo: bar\n';
const handleSubmit = jest.fn(); const handleSubmit = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<Formik initialValues={{ variables: value }} onSubmit={handleSubmit}> <Formik initialValues={{ variables: value }} onSubmit={handleSubmit}>
{formik => ( {formik => (
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
@@ -116,7 +116,7 @@ describe('VariablesField', () => {
it('should initialize to JSON if value is JSON', async () => { it('should initialize to JSON if value is JSON', async () => {
const value = '{"foo": "bar"}'; const value = '{"foo": "bar"}';
const wrapper = mount( const wrapper = mountWithContexts(
<Formik initialValues={{ variables: value }} onSubmit={jest.fn()}> <Formik initialValues={{ variables: value }} onSubmit={jest.fn()}>
{formik => ( {formik => (
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>

9
awx/ui_next/src/components/Popover/Popover.jsx
View File

@@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import { node, string } from 'prop-types'; 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 { Popover as PFPopover } from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons'; import { HelpIcon } from '@patternfly/react-icons';
import styled from 'styled-components'; import styled from 'styled-components';
@@ -9,7 +11,7 @@ const PopoverButton = styled.button`
margin: -(var(--pf-global--spacer--xs)); margin: -(var(--pf-global--spacer--xs));
`; `;
function Popover({ content, header, id, maxWidth, ...rest }) { function Popover({ i18n, ariaLabel, content, header, id, maxWidth, ...rest }) {
if (!content) { if (!content) {
return null; return null;
} }
@@ -24,6 +26,7 @@ function Popover({ content, header, id, maxWidth, ...rest }) {
{...rest} {...rest}
> >
<PopoverButton <PopoverButton
aria-label={ariaLabel ?? i18n._(t`More information`)}
aria-haspopup="true" aria-haspopup="true"
className="pf-c-form__group-label-help" className="pf-c-form__group-label-help"
onClick={e => e.preventDefault()} onClick={e => e.preventDefault()}
@@ -36,16 +39,18 @@ function Popover({ content, header, id, maxWidth, ...rest }) {
} }
Popover.propTypes = { Popover.propTypes = {
ariaLabel: string,
content: node, content: node,
header: node, header: node,
id: string, id: string,
maxWidth: string, maxWidth: string,
}; };
Popover.defaultProps = { Popover.defaultProps = {
ariaLabel: null,
content: null, content: null,
header: null, header: null,
id: '', id: '',
maxWidth: '', maxWidth: '',
}; };
export default Popover; export default withI18n()(Popover);