From cfb2e265481817c41725eb6b6f6f4e915d4ba7a0 Mon Sep 17 00:00:00 2001 From: Wouter Admiraal Date: Thu, 1 Sep 2022 11:11:45 +0200 Subject: [PATCH] SONAR-16894 SONAR-16899 [892238] [892241] * [892238] Link or button text lacks 4.5:1 contrast ratio on hover or focus * [892241] An icon lacks 3 to 1 contrast ratio --- .../branch-like/BranchLikeNavigation.css | 2 +- .../src/main/js/app/styles/init/links.css | 2 +- server/sonar-web/src/main/js/app/theme.js | 19 ++++++++--- .../drilldown/BubbleChart.tsx | 6 +++- .../drilldown/TreeMapView.tsx | 10 ++++-- .../__snapshots__/BubbleChart-test.tsx.snap | 12 +++++-- .../components/HotspotList.css | 6 ++-- .../main/js/components/charts/BubbleChart.tsx | 6 ++-- .../js/components/charts/ColorBoxLegend.css | 15 ++++++++ .../components/charts/ColorRatingsLegend.tsx | 29 +++++++--------- .../charts/__tests__/BubbleChart-test.tsx | 20 ++++++++--- .../__snapshots__/BubbleChart-test.tsx.snap | 24 ++++++------- .../src/main/js/components/ui/Level.css | 2 +- .../src/main/js/components/ui/Rating.css | 8 ++--- .../src/main/js/helpers/constants.ts | 34 +++++++------------ 15 files changed, 119 insertions(+), 76 deletions(-) diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css index d70e4bb83db..4634417e48a 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css @@ -24,7 +24,7 @@ } .branch-like-navigation-toggler:hover { - border-color: var(--black38); + border-color: var(--blacka38); color: inherit !important; } diff --git a/server/sonar-web/src/main/js/app/styles/init/links.css b/server/sonar-web/src/main/js/app/styles/init/links.css index ad9bca70ec8..1bb180068e0 100644 --- a/server/sonar-web/src/main/js/app/styles/init/links.css +++ b/server/sonar-web/src/main/js/app/styles/init/links.css @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ a { - border-bottom: 1px solid var(--primary40); + border-bottom: 1px solid var(--primarya40); color: var(--primary); cursor: pointer; outline: none; diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js index c4b725f4e82..4d8b86bdbf0 100644 --- a/server/sonar-web/src/main/js/app/theme.js +++ b/server/sonar-web/src/main/js/app/theme.js @@ -140,28 +140,39 @@ module.exports = { darkBackgroundFontColor: '#f6f8fa', // new color palette - // some of these colors duplicate what we have above, but this will make it + // Some of these colors duplicate what we have above, but this will make it // easier to align with the UX designers on what colors to use where. + // Colors that have transparency are suffixed with an "a" followed by the percentage + // value of the alpha channel. primary: '#236a97', - primary40: 'rgba(35, 107, 151, 0.4)', + primarya40: 'rgba(35, 107, 151, 0.40)', info500: '#0271B9', success500: '#008A25', + success500a20: 'rgba(0, 138, 37, 0.20)', successVariant: '#B0D513', + successVarianta20: 'rgba(177, 213, 19, 0.20)', + successVariantDark: '#809E00', + warning: '#B95E04', warningVariant: '#EABE06', + warningVarianta20: 'rgba(234, 188, 6, 0.20)', + warningVariantDark: '#B18F00', warningAccent: '#ED7D20', + warningAccenta20: 'rgba(237, 124, 32, 0.20)', error500: '#D02F3A', + error500a20: 'rgba(208, 47, 58, 0.20)', neutral600: '#666666', neutral800: '#333333', white: '#FFFFFF', - black87: 'rgba(0, 0, 0, 0.87)', - black38: 'rgba(0, 0, 0, 0.38)' + black: '#000000', + blacka87: 'rgba(0, 0, 0, 0.87)', + blacka38: 'rgba(0, 0, 0, 0.38)' }, sizes: { diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx index fa15cae3a51..9d711a94208 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx @@ -18,6 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; +import theme from '../../../app/theme'; import OriginalBubbleChart from '../../../components/charts/BubbleChart'; import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend'; import Link from '../../../components/common/Link'; @@ -156,7 +157,10 @@ export default class BubbleChart extends React.PureComponent { x, y, size, - color: colorRating !== undefined ? RATING_COLORS[colorRating - 1] : undefined, + color: + colorRating !== undefined + ? RATING_COLORS[colorRating - 1] + : { fill: theme.colors.primary, stroke: theme.colors.primary }, data: component, tooltip: this.getTooltip(component, { x, y, size, colors }, metrics) }; diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.tsx index d564ef2fdaf..a06cf271e3e 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.tsx @@ -26,6 +26,7 @@ import ColorGradientLegend from '../../../components/charts/ColorGradientLegend' import TreeMap, { TreeMapItem } from '../../../components/charts/TreeMap'; import QualifierIcon from '../../../components/icons/QualifierIcon'; import { getComponentMeasureUniqueKey } from '../../../helpers/component'; +import { RATING_COLORS } from '../../../helpers/constants'; import { getLocalizedMetricName, translate, translateWithParameters } from '../../../helpers/l10n'; import { formatMeasure, isDiffMetric } from '../../../helpers/measures'; import { isDefined } from '../../../helpers/types'; @@ -44,8 +45,13 @@ interface State { } const HEIGHT = 500; -const COLORS = [colors.green, colors.lightGreen, colors.yellow, colors.orange, colors.red]; -const LEVEL_COLORS = [colors.red, colors.orange, colors.green, colors.gray71]; +const COLORS = RATING_COLORS.map(({ fill }) => fill); +const LEVEL_COLORS = [ + colors.error500, + colors.orange, + colors.success500, + colors.disabledQualityGate +]; const NA_GRADIENT = `linear-gradient(-45deg, ${colors.gray71} 25%, ${colors.gray60} 25%, ${colors.gray60} 50%, ${colors.gray71} 50%, ${colors.gray71} 75%, ${colors.gray60} 75%, ${colors.gray60} 100%)`; export default class TreeMapView extends React.PureComponent { diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap index d9c90ef8efd..75d26dc717f 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap @@ -276,7 +276,11 @@ exports[`should render correctly: default 1`] = ` items={ Array [ Object { - "color": "#b0d513", + "color": Object { + "fill": "#B0D513", + "fillTransparent": "rgba(177, 213, 19, 0.20)", + "stroke": "#B0D513", + }, "data": Object { "key": "foo:src/index.tsx", "leak": "1.0", @@ -485,7 +489,11 @@ exports[`should render correctly: only showing first 500 files 1`] = ` items={ Array [ Object { - "color": "#b0d513", + "color": Object { + "fill": "#B0D513", + "fillTransparent": "rgba(177, 213, 19, 0.20)", + "stroke": "#B0D513", + }, "data": Object { "key": "foo:src/index.tsx", "leak": "1.0", diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css index 41498aaf1a5..3ad0966c6fc 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css @@ -95,7 +95,7 @@ button.hotspot-item:focus { padding: 0 var(--gridSize); font-weight: bold; border-radius: 2px; - border: 1px solid var(--black38); + border: 1px solid var(--blacka38); } .hotspot-risk-badge.HIGH { @@ -103,11 +103,11 @@ button.hotspot-item:focus { background-color: var(--error500); } .hotspot-risk-badge.MEDIUM { - color: var(--black87); + color: var(--blacka87); background-color: var(--warningAccent); } .hotspot-risk-badge.LOW { - color: var(--black87); + color: var(--blacka87); background-color: var(--warningVariant); } diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx index f1bc4005a10..bf1f077913f 100644 --- a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx +++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx @@ -33,7 +33,7 @@ import './BubbleChart.css'; const TICKS_COUNT = 5; interface BubbleItem { - color?: string; + color: { fill: string; stroke: string; hover?: string }; key?: string; data?: T; size: number; @@ -343,7 +343,7 @@ export default class BubbleChart extends React.PureComponent, State> } interface BubbleProps { - color?: string; + color: { fill: string; stroke: string; hover?: string }; onClick?: (ref?: T) => void; data?: T; r: number; @@ -367,7 +367,7 @@ function Bubble(props: BubbleProps) { diff --git a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css index e9a6cc27297..ea980591587 100644 --- a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css +++ b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css @@ -22,6 +22,21 @@ justify-content: center; } +.color-box-legend .link-checkbox .color-box-legend-rating { + width: 20px; + height: 20px; + line-height: 20px; + display: inline-block; + border: 1px solid transparent; + border-radius: 20px; + color: var(--blacka87); +} + +.color-box-legend .link-checkbox[aria-checked='false'] .color-box-legend-rating { + background-color: transparent !important; + border-color: transparent !important; +} + .color-box-legend > *:not(:first-child) { margin-left: 24px; } diff --git a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx index 21a5f0ba9ee..982d0fea5c6 100644 --- a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx +++ b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx @@ -23,6 +23,7 @@ import Tooltip from '../../components/controls/Tooltip'; import { RATING_COLORS } from '../../helpers/constants'; import { translateWithParameters } from '../../helpers/l10n'; import { formatMeasure } from '../../helpers/measures'; +import Checkbox from '../controls/Checkbox'; import './ColorBoxLegend.css'; export interface ColorRatingsLegendProps { @@ -44,25 +45,19 @@ export default function ColorRatingsLegend(props: ColorRatingsLegendProps) { 'component_measures.legend.help_x', formatMeasure(rating, 'RATING') )}> - props.onRatingClick(rating)} - role="checkbox" - tabIndex={0}> + props.onRatingClick(rating)}> - + className="color-box-legend-rating little-spacer-left" + style={{ + borderColor: RATING_COLORS[rating - 1].stroke, + backgroundColor: RATING_COLORS[rating - 1].fillTransparent + }}> + {formatMeasure(rating, 'RATING')} - {formatMeasure(rating, 'RATING')} - + ))} diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx index a42768183ab..d6f5b7577c2 100644 --- a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx +++ b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx @@ -59,8 +59,8 @@ it('should display bubbles', () => { it('should render bubble links', () => { const wrapper = shallowRender({ items: [ - { x: 1, y: 10, size: 7 }, - { x: 2, y: 30, size: 5 } + { x: 1, y: 10, size: 7, color: { fill: 'blue', stroke: 'blue' } }, + { x: 2, y: 30, size: 5, color: { fill: 'green', stroke: 'green' } } ] }); wrapper @@ -141,8 +141,20 @@ function shallowRender(props: Partial['pro .rating-A, a > .rating-B, .rating-B { - color: var(--black87); + color: var(--blacka87); background-color: var(--successVariant); } a > .rating-C, .rating-C { - color: var(--black87); + color: var(--blacka87); background-color: var(--warningVariant); } a > .rating-D, .rating-D { - color: var(--black87); + color: var(--blacka87); background-color: var(--warningAccent); } diff --git a/server/sonar-web/src/main/js/helpers/constants.ts b/server/sonar-web/src/main/js/helpers/constants.ts index 48588f4f2b1..568d943c5e0 100644 --- a/server/sonar-web/src/main/js/helpers/constants.ts +++ b/server/sonar-web/src/main/js/helpers/constants.ts @@ -38,28 +38,20 @@ export const SOURCE_SCOPES = [ export const RULE_TYPES: RuleType[] = ['BUG', 'VULNERABILITY', 'CODE_SMELL', 'SECURITY_HOTSPOT']; export const RULE_STATUSES = ['READY', 'BETA', 'DEPRECATED']; -export const CHART_COLORS_RANGE_PERCENT = [ - colors.green, - colors.lightGreen, - colors.yellow, - colors.orange, - colors.red -]; - -export const CHART_REVERSED_COLORS_RANGE_PERCENT = [ - colors.red, - colors.orange, - colors.yellow, - colors.lightGreen, - colors.green -]; - export const RATING_COLORS = [ - colors.green, - colors.lightGreen, - colors.yellow, - colors.orange, - colors.red + { fill: colors.success500, fillTransparent: colors.success500a20, stroke: colors.success500 }, + { + fill: colors.successVariant, + fillTransparent: colors.successVarianta20, + stroke: colors.successVariant + }, + { + fill: colors.warningVariant, + fillTransparent: colors.warningVarianta20, + stroke: colors.warningVariantDark + }, + { fill: colors.warningAccent, fillTransparent: colors.warningAccenta20, stroke: colors.warning }, + { fill: colors.error500, fillTransparent: colors.error500a20, stroke: colors.error500 } ]; export const PROJECT_KEY_MAX_LEN = 400; -- 2.39.5