{translate('code_viewer.not_all_measures_are_shown')}
<HelpTooltip
className="spacer-left"
- ariaLabel={translate('code_viewer.not_all_measures_are_shown.help')}
overlay={translate('code_viewer.not_all_measures_are_shown.help')}
/>
</AlertContent>
{translate('component_measures.not_all_measures_are_shown')}
<HelpTooltip
className="spacer-left"
- ariaLabel={translate(
- 'component_measures.not_all_measures_are_shown.help'
- )}
overlay={translate(
'component_measures.not_all_measures_are_shown.help'
)}
<Styled(div)>
component_measures.not_all_measures_are_shown
<HelpTooltip
- ariaLabel="component_measures.not_all_measures_are_shown.help"
className="spacer-left"
overlay="component_measures.not_all_measures_are_shown.help"
/>
);
await user.click(screen.getByRole('button', { name: 'issues.bulk_change_X_issues.1' }));
- await user.click(screen.getByRole('textbox', { name: 'issue.comment.formlink' }));
+ await user.click(screen.getByRole('textbox', { name: /issue.comment.formlink/ }));
await user.keyboard('New Comment');
expect(screen.getByRole('button', { name: 'apply' })).toBeDisabled();
{translate('issues.not_all_issue_show')}
<HelpTooltip
className="spacer-left"
- ariaLabel={translate('issues.not_all_issue_show_why')}
overlay={translate('issues.not_all_issue_show_why')}
/>
</AlertContent>
expect(await screen.findByRole('button', { name: 'apply' })).toBeDisabled();
// Adding a comment should not enable the submit button
- await user.type(screen.getByRole('textbox', { name: 'issue.comment.formlink' }), 'some comment');
+ await user.type(screen.getByRole('textbox', { name: /issue.comment.formlink/ }), 'some comment');
expect(screen.getByRole('button', { name: 'apply' })).toBeDisabled();
// Select a severity
]);
// Comment
- await user.type(screen.getByRole('textbox', { name: 'issue.comment.formlink' }), 'some comment');
+ await user.type(screen.getByRole('textbox', { name: /issue.comment.formlink/ }), 'some comment');
// Send notification
await user.click(screen.getByRole('checkbox', { name: 'issue.send_notifications' }));
import { mockPullRequest } from '../../../../helpers/mocks/branch-like';
import { mockComponent } from '../../../../helpers/mocks/component';
import { mockMeasureEnhanced, mockMetric } from '../../../../helpers/testMocks';
-import { renderComponent } from '../../../../helpers/testReactTestingUtils';
+import { findTooltipWithContent, renderComponent } from '../../../../helpers/testReactTestingUtils';
import { IssueType } from '../../../../types/issues';
import { MetricKey } from '../../../../types/metrics';
import { IssueLabel, IssueLabelProps } from '../IssueLabel';
})
).toBeInTheDocument();
- expect(await screen.findByText('tooltip text')).toBeInTheDocument();
+ expect(findTooltipWithContent('tooltip text')).toBeInTheDocument();
});
function renderIssueLabel(props: Partial<IssueLabelProps> = {}) {
import { mockPermissionGroup, mockPermissionUser } from '../../../../helpers/mocks/permissions';
import { PERMISSIONS_ORDER_FOR_PROJECT_TEMPLATE } from '../../../../helpers/permissions';
import { mockAppState } from '../../../../helpers/testMocks';
-import { renderAppWithAdminContext } from '../../../../helpers/testReactTestingUtils';
+import {
+ findTooltipWithContent,
+ renderAppWithAdminContext,
+} from '../../../../helpers/testReactTestingUtils';
import { ComponentQualifier } from '../../../../types/component';
import { Permissions } from '../../../../types/permissions';
import { PermissionGroup, PermissionUser } from '../../../../types/types';
// Shows all permission table headers.
PERMISSIONS_ORDER_FOR_PROJECT_TEMPLATE.forEach((permission, i) => {
- expect(ui.getTableHeaderHelpTooltip(i + 1)).toHaveTextContent(
- `projects_role.${permission}.desc`
- );
+ expect(
+ ui.getTableHeaderHelpTooltip(i + 1, `projects_role.${permission}.desc`)
+ ).toBeInTheDocument();
});
// Shows warning for browse and code viewer permissions.
[Permissions.Browse, Permissions.CodeViewer].forEach((_permission, i) => {
- expect(ui.getTableHeaderHelpTooltip(i + 1)).toHaveTextContent(
- 'projects_role.public_projects_warning'
- );
+ expect(
+ ui.getTableHeaderHelpTooltip(i + 1, 'projects_role.public_projects_warning')
+ ).toBeInTheDocument();
});
// Check summaries.
expect(screen.getByText('This is permission template 1')).toBeInTheDocument();
PERMISSIONS_ORDER_FOR_PROJECT_TEMPLATE.forEach((permission, i) => {
expect(ui.permissionCheckbox('johndoe', permission).get()).toBeInTheDocument();
- expect(ui.getTableHeaderHelpTooltip(i)).toHaveTextContent(`projects_role.${permission}.desc`);
+ expect(
+ ui.getTableHeaderHelpTooltip(i, `projects_role.${permission}.desc`)
+ ).toBeInTheDocument();
});
});
});
await user.click(ui.cogMenuBtn(name).get());
await user.click(ui.setDefaultBtn(qualifier).get());
},
- getTableHeaderHelpTooltip(i: number) {
+ getTableHeaderHelpTooltip(i: number, text: string) {
const th = byRole('columnheader').getAll().at(i);
if (th === undefined) {
throw new Error(`Couldn't locate the <th> at index ${i}`);
}
- within(th).getByTestId('help-tooltip-activator').focus();
- return screen.getByRole('tooltip');
+ return findTooltipWithContent((_content, element) => {
+ // For some reason, using the `content` parameter doesn't work for 1 of the
+ // tests. Explicitly using the element's `textContent` always works.
+ return Boolean(element?.textContent?.includes(text));
+ }, th);
},
};
}
exports[`rendering should render the list of templates: Permission Template 2: admin 1`] = `"0 user(s)0 group(s)"`;
-exports[`rendering should render the list of templates: Permission Template 2: codeviewer 1`] = `"permission_templates.project_creatorspermission_templates.project_creators.explanation0 user(s)0 group(s)"`;
+exports[`rendering should render the list of templates: Permission Template 2: codeviewer 1`] = `"permission_templates.project_creatorspermission_templates.project_creators.explanationpermission_templates.project_creators.explanation0 user(s)0 group(s)"`;
exports[`rendering should render the list of templates: Permission Template 2: issueadmin 1`] = `"0 user(s)0 group(s)"`;
exports[`rendering should render the list of templates: Permission Template 2: securityhotspotadmin 1`] = `"0 user(s)0 group(s)"`;
-exports[`rendering should render the list of templates: Permission Template 2: user 1`] = `"permission_templates.project_creatorspermission_templates.project_creators.explanation0 user(s)0 group(s)"`;
+exports[`rendering should render the list of templates: Permission Template 2: user 1`] = `"permission_templates.project_creatorspermission_templates.project_creators.explanationpermission_templates.project_creators.explanation0 user(s)0 group(s)"`;
{qualityGate.isBuiltIn && <BuiltInQualityGateBadge className="spacer-left" />}
{qualityGate.caycStatus === CaycStatus.NonCompliant && (
<Tooltip overlay={<CaycBadgeTooltip />} mouseLeaveDelay={TOOLTIP_MOUSE_LEAVE_DELAY}>
- <AlertWarnIcon className="spacer-left" />
+ <AlertWarnIcon className="spacer-left" description={<CaycBadgeTooltip />} />
</Tooltip>
)}
</div>
? translate('quality_gates.cannot_copy_no_cayc')
: null
}
- accessible={false}
>
<Button
className="little-spacer-left"
? translate('quality_gates.cannot_set_default_no_cayc')
: null
}
- accessible={false}
>
<Button
className="little-spacer-left"
{qualityGate.isBuiltIn && <BuiltInQualityGateBadge className="little-spacer-left" />}
{qualityGate.caycStatus === CaycStatus.NonCompliant && (
- <>
- {/* Adding a11y-hidden span for accessibility */}
- <span className="a11y-hidden">{translate('quality_gates.cayc.tooltip.message')}</span>
- <Tooltip overlay={translate('quality_gates.cayc.tooltip.message')} accessible={false}>
- <AlertWarnIcon className="spacer-left" />
- </Tooltip>
- </>
+ <Tooltip overlay={translate('quality_gates.cayc.tooltip.message')}>
+ <AlertWarnIcon
+ className="spacer-left"
+ description={translate('quality_gates.cayc.tooltip.message')}
+ />
+ </Tooltip>
)}
</NavLink>
))}
handler.setIsAdmin(true);
renderQualityGateApp();
- const notDefaultQualityGate = await screen.findByText('Sonar way');
+ const notDefaultQualityGate = await screen.findByRole('link', { name: /Sonar way/ });
await user.click(notDefaultQualityGate);
const setAsDefaultButton = screen.getByRole('button', { name: 'set_as_default' });
await user.click(setAsDefaultButton);
- expect(screen.getAllByRole('link')[2]).toHaveTextContent('default');
+ expect(screen.getByRole('link', { name: /Sonar way/ })).toHaveTextContent('default');
});
it('should be able to add a condition', async () => {
return duplicated ? (
<td className={className} data-index={index} data-line-number={line.line}>
- <Tooltip overlay={tooltip} placement="right" accessible={false}>
+ <Tooltip overlay={tooltip} placement="right">
<div>
<Toggler
onRequestClose={() => setDropdownOpen(false)}
await user.tab();
expect(ui.helpIcon.get()).toHaveFocus();
await user.tab();
- expect(ui.linkInTooltip.get()).toHaveFocus();
+ expect(ui.linkInTooltip.getAll().at(1)).toHaveFocus();
await user.tab();
- expect(ui.linkInTooltip2.get()).toHaveFocus();
+ expect(ui.linkInTooltip2.getAll().at(1)).toHaveFocus();
// Looks like RTL tab event ignores any custom focuses during the events phase,
// unless preventDefault is specified
await user.tab();
import classNames from 'classnames';
import * as React from 'react';
import { colors } from '../../app/theme';
+import { translate } from '../../helpers/l10n';
import HelpIcon from '../icons/HelpIcon';
import { IconProps } from '../icons/Icon';
import './HelpTooltip.css';
onHide?: () => void;
overlay: React.ReactNode;
placement?: Placement;
- ariaLabel?: string;
- ariaLabelledby?: string;
isInteractive?: boolean;
innerRef?: React.Ref<HTMLSpanElement>;
}
const DEFAULT_SIZE = 12;
-export default function HelpTooltip({
- size = DEFAULT_SIZE,
- ariaLabel,
- ariaLabelledby,
- ...props
-}: Props) {
- const role = ariaLabel || ariaLabelledby ? 'note' : undefined;
+export default function HelpTooltip(props: Props) {
+ const { size = DEFAULT_SIZE, overlay, placement, isInteractive, innerRef, children } = props;
return (
- <div
- className={classNames('help-tooltip', props.className)}
- aria-labelledby={ariaLabelledby}
- aria-label={ariaLabel}
- role={role}
- >
+ <div className={classNames('help-tooltip', props.className)}>
<Tooltip
mouseLeaveDelay={0.25}
onShow={props.onShow}
onHide={props.onHide}
- overlay={props.overlay}
- placement={props.placement}
- isInteractive={props.isInteractive}
+ overlay={overlay}
+ placement={placement}
+ isInteractive={isInteractive}
>
<span
className="display-inline-flex-center"
data-testid="help-tooltip-activator"
- ref={props.innerRef}
+ ref={innerRef}
>
- {props.children || <HelpIcon fill={colors.gray60} size={size} />}
+ {children ?? (
+ <HelpIcon
+ fill={colors.gray60}
+ size={size}
+ description={
+ isInteractive ? (
+ <>
+ {translate('tooltip_is_interactive')}
+ {overlay}
+ </>
+ ) : (
+ overlay
+ )
+ }
+ />
+ )}
</span>
</Tooltip>
</div>
import * as React from 'react';
import { createPortal, findDOMNode } from 'react-dom';
import { rawSizes } from '../../app/theme';
+import { translate } from '../../helpers/l10n';
import EscKeydownHandler from './EscKeydownHandler';
import FocusOutHandler from './FocusOutHandler';
import ScreenPositionFixer from './ScreenPositionFixer';
export type Placement = 'bottom' | 'right' | 'left' | 'top';
export interface TooltipProps {
- accessible?: boolean;
classNameSpace?: string;
- children: React.ReactElement<{}>;
+ children: React.ReactElement;
mouseEnterDelay?: number;
mouseLeaveDelay?: number;
onShow?: () => void;
renderOverlay() {
const isVisible = this.isVisible();
- const { classNameSpace = 'tooltip', accessible = true } = this.props;
+ const { classNameSpace = 'tooltip', isInteractive, overlay } = this.props;
return (
<div
className={classNames(`${classNameSpace}-inner`, { hidden: !isVisible })}
id={this.id}
role="tooltip"
- aria-hidden={!accessible || !isVisible}
+ aria-hidden={!isInteractive || !isVisible}
>
- {this.props.overlay}
+ {isInteractive && (
+ <span className="a11y-hidden">{translate('tooltip_is_interactive')}</span>
+ )}
+ {overlay}
</div>
);
}
render() {
const isVisible = this.isVisible();
- const { accessible = true } = this.props;
+ const { isInteractive } = this.props;
return (
<>
{React.cloneElement(this.props.children, {
onPointerLeave: this.handleMouseLeave,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
- tabIndex: accessible ? 0 : undefined,
+ tabIndex: isInteractive ? 0 : undefined,
// aria-describedby is the semantically correct property to use, but it's not
- // always well supported. As a fallback, we use aria-labelledby as well.
- // See https://sarahmhigley.com/writing/tooltips-in-wcag-21/
- // See https://css-tricks.com/accessible-svgs/
- 'aria-describedby': accessible ? this.id : undefined,
+ // always well supported. We sometimes need to handle this differently, depending
+ // on the triggering element. For example, we can add a child <description> element
+ // if the triggering element is an SVG. See HelpTooltip for an example.
+ // We should NOT use aria-labelledby, as this can have unintended effects (e.g., this
+ // can mess up buttons that need a tooltip).
+ 'aria-describedby': this.id,
})}
{!isVisible && this.renderOverlay()}
{isVisible && (
data-testid="help-tooltip-activator"
>
<HelpIcon
+ description={
+ <div
+ className="my-overlay"
+ />
+ }
fill="#888"
size={12}
/>
onFocus={[Function]}
onPointerEnter={[Function]}
onPointerLeave={[Function]}
- tabIndex={0}
/>
<div
aria-hidden={true}
onFocus={[Function]}
onPointerEnter={[Function]}
onPointerLeave={[Function]}
- tabIndex={0}
/>
<EscKeydownHandler
onKeydown={[Function]}
return (
<ClipboardBase>
{({ setCopyButton, copySuccess }) => (
- <Tooltip overlay={translate('copied_action')} visible={copySuccess} accessible={false}>
+ <Tooltip overlay={translate('copied_action')} visible={copySuccess}>
<Button
className={classNames('no-select', className)}
data-clipboard-text={copyValue}
innerRef={setCopyButton}
- aria-label={ariaLabel ?? translate('copy_to_clipboard')}
+ aria-label={
+ copySuccess ? translate('copied_action') : ariaLabel ?? translate('copy_to_clipboard')
+ }
>
- {children || (
+ {children ?? (
<>
<CopyIcon className="little-spacer-right" />
{translate('copy')}
}
export function ClipboardIconButton(props: ClipboardIconButtonProps) {
- const { className, copyValue } = props;
+ const { 'aria-label': ariaLabel, className, copyValue } = props;
return (
<ClipboardBase>
{({ setCopyButton, copySuccess }) => {
return (
<ButtonIcon
- aria-label={props['aria-label'] ?? translate('copy_to_clipboard')}
+ aria-label={
+ copySuccess ? translate('copied_action') : ariaLabel ?? translate('copy_to_clipboard')
+ }
className={classNames('no-select', className)}
data-clipboard-text={copyValue}
innerRef={setCopyButton}
tooltip={copySuccess ? translate('copied_action') : undefined}
- tooltipProps={copySuccess ? { visible: copySuccess, accessible: false } : undefined}
+ tooltipProps={copySuccess ? { visible: true } : undefined}
>
<CopyIcon />
</ButtonIcon>
const { disabled, values, disabledHelper, name, open, children, fetching } = this.props;
const showClearButton = values != null && values.length > 0 && this.props.onClear != null;
const header = disabled ? (
- <Tooltip overlay={disabledHelper} accessible={false}>
+ <Tooltip overlay={disabledHelper}>
<ButtonLink
className="disabled"
aria-disabled={true}
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import * as React from 'react';
-import { renderComponent } from '../../../helpers/testReactTestingUtils';
+import { findTooltipWithContent, renderComponent } from '../../../helpers/testReactTestingUtils';
import FacetBox, { FacetBoxProps } from '../FacetBox';
import FacetHeader from '../FacetHeader';
import FacetItem from '../FacetItem';
renderFacet(undefined, { helper: 'Help text' });
await userEvent.tab();
await userEvent.tab();
- expect(screen.getByText('Help text')).toBeInTheDocument();
+ expect(findTooltipWithContent('Help text')).toBeInTheDocument();
});
it('should correctly render a header with value data', () => {
className?: string;
fill?: string;
size?: number;
- label?: string;
+ label?: React.ReactNode;
+ description?: React.ReactNode;
}
interface Props extends React.AriaAttributes {
className?: string;
size?: number;
style?: React.CSSProperties;
- label?: string;
+ label?: React.ReactNode;
+ description?: React.ReactNode;
// try to avoid using these:
width?: number;
width = size,
viewBox = '0 0 16 16',
label,
+ description,
'aria-hidden': hidden,
...iconProps
}: Props) {
{...iconProps}
>
{label && !hidden && <title>{label}</title>}
+ {description && !hidden && <desc>{description}</desc>}
{children}
</svg>
);
runAnalysisTitle: byRole('heading', { name: 'onboarding.analysis.header' }),
generateTokenRadio: byRole('radio', { name: 'onboarding.token.generate.PROJECT_ANALYSIS_TOKEN' }),
existingTokenRadio: byRole('radio', { name: 'onboarding.token.use_existing_token' }),
- tokenNameInput: byRole('textbox', { name: 'onboarding.token.name.label' }),
+ tokenNameInput: byRole('textbox', { name: /onboarding.token.name.label/ }),
expiresInSelect: byRole('combobox', { name: '' }),
- tokenValueInput: byRole('textbox', { name: 'onboarding.token.use_existing_token.label' }),
+ tokenValueInput: byRole('textbox', { name: /onboarding.token.use_existing_token.label/ }),
invalidTokenValueMessage: byText('onboarding.token.invalid_format'),
...getTutorialActionButtons(),
...getTutorialBuildButtons(),
expect(ui.runAnalysisTitle.get()).toBeInTheDocument();
// Generating token
- user.type(ui.tokenNameInput.get(), 'Testing token');
+ await user.type(ui.tokenNameInput.get(), 'Testing token');
await selectEvent.select(ui.expiresInSelect.get(), 'users.tokens.expiration.365');
await user.click(ui.generateTokenButton.get());
await user.type(ui.tokenValueInput.get(), 'INVALID TOKEN VALUE');
expect(ui.invalidTokenValueMessage.get()).toBeInTheDocument();
- user.clear(ui.tokenValueInput.get());
+ await user.clear(ui.tokenValueInput.get());
await user.type(ui.tokenValueInput.get(), 'validtokenvalue');
expect(ui.continueButton.get()).toBeEnabled();
const { className, leftAndRightLabel, leftLabel, upAndDownLabel, metaModifierLabel } = props;
return (
<Tooltip
- accessible={false}
overlay={
<div className="small nowrap">
<div>
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { fireEvent, render, RenderResult } from '@testing-library/react';
+import { fireEvent, Matcher, render, RenderResult, screen, within } from '@testing-library/react';
import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
import { omit } from 'lodash';
import * as React from 'react';
};
}
/* eslint-enable testing-library/no-node-access */
+
+export function findTooltipWithContent(text: Matcher, target?: HTMLElement) {
+ return target
+ ? within(target).getByText(text, { selector: 'svg > desc' })
+ : screen.getByText(text, { selector: 'svg > desc' });
+}
since_previous_version_with_only_date=since previous version ({0})
since_previous_version_detailed.short=\u0394 version ({0})
this_name_is_already_taken=This name is already taken.
+tooltip_is_interactive=This is a tooltip with interactive elements. Use the TAB key to cycle through the interactive elements.
update_details=Update details
work_duration.x_days={0}d
work_duration.x_hours={0}h
projects / sonarqube.git / commitdiff