diff options
Diffstat (limited to 'server/sonar-web/src/main/js')
12 files changed, 45 insertions, 23 deletions
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx index 091dde02396..3dd1302ee4d 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx @@ -963,6 +963,7 @@ export default class App extends React.PureComponent<Props, State> { {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')} /> </Alert> diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap index 5d9e05830a4..6ea8ad74e5b 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap @@ -42,6 +42,7 @@ exports[`should show warnning when not all projects are accessible 1`] = ` > issues.not_all_issue_show <HelpTooltip + ariaLabel="issues.not_all_issue_show_why" className="spacer-left" overlay="issues.not_all_issue_show_why" /> diff --git a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx index c3d51950625..b669d4fb2b6 100644 --- a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx +++ b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx @@ -31,11 +31,18 @@ interface Props extends Pick<IconProps, 'size'> { onShow?: () => void; overlay: React.ReactNode; placement?: Placement; + ariaLabel?: string; + ariaLabelledby?: string; } -export default function HelpTooltip({ size = 12, ...props }: Props) { +export default function HelpTooltip({ size = 12, ariaLabel, ariaLabelledby, ...props }: Props) { + const role = ariaLabel || ariaLabelledby ? 'note' : undefined; return ( - <div className={classNames('help-tooltip', props.className)}> + <div + className={classNames('help-tooltip', props.className)} + aria-labelledby={ariaLabelledby} + aria-label={ariaLabel} + role={role}> <Tooltip mouseLeaveDelay={0.25} onShow={props.onShow} diff --git a/server/sonar-web/src/main/js/components/issue/IssueView.tsx b/server/sonar-web/src/main/js/components/issue/IssueView.tsx index 74975574922..6d93c734417 100644 --- a/server/sonar-web/src/main/js/components/issue/IssueView.tsx +++ b/server/sonar-web/src/main/js/components/issue/IssueView.tsx @@ -21,6 +21,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { deleteIssueComment, editIssueComment } from '../../api/issues'; import Checkbox from '../../components/controls/Checkbox'; +import { translate } from '../../helpers/l10n'; import { BranchLike } from '../../types/branch-like'; import { updateIssue } from './actions'; import IssueActionsBar from './components/IssueActionsBar'; @@ -112,6 +113,7 @@ export default class IssueView extends React.PureComponent<Props> { checked={this.props.checked || false} className="issue-checkbox-container" onCheck={this.handleCheck} + title={translate('issues.action_select')} /> </> )} diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx index 6d91784ffa9..418d68047a9 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx @@ -50,12 +50,7 @@ export default class IssueAssign extends React.PureComponent<Props> { return ( <> <span className="text-top"> - <Avatar - className="little-spacer-right" - hash={issue.assigneeAvatar} - name={assigneeName} - size={16} - /> + <Avatar className="little-spacer-right" hash={issue.assigneeAvatar} name="" size={16} /> </span> <span className="issue-meta-label"> {issue.assigneeActive === false diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx index 00f4f1e213c..25bdb8465a0 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx @@ -50,7 +50,7 @@ export default class IssueCommentAction extends React.PureComponent<Props> { render() { return ( - <li className="issue-meta dropdown"> + <div className="issue-meta dropdown"> <Toggler closeOnClickOutside={false} onRequestClose={this.handleClose} @@ -71,7 +71,7 @@ export default class IssueCommentAction extends React.PureComponent<Props> { <span className="issue-meta-label">{translate('issue.comment.formlink')}</span> </ButtonLink> </Toggler> - </li> + </div> ); } } diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap index 8496a984f30..50e8aacb158 100644 --- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap @@ -35,7 +35,7 @@ exports[`should open the popup when the button is clicked 2`] = ` <Connect(Avatar) className="little-spacer-right" hash="gravatarhash" - name="John Doe" + name="" size={16} /> </span> @@ -111,7 +111,7 @@ exports[`should render with the action 1`] = ` <Connect(Avatar) className="little-spacer-right" hash="gravatarhash" - name="John Doe" + name="" size={16} /> </span> @@ -136,7 +136,7 @@ exports[`should render without the action when the correct rights are missing 1` <Connect(Avatar) className="little-spacer-right" hash="gravatarhash" - name="John Doe" + name="" size={16} /> </span> diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentAction-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentAction-test.tsx.snap index b83e932d61f..786ce9ab8ea 100644 --- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentAction-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentAction-test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should open the popup when the button is clicked 1`] = ` -<li +<div className="issue-meta dropdown" > <Toggler @@ -41,11 +41,11 @@ exports[`should open the popup when the button is clicked 1`] = ` </span> </ButtonLink> </Toggler> -</li> +</div> `; exports[`should render correctly 1`] = ` -<li +<div className="issue-meta dropdown" > <Toggler @@ -73,5 +73,5 @@ exports[`should render correctly 1`] = ` </span> </ButtonLink> </Toggler> -</li> +</div> `; diff --git a/server/sonar-web/src/main/js/components/tags/TagsList.tsx b/server/sonar-web/src/main/js/components/tags/TagsList.tsx index 5e43af29f56..89c10c24e99 100644 --- a/server/sonar-web/src/main/js/components/tags/TagsList.tsx +++ b/server/sonar-web/src/main/js/components/tags/TagsList.tsx @@ -34,6 +34,7 @@ export default function TagsList({ allowUpdate = false, className, tags }: Props return ( <span aria-label={translateWithParameters('tags_list_x', tags.join(', '))} + role="note" className={classNames('tags-list', className)}> <TagsIcon className="text-middle" /> <span aria-hidden={true} className="text-ellipsis text-middle" title={tags.join(', ')}> diff --git a/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap b/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap index 88c20d726e1..be6193f7834 100644 --- a/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap @@ -4,6 +4,7 @@ exports[`should render with a caret on the right if update is allowed 1`] = ` <span aria-label="tags_list_x.foo, bar" className="tags-list" + role="note" > <TagsIcon className="text-middle" @@ -25,6 +26,7 @@ exports[`should render with a list of tag 1`] = ` <span aria-label="tags_list_x.foo, bar" className="tags-list" + role="note" > <TagsIcon className="text-middle" diff --git a/server/sonar-web/src/main/js/components/ui/Alert.tsx b/server/sonar-web/src/main/js/components/ui/Alert.tsx index 8260fc71806..da30e8e1144 100644 --- a/server/sonar-web/src/main/js/components/ui/Alert.tsx +++ b/server/sonar-web/src/main/js/components/ui/Alert.tsx @@ -42,6 +42,7 @@ interface AlertVariantInformation { color: string; borderColor: string; backGroundColor: string; + role: string; } const DOUBLE = 2; @@ -105,31 +106,36 @@ function getAlertVariantInfo(variant: AlertVariant): AlertVariantInformation { icon: <AlertErrorIcon fill={colors.alertIconError} />, color: colors.alertTextError, borderColor: colors.alertBorderError, - backGroundColor: colors.alertBackgroundError + backGroundColor: colors.alertBackgroundError, + role: 'alert' }, warning: { icon: <AlertWarnIcon fill={colors.alertIconWarning} />, color: colors.alertTextWarning, borderColor: colors.alertBorderWarning, - backGroundColor: colors.alertBackgroundWarning + backGroundColor: colors.alertBackgroundWarning, + role: 'alert' }, success: { icon: <AlertSuccessIcon fill={colors.alertIconSuccess} />, color: colors.alertTextSuccess, borderColor: colors.alertBorderSuccess, - backGroundColor: colors.alertBackgroundSuccess + backGroundColor: colors.alertBackgroundSuccess, + role: 'status' }, info: { icon: <InfoIcon fill={colors.alertIconInfo} />, color: colors.alertTextInfo, borderColor: colors.alertBorderInfo, - backGroundColor: colors.alertBackgroundInfo + backGroundColor: colors.alertBackgroundInfo, + role: 'status' }, loading: { icon: <DeferredSpinner timeout={0} />, color: colors.alertTextInfo, borderColor: colors.alertBorderInfo, - backGroundColor: colors.alertBackgroundInfo + backGroundColor: colors.alertBackgroundInfo, + role: 'status' } }; @@ -146,7 +152,7 @@ export function Alert(props: AlertProps & React.HTMLAttributes<HTMLDivElement>) <StyledAlert className={classNames('alert', className)} isInline={isInline} - role="alert" + role={variantInfo.role} aria-label={translate('alert.tooltip', variant)} variantInfo={variantInfo} {...domProps}> diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap index d4ecac6c513..a21806eaa5b 100644 --- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap @@ -119,6 +119,7 @@ exports[`should render properly 1`] = ` "icon": <AlertErrorIcon fill="#a4030f" />, + "role": "alert", } } > @@ -135,6 +136,7 @@ exports[`should render properly 1`] = ` "icon": <AlertErrorIcon fill="#a4030f" />, + "role": "alert", } } > @@ -159,6 +161,7 @@ Object { "icon": <AlertErrorIcon fill="#a4030f" />, + "role": "alert", } `; @@ -170,6 +173,7 @@ Object { "icon": <AlertWarnIcon fill="#db781a" />, + "role": "alert", } `; @@ -181,6 +185,7 @@ Object { "icon": <AlertSuccessIcon fill="#6d9867" />, + "role": "status", } `; @@ -192,6 +197,7 @@ Object { "icon": <InfoIcon fill="#0271b9" />, + "role": "status", } `; @@ -203,5 +209,6 @@ Object { "icon": <DeferredSpinner timeout={0} />, + "role": "status", } `; |