From c3d9e7c4e69437d5ef752774203a3859ecd58909 Mon Sep 17 00:00:00 2001 From: segamiken Date: Thu, 3 Nov 2022 19:16:54 +0900 Subject: [PATCH 1/9] fix: Make failure highlight more visible --- src/injected/styles/injected.scss | 10 ++++++++++ src/injected/visualization/formatter.ts | 4 ++++ src/injected/visualization/highlight-box-drawer.ts | 13 ++++++++++++- src/injected/visualization/issues-formatter.ts | 5 +++++ .../tests/injected/visualization/drawer.test.ts | 6 +++++- 5 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/injected/styles/injected.scss b/src/injected/styles/injected.scss index 7d70b0ef0c8..783790598b5 100644 --- a/src/injected/styles/injected.scss +++ b/src/injected/styles/injected.scss @@ -285,6 +285,16 @@ text-align: center !important; } + .insights-highlight-box { + &::after { + content: '' !important; + border: solid 1px white !important; + position: absolute !important; + width: calc(100% - 2px) !important; + height: calc(100% - 2px) !important; + } + } + :host { @include max-z-index-1; diff --git a/src/injected/visualization/formatter.ts b/src/injected/visualization/formatter.ts index 991aeb44ad4..6a69d1759bb 100644 --- a/src/injected/visualization/formatter.ts +++ b/src/injected/visualization/formatter.ts @@ -7,6 +7,10 @@ import { AxeResultsWithFrameLevel } from '../frameCommunicators/html-element-axe export interface DrawerConfiguration extends SimpleHighlightDrawerConfiguration { outlineStyle?: string; outlineWidth?: string; + outlineColor?: string; + borderStyle?: string; + borderWidth?: string; + borderRadius?: string; borderColor: string; showVisualization: boolean; failureBoxConfig?: FailureBoxConfig; diff --git a/src/injected/visualization/highlight-box-drawer.ts b/src/injected/visualization/highlight-box-drawer.ts index 1eabb3bad39..b3063467998 100644 --- a/src/injected/visualization/highlight-box-drawer.ts +++ b/src/injected/visualization/highlight-box-drawer.ts @@ -23,6 +23,9 @@ export class HighlightBoxDrawer extends BaseDrawer { private clientUtils: ClientUtils; public static defaultConfiguration: DrawerConfiguration = { + borderStyle: 'solid', + borderWidth: '2px', + borderRadius: '2px', borderColor: 'rgb(255, 255, 255)', textBoxConfig: { fontColor: 'rgb(255, 255, 255)', @@ -31,6 +34,8 @@ export class HighlightBoxDrawer extends BaseDrawer { boxWidth: '2em', }, outlineStyle: 'solid', + outlineWidth: '1px', + outlineColor: 'rgb(255, 255, 255)', showVisualization: true, }; @@ -108,8 +113,14 @@ export class HighlightBoxDrawer extends BaseDrawer { const wrapper = currentDom.createElement('div'); wrapper.setAttribute('class', 'insights-highlight-box'); wrapper.style.outlineStyle = drawerConfig.outlineStyle; - wrapper.style.outlineColor = drawerConfig.borderColor; + wrapper.style.outlineColor = drawerConfig.outlineColor; wrapper.style.outlineWidth = drawerConfig.outlineWidth; + + wrapper.style.borderStyle = drawerConfig.borderStyle; + wrapper.style.borderColor = drawerConfig.borderColor; + wrapper.style.borderWidth = drawerConfig.borderWidth; + wrapper.style.borderRadius = drawerConfig.borderRadius; + wrapper.style.top = this.drawerUtils.getContainerTopOffset(offset).toString() + 'px'; wrapper.style.left = this.drawerUtils.getContainerLeftOffset(offset).toString() + 'px'; wrapper.style.minWidth = diff --git a/src/injected/visualization/issues-formatter.ts b/src/injected/visualization/issues-formatter.ts index b9ae1ca2153..c3b88bab88a 100644 --- a/src/injected/visualization/issues-formatter.ts +++ b/src/injected/visualization/issues-formatter.ts @@ -58,9 +58,14 @@ export class IssuesFormatter implements Formatter { hasDialogView: true, boxWidth: '2em', }, + borderStyle: 'solid', + borderWidth: '2px', + borderRadius: '2px', borderColor: IssuesFormatter.style.borderColor, toolTip: this.getText(data), outlineStyle: 'solid', + outlineWidth: '1px', + outlineColor: 'rgb(255, 255, 255)', showVisualization: true, textAlign: 'center', cursor: 'pointer', diff --git a/src/tests/unit/tests/injected/visualization/drawer.test.ts b/src/tests/unit/tests/injected/visualization/drawer.test.ts index bebcd910a74..f8c48dbfa5c 100644 --- a/src/tests/unit/tests/injected/visualization/drawer.test.ts +++ b/src/tests/unit/tests/injected/visualization/drawer.test.ts @@ -1102,6 +1102,7 @@ describe('Drawer', () => { const element1Config: DrawerConfiguration = { borderColor: 'rgb(12, 13, 14)', + outlineColor: 'rgb(12, 13, 14)', textBoxConfig: { fontColor: 'rgb(100, 200, 0)', text: 'element 1 text', @@ -1119,6 +1120,7 @@ describe('Drawer', () => { background: 'rgb(10, 1, 15)', }, borderColor: 'rgb(10, 1, 15)', + outlineColor: 'rgb(12, 13, 14)', toolTip: 'element 2 tooltip', outlineStyle: 'dashed', showVisualization: true, @@ -1126,6 +1128,7 @@ describe('Drawer', () => { const element3Config: DrawerConfiguration = { borderColor: 'rgb(12, 13, 14)', + outlineColor: 'rgb(12, 13, 14)', toolTip: 'element 3 tooltip', outlineStyle: 'solid', showVisualization: false, @@ -1138,6 +1141,7 @@ describe('Drawer', () => { background: 'rgb(12, 13, 14)', }, borderColor: 'rgb(12, 13, 14)', + outlineColor: 'rgb(12, 13, 14)', toolTip: 'element 4 tooltip', outlineStyle: 'solid', showVisualization: true, @@ -1269,7 +1273,7 @@ describe('Drawer', () => { drawerConfig: DrawerConfiguration = HighlightBoxDrawer.defaultConfiguration, ): void { expect(overlay.container.style.outlineStyle).toEqual(drawerConfig.outlineStyle); - expect(overlay.container.style.outlineColor).toEqual(drawerConfig.borderColor); + expect(overlay.container.style.outlineColor).toEqual(drawerConfig.outlineColor); expect(overlay.container.style.top).toEqual('5px'); expect(overlay.container.style.left).toEqual('5px'); expect(overlay.container.style.minHeight).toEqual('0px'); From a64b221400e8e33167a750efea2873bfb99b76bf Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Wed, 16 Nov 2022 18:45:23 -0500 Subject: [PATCH 2/9] Refactor formatter configs to specify outlineColor instead of borderColor --- ...dings-instance-details-column-renderer.tsx | 2 +- ...marks-instance-details-column-renderer.tsx | 2 +- ...title-instance-details-column-renderer.tsx | 2 +- .../accessible-names-formatter.ts | 6 ++--- src/injected/visualization/formatter.ts | 8 +------ src/injected/visualization/frame-formatter.ts | 12 +++++----- .../visualization/heading-formatter.ts | 20 ++++++++-------- .../visualization/highlight-box-formatter.ts | 2 +- .../visualization/issues-formatter.ts | 12 +++------- .../visualization/landmark-formatter.ts | 24 +++++++++---------- .../visualization/table-headers-formatter.ts | 6 ++--- ...-instance-details-column-renderer.test.tsx | 6 ++--- ...-instance-details-column-renderer.test.tsx | 2 +- ...-instance-details-column-renderer.test.tsx | 4 ++-- .../table-headers-formatter.test.ts.snap | 8 +++---- .../accessible-names-formatter.test.ts | 3 +-- .../visualization/heading-formatter.test.ts | 2 +- .../highlight-box-formatter.test.ts | 2 +- .../visualization/issues-formatter.test.ts | 2 +- .../visualization/landmark-formatter.test.ts | 4 +--- 20 files changed, 56 insertions(+), 73 deletions(-) diff --git a/src/assessments/headings/headings-instance-details-column-renderer.tsx b/src/assessments/headings/headings-instance-details-column-renderer.tsx index b9434d60c55..5a4fd02246e 100644 --- a/src/assessments/headings/headings-instance-details-column-renderer.tsx +++ b/src/assessments/headings/headings-instance-details-column-renderer.tsx @@ -14,7 +14,7 @@ export function headingsAssessmentInstanceDetailsColumnRenderer( const headingLevel = propertyBag ? propertyBag.headingLevel : null; const labelText = headingLevel ? `H${item.instance.propertyBag.headingLevel}` : 'N/A'; const headingStyle = headingLevel ? HeadingFormatter.headingStyles[headingLevel] : null; - const background = headingStyle ? headingStyle.borderColor : '#767676'; + const background = headingStyle ? headingStyle.outlineColor : '#767676'; let customClass: string = null; if (headingLevel == null) { diff --git a/src/assessments/landmarks/landmarks-instance-details-column-renderer.tsx b/src/assessments/landmarks/landmarks-instance-details-column-renderer.tsx index f6ef01afdc2..767a0b80cf0 100644 --- a/src/assessments/landmarks/landmarks-instance-details-column-renderer.tsx +++ b/src/assessments/landmarks/landmarks-instance-details-column-renderer.tsx @@ -11,7 +11,7 @@ export function landmarksAssessmentInstanceDetailsColumnRenderer( item: InstanceTableRow, ): JSX.Element { const propertyBag = item.instance.propertyBag; - const background = LandmarkFormatter.getStyleForLandmarkRole(propertyBag.role).borderColor; + const background = LandmarkFormatter.getStyleForLandmarkRole(propertyBag.role).outlineColor; let textContent = propertyBag.role; if (propertyBag.label != null) { textContent += `: ${propertyBag.label}`; diff --git a/src/assessments/page/frametitle-instance-details-column-renderer.tsx b/src/assessments/page/frametitle-instance-details-column-renderer.tsx index 2ff52b7ca09..ccfc21c0370 100644 --- a/src/assessments/page/frametitle-instance-details-column-renderer.tsx +++ b/src/assessments/page/frametitle-instance-details-column-renderer.tsx @@ -16,7 +16,7 @@ export function frameTitleInstanceDetailsColumnRenderer( return ( diff --git a/src/injected/visualization/accessible-names-formatter.ts b/src/injected/visualization/accessible-names-formatter.ts index 4e9ca7b80fc..88e206a0346 100644 --- a/src/injected/visualization/accessible-names-formatter.ts +++ b/src/injected/visualization/accessible-names-formatter.ts @@ -17,7 +17,7 @@ export class AccessibleNamesFormatter implements Formatter { } public static style: HeadingStyleConfiguration = { - borderColor: '#8D4DFF', + outlineColor: '#8D4DFF', fontColor: '#FFFFFF', }; @@ -48,13 +48,13 @@ export class AccessibleNamesFormatter implements Formatter { const config: DrawerConfiguration = { textBoxConfig: { fontColor: AccessibleNamesFormatter.style.fontColor, - background: AccessibleNamesFormatter.style.borderColor, + background: AccessibleNamesFormatter.style.outlineColor, text: accessibleNameToDisplay?.accessibleName, fontWeight: '400', fontSize: '10px', outline: '3px dashed', }, - borderColor: AccessibleNamesFormatter.style.borderColor, + outlineColor: AccessibleNamesFormatter.style.outlineColor, outlineStyle: 'dashed', outlineWidth: '3px', showVisualization: true, diff --git a/src/injected/visualization/formatter.ts b/src/injected/visualization/formatter.ts index 6a69d1759bb..ebd896b1431 100644 --- a/src/injected/visualization/formatter.ts +++ b/src/injected/visualization/formatter.ts @@ -5,13 +5,8 @@ import { DialogRenderer } from '../dialog-renderer'; import { AxeResultsWithFrameLevel } from '../frameCommunicators/html-element-axe-results-helper'; export interface DrawerConfiguration extends SimpleHighlightDrawerConfiguration { - outlineStyle?: string; - outlineWidth?: string; + outlineStyle?: 'solid' | 'dashed'; outlineColor?: string; - borderStyle?: string; - borderWidth?: string; - borderRadius?: string; - borderColor: string; showVisualization: boolean; failureBoxConfig?: FailureBoxConfig; toolTip?: string; @@ -42,7 +37,6 @@ export interface BoxConfig { boxWidth?: string; fontSize?: string; fontWeight?: string; - outline?: string; } export interface StrokeConfiguration { diff --git a/src/injected/visualization/frame-formatter.ts b/src/injected/visualization/frame-formatter.ts index cf5376a3058..92f7888ea96 100644 --- a/src/injected/visualization/frame-formatter.ts +++ b/src/injected/visualization/frame-formatter.ts @@ -6,7 +6,7 @@ import { FailureInstanceFormatter } from './failure-instance-formatter'; import { DrawerConfiguration } from './formatter'; export interface FrameStyleConfiguration { - borderColor: string; + outlineColor: string; fontColor: string; contentText: string; } @@ -14,17 +14,17 @@ export interface FrameStyleConfiguration { export class FrameFormatter extends FailureInstanceFormatter { public static frameStyles: { [frameType: string]: FrameStyleConfiguration } = { frame: { - borderColor: '#0066CC', + outlineColor: '#0066CC', fontColor: '#FFFFFF', contentText: 'F', }, iframe: { - borderColor: '#00CC00', + outlineColor: '#00CC00', fontColor: '#FFFFFF', contentText: 'I', }, default: { - borderColor: '#C00000', + outlineColor: '#C00000', fontColor: '#FFFFFF', contentText: '', }, @@ -45,9 +45,9 @@ export class FrameFormatter extends FailureInstanceFormatter { textBoxConfig: { fontColor: style.fontColor, text: style.contentText, - background: style.borderColor, + background: style.outlineColor, }, - borderColor: style.borderColor, + outlineColor: style.outlineColor, outlineStyle: 'solid', showVisualization: true, textAlign: 'center', diff --git a/src/injected/visualization/heading-formatter.ts b/src/injected/visualization/heading-formatter.ts index 52a7a93948b..0cb1621cf34 100644 --- a/src/injected/visualization/heading-formatter.ts +++ b/src/injected/visualization/heading-formatter.ts @@ -7,7 +7,7 @@ import { FailureInstanceFormatter } from './failure-instance-formatter'; import { DrawerConfiguration } from './formatter'; export interface HeadingStyleConfiguration { - borderColor: string; + outlineColor: string; fontColor: string; } @@ -25,31 +25,31 @@ export class HeadingFormatter extends FailureInstanceFormatter { public static headingStyles: { [level: string]: HeadingStyleConfiguration } = { '1': { - borderColor: '#0066CC', + outlineColor: '#0066CC', fontColor: '#FFFFFF', }, '2': { - borderColor: '#CC0099', + outlineColor: '#CC0099', fontColor: '#FFFFFF', }, '3': { - borderColor: '#008000', + outlineColor: '#008000', fontColor: '#FFFFFF', }, '4': { - borderColor: '#6600CC', + outlineColor: '#6600CC', fontColor: '#FFFFFF', }, '5': { - borderColor: '#008080', + outlineColor: '#008080', fontColor: '#FFFFFF', }, '6': { - borderColor: '#996633', + outlineColor: '#996633', fontColor: '#FFFFFF', }, blank: { - borderColor: '#C00000', + outlineColor: '#C00000', fontColor: '#FFFFFF', }, }; @@ -72,9 +72,9 @@ export class HeadingFormatter extends FailureInstanceFormatter { textBoxConfig: { fontColor: style.fontColor, text, - background: style.borderColor, + background: style.outlineColor, }, - borderColor: style.borderColor, + outlineColor: style.outlineColor, outlineStyle: 'solid', showVisualization: true, textAlign: 'center', diff --git a/src/injected/visualization/highlight-box-formatter.ts b/src/injected/visualization/highlight-box-formatter.ts index 7b599447831..9ef713a4787 100644 --- a/src/injected/visualization/highlight-box-formatter.ts +++ b/src/injected/visualization/highlight-box-formatter.ts @@ -21,7 +21,7 @@ export class HighlightBoxFormatter extends FailureInstanceFormatter { ): DrawerConfiguration { const drawerConfig: DrawerConfiguration = { failureBoxConfig: this.getFailureBoxConfig(data), - borderColor: IssuesFormatter.style.borderColor, + outlineColor: IssuesFormatter.style.outlineColor, outlineStyle: 'solid', showVisualization: true, textAlign: 'center', diff --git a/src/injected/visualization/issues-formatter.ts b/src/injected/visualization/issues-formatter.ts index c3b88bab88a..acc7f734f17 100644 --- a/src/injected/visualization/issues-formatter.ts +++ b/src/injected/visualization/issues-formatter.ts @@ -42,7 +42,7 @@ export class IssuesFormatter implements Formatter { } public static style: HeadingStyleConfiguration = { - borderColor: '#E81123', + outlineColor: '#E81123', fontColor: '#FFFFFF', }; @@ -52,20 +52,14 @@ export class IssuesFormatter implements Formatter { ): DrawerConfiguration { const config: DrawerConfiguration = { failureBoxConfig: { - background: IssuesFormatter.style.borderColor, + background: IssuesFormatter.style.outlineColor, fontColor: '#FFFFFF', text: '!', hasDialogView: true, boxWidth: '2em', }, - borderStyle: 'solid', - borderWidth: '2px', - borderRadius: '2px', - borderColor: IssuesFormatter.style.borderColor, + outlineColor: IssuesFormatter.style.outlineColor, toolTip: this.getText(data), - outlineStyle: 'solid', - outlineWidth: '1px', - outlineColor: 'rgb(255, 255, 255)', showVisualization: true, textAlign: 'center', cursor: 'pointer', diff --git a/src/injected/visualization/landmark-formatter.ts b/src/injected/visualization/landmark-formatter.ts index 7c8b9cf2407..db96bac4595 100644 --- a/src/injected/visualization/landmark-formatter.ts +++ b/src/injected/visualization/landmark-formatter.ts @@ -18,41 +18,41 @@ interface ElemData { export class LandmarkFormatter extends FailureInstanceFormatter { private static readonly landmarkStyles: { [role: string]: HeadingStyleConfiguration } = { banner: { - borderColor: '#d08311', + outlineColor: '#d08311', fontColor: '#ffffff', }, complementary: { - borderColor: '#6b9d1a', + outlineColor: '#6b9d1a', fontColor: '#ffffff', }, contentinfo: { - borderColor: '#00a88c', + outlineColor: '#00a88c', fontColor: '#ffffff', }, form: { - borderColor: '#0298c7', + outlineColor: '#0298c7', fontColor: '#ffffff', }, main: { - borderColor: '#cb2e6d', + outlineColor: '#cb2e6d', fontColor: '#ffffff', }, navigation: { - borderColor: '#9b38e6', + outlineColor: '#9b38e6', fontColor: '#ffffff', }, region: { - borderColor: '#2560e0', + outlineColor: '#2560e0', fontColor: '#ffffff', }, search: { - borderColor: '#d363d8', + outlineColor: '#d363d8', fontColor: '#ffffff', }, }; private static readonly invalidLandmarkStyle: HeadingStyleConfiguration = { - borderColor: '#C00000', + outlineColor: '#C00000', fontColor: '#FFFFFF', }; @@ -76,15 +76,13 @@ export class LandmarkFormatter extends FailureInstanceFormatter { const drawerConfig: DrawerConfiguration = { textBoxConfig: { fontColor: style.fontColor, - background: style.borderColor, + background: style.outlineColor, text: elemData.label, fontSize: '14pt !important', fontWeight: '600', - outline: `3px dashed ${style.borderColor}`, }, - borderColor: style.borderColor, + outlineColor: style.outlineColor, outlineStyle: 'dashed', - outlineWidth: '3px', showVisualization: true, }; diff --git a/src/injected/visualization/table-headers-formatter.ts b/src/injected/visualization/table-headers-formatter.ts index 6aff7ae2aa3..772d1552a7e 100644 --- a/src/injected/visualization/table-headers-formatter.ts +++ b/src/injected/visualization/table-headers-formatter.ts @@ -25,7 +25,7 @@ export class TableHeadersAttributeFormatter extends FailureInstanceFormatter { const isHeader = element.matches('th'); const style = { - borderColor: isHeader ? this.headerColor : this.cellColor, + outlineColor: isHeader ? this.headerColor : this.cellColor, fontColor: '#FFFFFF', }; @@ -35,9 +35,9 @@ export class TableHeadersAttributeFormatter extends FailureInstanceFormatter { textBoxConfig: { fontColor: style.fontColor, text, - background: style.borderColor, + background: style.outlineColor, }, - borderColor: style.borderColor, + outlineColor: style.outlineColor, outlineStyle: 'solid', showVisualization: true, textAlign: 'right', diff --git a/src/tests/unit/tests/assessments/frametitle-instance-details-column-renderer.test.tsx b/src/tests/unit/tests/assessments/frametitle-instance-details-column-renderer.test.tsx index cc75a2f68f3..627be159003 100644 --- a/src/tests/unit/tests/assessments/frametitle-instance-details-column-renderer.test.tsx +++ b/src/tests/unit/tests/assessments/frametitle-instance-details-column-renderer.test.tsx @@ -18,7 +18,7 @@ describe('FrameTitleInstanceDetailsColumnRendererTest', () => { } as InstanceTableRow; const expected = ( @@ -39,7 +39,7 @@ describe('FrameTitleInstanceDetailsColumnRendererTest', () => { } as InstanceTableRow; const expected = ( @@ -60,7 +60,7 @@ describe('FrameTitleInstanceDetailsColumnRendererTest', () => { } as InstanceTableRow; const expected = ( diff --git a/src/tests/unit/tests/assessments/headings-instance-details-column-renderer.test.tsx b/src/tests/unit/tests/assessments/headings-instance-details-column-renderer.test.tsx index 06d42901079..5e4de10bf66 100644 --- a/src/tests/unit/tests/assessments/headings-instance-details-column-renderer.test.tsx +++ b/src/tests/unit/tests/assessments/headings-instance-details-column-renderer.test.tsx @@ -37,7 +37,7 @@ describe('HeadingsInstanceDetailsColumnRendererTest', () => { } as InstanceTableRow; const expected = ( { } as InstanceTableRow; const expected = ( @@ -39,7 +39,7 @@ describe('LandmarksInstanceDetailsColumnRendererTest', () => { } as InstanceTableRow; const expected = ( diff --git a/src/tests/unit/tests/injected/visualization/__snapshots__/table-headers-formatter.test.ts.snap b/src/tests/unit/tests/injected/visualization/__snapshots__/table-headers-formatter.test.ts.snap index 95f72b6a84e..1020411b681 100644 --- a/src/tests/unit/tests/injected/visualization/__snapshots__/table-headers-formatter.test.ts.snap +++ b/src/tests/unit/tests/injected/visualization/__snapshots__/table-headers-formatter.test.ts.snap @@ -2,8 +2,8 @@ exports[`TableHeadersAttributeFormatter getDrawerConfiguration - td headers=headers role=null id=id 1`] = ` { - "borderColor": "#6600CC", "failureBoxConfig": null, + "outlineColor": "#6600CC", "outlineStyle": "solid", "showVisualization": true, "textAlign": "right", @@ -17,8 +17,8 @@ exports[`TableHeadersAttributeFormatter getDrawerConfiguration - td headers=head exports[`TableHeadersAttributeFormatter getDrawerConfiguration - td headers=headers role=null id=null 1`] = ` { - "borderColor": "#6600CC", "failureBoxConfig": null, + "outlineColor": "#6600CC", "outlineStyle": "solid", "showVisualization": true, "textAlign": "right", @@ -32,8 +32,8 @@ exports[`TableHeadersAttributeFormatter getDrawerConfiguration - td headers=head exports[`TableHeadersAttributeFormatter getDrawerConfiguration - th headers=headers role=null id=id 1`] = ` { - "borderColor": "#0066CC", "failureBoxConfig": null, + "outlineColor": "#0066CC", "outlineStyle": "solid", "showVisualization": true, "textAlign": "right", @@ -47,8 +47,8 @@ exports[`TableHeadersAttributeFormatter getDrawerConfiguration - th headers=head exports[`TableHeadersAttributeFormatter getDrawerConfiguration - th headers=null role=null id=id 1`] = ` { - "borderColor": "#0066CC", "failureBoxConfig": null, + "outlineColor": "#0066CC", "outlineStyle": "solid", "showVisualization": true, "textAlign": "right", diff --git a/src/tests/unit/tests/injected/visualization/accessible-names-formatter.test.ts b/src/tests/unit/tests/injected/visualization/accessible-names-formatter.test.ts index d3f51de6347..7ea3bce081e 100644 --- a/src/tests/unit/tests/injected/visualization/accessible-names-formatter.test.ts +++ b/src/tests/unit/tests/injected/visualization/accessible-names-formatter.test.ts @@ -40,9 +40,8 @@ describe('AccessibleNamesFormatterTests', () => { }); function testStyling(Drawerconfig: DrawerConfiguration, accessibleText: string) { - expect(Drawerconfig.borderColor).toBe('#8D4DFF'); + expect(Drawerconfig.outlineColor).toBe('#8D4DFF'); expect(Drawerconfig.outlineStyle).toBe('dashed'); - expect(Drawerconfig.outlineWidth).toBe('3px'); expect(Drawerconfig.showVisualization).toBe(true); expect(Drawerconfig.textBoxConfig.fontColor).toBe('#FFFFFF'); expect(Drawerconfig.textBoxConfig.background).toBe('#8D4DFF'); diff --git a/src/tests/unit/tests/injected/visualization/heading-formatter.test.ts b/src/tests/unit/tests/injected/visualization/heading-formatter.test.ts index 2f839c7cb4a..1a31a5db063 100644 --- a/src/tests/unit/tests/injected/visualization/heading-formatter.test.ts +++ b/src/tests/unit/tests/injected/visualization/heading-formatter.test.ts @@ -230,7 +230,7 @@ describe('HeadingFormatterTests', () => { text: string, ): void { expect(config.showVisualization).toBe(true); - expect(config.borderColor).toBe(headingStyle.borderColor); + expect(config.outlineColor).toBe(headingStyle.outlineColor); expect(config.textBoxConfig.fontColor).toBe(headingStyle.fontColor); expect(config.textBoxConfig.text).toBe(text); } diff --git a/src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts b/src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts index 3c23c6cae62..c5dd1efd1f7 100644 --- a/src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts +++ b/src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts @@ -17,7 +17,7 @@ describe('HighlightBoxFormatterTests', () => { expect(config.showVisualization).toBe(true); expect(config.failureBoxConfig).toBeNull(); - expect(config.borderColor).toEqual('#E81123'); + expect(config.outlineColor).toEqual('#E81123'); expect(config.textAlign).toEqual('center'); }); diff --git a/src/tests/unit/tests/injected/visualization/issues-formatter.test.ts b/src/tests/unit/tests/injected/visualization/issues-formatter.test.ts index 6c07a0e81c8..f1d3b90ee18 100644 --- a/src/tests/unit/tests/injected/visualization/issues-formatter.test.ts +++ b/src/tests/unit/tests/injected/visualization/issues-formatter.test.ts @@ -78,7 +78,7 @@ describe('IssuesFormatterTests', () => { const config = testSubject.getDrawerConfiguration(htmlElement, axeData); expect(config.showVisualization).toBe(true); - expect(config.borderColor).toEqual(issuesStyle.borderColor); + expect(config.outlineColor).toEqual(issuesStyle.outlineColor); expect(config.failureBoxConfig.fontColor).toEqual(issuesStyle.fontColor); expect(config.failureBoxConfig.text).toEqual('!'); expect(config.failureBoxConfig.boxWidth).toEqual('2em'); diff --git a/src/tests/unit/tests/injected/visualization/landmark-formatter.test.ts b/src/tests/unit/tests/injected/visualization/landmark-formatter.test.ts index 2ecf95551d4..cfc8844c13d 100644 --- a/src/tests/unit/tests/injected/visualization/landmark-formatter.test.ts +++ b/src/tests/unit/tests/injected/visualization/landmark-formatter.test.ts @@ -113,12 +113,10 @@ describe('LandmarkFormatterTests', () => { const landmarkStyle = getLandmarkStyle(givenRole); expect(config.showVisualization).toBe(true); expect(config.outlineStyle).toEqual('dashed'); - expect(config.outlineWidth).toBe('3px'); - expect(config.borderColor).toEqual(landmarkStyle.borderColor); + expect(config.outlineColor).toEqual(landmarkStyle.outlineColor); expect(config.textBoxConfig.fontColor).toEqual(landmarkStyle.fontColor); expect(config.textBoxConfig.fontSize).toEqual('14pt !important'); expect(config.textBoxConfig.fontWeight).toBe('600'); - expect(config.textBoxConfig.outline).toBe(`3px dashed ${landmarkStyle.borderColor}`); if (isFailure) { expect(config.failureBoxConfig).toEqual(FailureInstanceFormatter.failureBoxConfig); From f83f385b924d12bbd9207aa076e087900b5267b7 Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Wed, 16 Nov 2022 18:45:49 -0500 Subject: [PATCH 3/9] remove obsolete type that referred to borderColor --- src/injected/scanner.d.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/injected/scanner.d.ts b/src/injected/scanner.d.ts index f70c086200e..908969fcc1f 100644 --- a/src/injected/scanner.d.ts +++ b/src/injected/scanner.d.ts @@ -23,13 +23,6 @@ declare interface AxeNodeResult { snippet?: string; } -declare interface LandmarkValue { - selectors: string[]; - label: string[]; - borderColor: string; - fontColor: string; -} - declare function getAxeResults( rulesToTest: string[], successCallback: (axeResults: AxeResult) => void, From ab39f63eaad69400bd16f7aa558eab9819bae4d6 Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Wed, 16 Nov 2022 18:46:27 -0500 Subject: [PATCH 4/9] Update highlight box drawing to use box-shadow + outline --- src/injected/styles/injected.scss | 87 ++++++++++++------- src/injected/visualization/base-drawer.ts | 2 +- .../visualization/highlight-box-drawer.ts | 45 ++-------- .../injected/visualization/drawer.test.ts | 84 +++++++++++------- 4 files changed, 118 insertions(+), 100 deletions(-) diff --git a/src/injected/styles/injected.scss b/src/injected/styles/injected.scss index 783790598b5..7728cc2618f 100644 --- a/src/injected/styles/injected.scss +++ b/src/injected/styles/injected.scss @@ -255,43 +255,68 @@ } } - .insights-highlight-container .insights-highlight-box { - visibility: visible !important; - position: absolute !important; - overflow: hidden !important; - pointer-events: none !important; + .insights-highlight-container { + .insights-highlight-box { + visibility: visible !important; + position: absolute !important; + overflow: hidden !important; + pointer-events: none !important; + } - @include ms-high-contrast-override { - forced-color-adjust: none; - outline-color: Highlight !important; + // This applies to both the text in highlight boxes and also the text + // in highlight circled used for tab/focus visualizers + .insights-highlight-text { + @include ms-high-contrast-override { + // Note that forced-color-adjust: none is required for highlight box labels' + // outline/box-shadows to be inherited correctly in HC mode, in addition to being + // required for color and background-color + forced-color-adjust: none; + color: HighlightText !important; + background-color: Highlight !important; + } } - } - .insights-highlight-container .insights-highlight-text { - @include ms-high-contrast-override { - forced-color-adjust: none; - color: HighlightText !important; - background-color: Highlight !important; + .insights-highlight-box .insights-highlight-text { + cursor: default !important; + pointer-events: all !important; + font-size: 1em !important; + padding: 0.3em !important; + float: right !important; + position: relative !important; + text-align: center !important; + + // This results in the highlight box outline appearing to also run down the left edge of + // the label + outline: inherit !important; + outline-offset: inherit !important; + box-shadow: inherit !important; } - } - .insights-highlight-container .insights-highlight-box .insights-highlight-text { - cursor: default !important; - pointer-events: all !important; - font-size: 1em !important; - padding: 0.3em !important; - float: right !important; - position: relative !important; - text-align: center !important; - } + .insights-highlight-outline-solid { + // Non-HC outline-color is intentionally unset; individual formatters should override it + outline-width: 1px !important; + outline-style: solid !important; + outline-offset: 1px !important; + box-shadow: 0 0 0 3px white !important; + + @include ms-high-contrast-override { + forced-color-adjust: none; + outline-color: Highlight !important; + box-shadow: 0 0 0 3px HighlightText !important; + } + } - .insights-highlight-box { - &::after { - content: '' !important; - border: solid 1px white !important; - position: absolute !important; - width: calc(100% - 2px) !important; - height: calc(100% - 2px) !important; + .insights-highlight-outline-dashed { + // Non-HC outline-color is intentionally unset; individual formatters should override it + outline-width: 2px !important; + outline-style: dashed !important; + outline-offset: 1px !important; + box-shadow: 0 0 0 4px white !important; + + @include ms-high-contrast-override { + outline-color: Highlight !important; + box-shadow: 0 0 0 4px HighlightText !important; + } } } diff --git a/src/injected/visualization/base-drawer.ts b/src/injected/visualization/base-drawer.ts index ee83a9c5738..6e1a90b2cfb 100644 --- a/src/injected/visualization/base-drawer.ts +++ b/src/injected/visualization/base-drawer.ts @@ -28,7 +28,7 @@ export abstract class BaseDrawer implements Drawer { windowUtils: WindowUtils, shadowUtils: ShadowUtils, drawerUtils: DrawerUtils, - formatter: Formatter = null, + formatter: Formatter, ) { this.dom = dom; this.containerClass = containerClass; diff --git a/src/injected/visualization/highlight-box-drawer.ts b/src/injected/visualization/highlight-box-drawer.ts index b3063467998..01686a653b6 100644 --- a/src/injected/visualization/highlight-box-drawer.ts +++ b/src/injected/visualization/highlight-box-drawer.ts @@ -22,23 +22,6 @@ export class HighlightBoxDrawer extends BaseDrawer { protected dialogRenderer: DialogRenderer; private clientUtils: ClientUtils; - public static defaultConfiguration: DrawerConfiguration = { - borderStyle: 'solid', - borderWidth: '2px', - borderRadius: '2px', - borderColor: 'rgb(255, 255, 255)', - textBoxConfig: { - fontColor: 'rgb(255, 255, 255)', - background: '#FFFFFF', - text: null, - boxWidth: '2em', - }, - outlineStyle: 'solid', - outlineWidth: '1px', - outlineColor: 'rgb(255, 255, 255)', - showVisualization: true, - }; - constructor( dom: Document, containerClass: string, @@ -46,14 +29,12 @@ export class HighlightBoxDrawer extends BaseDrawer { shadowUtils: ShadowUtils, drawerUtils: DrawerUtils, clientUtils: ClientUtils, - formatter: Formatter = null, + formatter: Formatter, private readonly getElementsToHighlight: typeof getTargetElementsFromResult = getTargetElementsFromResult, ) { super(dom, containerClass, windowUtils, shadowUtils, drawerUtils, formatter); this.clientUtils = clientUtils; - if (this.formatter) { - this.dialogRenderer = this.formatter.getDialogRenderer(); - } + this.dialogRenderer = this.formatter.getDialogRenderer(); } public initialize(config: DrawerInitData): void { @@ -79,13 +60,10 @@ export class HighlightBoxDrawer extends BaseDrawer { const body = currentDom.body; const bodyStyle = this.windowUtils.getComputedStyle(body); - let drawerConfig = HighlightBoxDrawer.defaultConfiguration; - if (this.formatter) { - drawerConfig = this.formatter.getDrawerConfiguration( - element, - data, - ) as DrawerConfiguration; - } + const drawerConfig = this.formatter.getDrawerConfiguration( + element, + data, + ) as DrawerConfiguration; let elementBoundingClientRect: BoundingRect = element.getBoundingClientRect(); if (drawerConfig.getBoundingRect) { @@ -111,15 +89,9 @@ export class HighlightBoxDrawer extends BaseDrawer { } const wrapper = currentDom.createElement('div'); - wrapper.setAttribute('class', 'insights-highlight-box'); - wrapper.style.outlineStyle = drawerConfig.outlineStyle; + wrapper.classList.add('insights-highlight-box'); + wrapper.classList.add(`insights-highlight-outline-${drawerConfig.outlineStyle ?? 'solid'}`); wrapper.style.outlineColor = drawerConfig.outlineColor; - wrapper.style.outlineWidth = drawerConfig.outlineWidth; - - wrapper.style.borderStyle = drawerConfig.borderStyle; - wrapper.style.borderColor = drawerConfig.borderColor; - wrapper.style.borderWidth = drawerConfig.borderWidth; - wrapper.style.borderRadius = drawerConfig.borderRadius; wrapper.style.top = this.drawerUtils.getContainerTopOffset(offset).toString() + 'px'; wrapper.style.left = this.drawerUtils.getContainerLeftOffset(offset).toString() + 'px'; @@ -189,7 +161,6 @@ export class HighlightBoxDrawer extends BaseDrawer { box.style.color = boxConfig.fontColor; box.style.fontSize = boxConfig.fontSize; box.style.fontWeight = boxConfig.fontWeight; - box.style.outline = boxConfig.outline; box.style.setProperty('width', boxConfig.boxWidth, 'important'); box.style.setProperty('cursor', drawerConfig.cursor, 'important'); box.style.setProperty('text-align', drawerConfig.textAlign, 'important'); diff --git a/src/tests/unit/tests/injected/visualization/drawer.test.ts b/src/tests/unit/tests/injected/visualization/drawer.test.ts index f8c48dbfa5c..96261b34cc0 100644 --- a/src/tests/unit/tests/injected/visualization/drawer.test.ts +++ b/src/tests/unit/tests/injected/visualization/drawer.test.ts @@ -274,7 +274,7 @@ describe('Drawer', () => { bottom: 2003, }; const configStub: DrawerConfiguration = { - borderColor: 'rgb(255, 255, 255)', + outlineColor: 'rgb(255, 255, 255)', textBoxConfig: { fontColor: 'rgb(255, 255, 255)', background: '#FFFFFF', @@ -1101,7 +1101,6 @@ describe('Drawer', () => { `; const element1Config: DrawerConfiguration = { - borderColor: 'rgb(12, 13, 14)', outlineColor: 'rgb(12, 13, 14)', textBoxConfig: { fontColor: 'rgb(100, 200, 0)', @@ -1119,7 +1118,6 @@ describe('Drawer', () => { text: 'element 2 text', background: 'rgb(10, 1, 15)', }, - borderColor: 'rgb(10, 1, 15)', outlineColor: 'rgb(12, 13, 14)', toolTip: 'element 2 tooltip', outlineStyle: 'dashed', @@ -1127,7 +1125,6 @@ describe('Drawer', () => { }; const element3Config: DrawerConfiguration = { - borderColor: 'rgb(12, 13, 14)', outlineColor: 'rgb(12, 13, 14)', toolTip: 'element 3 tooltip', outlineStyle: 'solid', @@ -1140,23 +1137,32 @@ describe('Drawer', () => { text: 'element 4 text', background: 'rgb(12, 13, 14)', }, - borderColor: 'rgb(12, 13, 14)', outlineColor: 'rgb(12, 13, 14)', toolTip: 'element 4 tooltip', outlineStyle: 'solid', showVisualization: true, }; - class FormatterStub implements Formatter { - public getDrawerConfiguration(el: Node, data): DrawerConfiguration { - throw new Error('Not implemented'); + class ConfigPerIdFormatterStub extends FormatterStub { + public constructor( + private readonly drawerConfigsById: { + [id in string]: DrawerConfiguration; + }, + ) { + super(null); } - public getDialogRenderer(): DialogRenderer { - return null; + public override getDrawerConfiguration(el: Node, data): DrawerConfiguration { + return this.drawerConfigsById[(el as Element).id]; } } - const formatterMock = Mock.ofType(FormatterStub); + + const formatterStub = new ConfigPerIdFormatterStub({ + id1: element1Config, + id2: element2Config, + id3: element3Config, + id4: element4Config, + }); windowUtilsMock .setup(wu => wu.getComputedStyle(It.isAny())) @@ -1167,23 +1173,9 @@ describe('Drawer', () => { const elementResults = createElementResults(['#id1', '#id2', '#id3', '#id4']); - function addMockForElement(selector: string, config: DrawerConfiguration): void { - const elementResult = elementResults.filter(el => el.target[0] === selector)[0]; - formatterMock - .setup(it => - it.getDrawerConfiguration(fakeDocument.querySelector(selector), elementResult), - ) - .returns(() => config) - .verifiable(); - } - addMockForElement('#id1', element1Config); - addMockForElement('#id2', element2Config); - addMockForElement('#id3', element3Config); - addMockForElement('#id4', element4Config); - const testSubject = createDrawerBuilder() .setDomAndDrawerUtils(fakeDocument) - .setFormatter(formatterMock.object) + .setFormatter(formatterStub) .setWindowUtils(windowUtilsMock.object) .setDrawerUtils(getDrawerUtilsMock(fakeDocument).object) .build(); @@ -1192,7 +1184,6 @@ describe('Drawer', () => { await testSubject.drawLayout(); expect(testSubject.isOverlayEnabled).toEqual(true); - formatterMock.verifyAll(); const overlays = findCurrentDrawerOverlays(); @@ -1270,28 +1261,33 @@ describe('Drawer', () => { function verifyOverlayStyle( overlay: { container: HTMLDivElement; label: HTMLDivElement; failureLabel: HTMLDivElement }, - drawerConfig: DrawerConfiguration = HighlightBoxDrawer.defaultConfiguration, + drawerConfig: DrawerConfiguration = FormatterStub.defaultStubDrawerConfiguration, ): void { - expect(overlay.container.style.outlineStyle).toEqual(drawerConfig.outlineStyle); + expect(overlay.container.className).toEqual( + `insights-highlight-box insights-highlight-outline-${drawerConfig.outlineStyle}`, + ); expect(overlay.container.style.outlineColor).toEqual(drawerConfig.outlineColor); expect(overlay.container.style.top).toEqual('5px'); expect(overlay.container.style.left).toEqual('5px'); expect(overlay.container.style.minHeight).toEqual('0px'); expect(overlay.container.style.minWidth).toEqual('0px'); expect(overlay.container.title).toEqual(drawerConfig.toolTip || ''); - expect(overlay.label.style.backgroundColor).toEqual(drawerConfig.borderColor); expect(overlay.label.style.textAlign).toEqual(drawerConfig.textAlign || ''); expect(overlay.label.style.cursor).toEqual(drawerConfig.cursor || ''); if (drawerConfig.textBoxConfig) { expect(overlay.label.innerText).toEqual(drawerConfig.textBoxConfig.text || ''); expect(overlay.label.style.width).toEqual(drawerConfig.textBoxConfig.boxWidth || ''); expect(overlay.label.style.color).toEqual(drawerConfig.textBoxConfig.fontColor); + expect(overlay.label.style.background).toEqual(drawerConfig.textBoxConfig.background); expect(overlay.label.className).toEqual('insights-highlight-text text-label'); } if (drawerConfig.failureBoxConfig) { expect(overlay.label.innerText).toEqual(drawerConfig.failureBoxConfig.text || ''); expect(overlay.label.style.width).toEqual(drawerConfig.failureBoxConfig.boxWidth || ''); expect(overlay.label.style.color).toEqual(drawerConfig.failureBoxConfig.fontColor); + expect(overlay.label.style.background).toEqual( + drawerConfig.failureBoxConfig.background, + ); expect(overlay.label.className).toEqual('insights-highlight-text failure-label'); } } @@ -1383,7 +1379,7 @@ describe('Drawer', () => { } function createDrawerBuilder(): DrawerBuilder { - return new DrawerBuilder(shadowUtilsMock.object); + return new DrawerBuilder(shadowUtilsMock.object).setFormatter(new FormatterStub()); } function setupWindow(): void { @@ -1444,3 +1440,29 @@ describe('Drawer', () => { .verifiable(Times.never()); } }); + +class FormatterStub implements Formatter { + public static readonly defaultStubDrawerConfiguration: DrawerConfiguration = { + outlineColor: 'rgb(1, 2, 3)', + outlineStyle: 'solid', + showVisualization: true, + textBoxConfig: { + fontColor: 'rgb(4, 5, 6)', + background: 'rgb(7, 8, 9)', + text: null, + boxWidth: '2em', + }, + }; + + public constructor( + public readonly drawerConfiguration: DrawerConfiguration = FormatterStub.defaultStubDrawerConfiguration, + ) {} + + public getDrawerConfiguration(el: Node, data): DrawerConfiguration { + return this.drawerConfiguration; + } + + public getDialogRenderer(): DialogRenderer { + return null; + } +} From a212fa686b46c9cf267f508edcf3ac8248c45de7 Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Wed, 16 Nov 2022 19:16:18 -0500 Subject: [PATCH 5/9] Update e2e snapshots --- .../__snapshots__/headings.test.ts.snap | 4 +-- .../__snapshots__/adhoc-panel.test.ts.snap | 28 +++++++++---------- .../visualization-boxes.test.ts.snap | 20 ++++++------- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/tests/end-to-end/tests/details-view/__snapshots__/headings.test.ts.snap b/src/tests/end-to-end/tests/details-view/__snapshots__/headings.test.ts.snap index 4e4c8d3e09e..21664215ad3 100644 --- a/src/tests/end-to-end/tests/details-view/__snapshots__/headings.test.ts.snap +++ b/src/tests/end-to-end/tests/details-view/__snapshots__/headings.test.ts.snap @@ -9,7 +9,7 @@ exports[`Details View -> Assessment -> Headings Requirement page should pass acc "failureSummary": "Fix any of the following: Text inside the element is not included in the accessible name", "selector": [ - "#header64-visualizationButton", + "#header86-visualizationButton", ], }, ], @@ -26,7 +26,7 @@ exports[`Details View -> Assessment -> Headings Requirement page should pass acc "failureSummary": "Fix any of the following: Text inside the element is not included in the accessible name", "selector": [ - "#header64-visualizationButton", + "#header86-visualizationButton", ], }, ], diff --git a/src/tests/end-to-end/tests/popup/__snapshots__/adhoc-panel.test.ts.snap b/src/tests/end-to-end/tests/popup/__snapshots__/adhoc-panel.test.ts.snap index bd08734e220..c178e08f4c0 100644 --- a/src/tests/end-to-end/tests/popup/__snapshots__/adhoc-panel.test.ts.snap +++ b/src/tests/end-to-end/tests/popup/__snapshots__/adhoc-panel.test.ts.snap @@ -19,8 +19,8 @@ exports[`Popup -> Ad-hoc tools should display the pinned target page visualizati class="insights-container insights-highlight-container insights-issues" >
Ad-hoc tools should display the pinned target page visualizati
Ad-hoc tools should display the pinned target page visualizati
Ad-hoc tools should display the pinned target page visualizati
Ad-hoc tools should display the pinned target page visualizati class="insights-container insights-highlight-container insights-heading" >
Ad-hoc tools should display the pinned target page visualizati
Ad-hoc tools should display the pinned target page visualizati
Date: Wed, 16 Nov 2022 19:44:17 -0500 Subject: [PATCH 6/9] Revert incorrect snapshot update --- .../tests/details-view/__snapshots__/headings.test.ts.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tests/end-to-end/tests/details-view/__snapshots__/headings.test.ts.snap b/src/tests/end-to-end/tests/details-view/__snapshots__/headings.test.ts.snap index 21664215ad3..4e4c8d3e09e 100644 --- a/src/tests/end-to-end/tests/details-view/__snapshots__/headings.test.ts.snap +++ b/src/tests/end-to-end/tests/details-view/__snapshots__/headings.test.ts.snap @@ -9,7 +9,7 @@ exports[`Details View -> Assessment -> Headings Requirement page should pass acc "failureSummary": "Fix any of the following: Text inside the element is not included in the accessible name", "selector": [ - "#header86-visualizationButton", + "#header64-visualizationButton", ], }, ], @@ -26,7 +26,7 @@ exports[`Details View -> Assessment -> Headings Requirement page should pass acc "failureSummary": "Fix any of the following: Text inside the element is not included in the accessible name", "selector": [ - "#header86-visualizationButton", + "#header64-visualizationButton", ], }, ], From 8146c4ed8070fef82376904d3a0b46f57d8d291a Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Wed, 16 Nov 2022 19:49:27 -0500 Subject: [PATCH 7/9] Fix drawing-controller tests by re-enabling mock HighlightBoxDrawers --- src/injected/visualization/highlight-box-drawer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/injected/visualization/highlight-box-drawer.ts b/src/injected/visualization/highlight-box-drawer.ts index 01686a653b6..4a9b843713d 100644 --- a/src/injected/visualization/highlight-box-drawer.ts +++ b/src/injected/visualization/highlight-box-drawer.ts @@ -34,7 +34,7 @@ export class HighlightBoxDrawer extends BaseDrawer { ) { super(dom, containerClass, windowUtils, shadowUtils, drawerUtils, formatter); this.clientUtils = clientUtils; - this.dialogRenderer = this.formatter.getDialogRenderer(); + this.dialogRenderer = this.formatter?.getDialogRenderer(); } public initialize(config: DrawerInitData): void { From 28bf1f98d0a7c472a700f3cae6a01024f40512ba Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Wed, 16 Nov 2022 20:03:54 -0500 Subject: [PATCH 8/9] Fix new box-shadow behavior not applying to dashed outlines in HC mode --- src/injected/styles/injected.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/injected/styles/injected.scss b/src/injected/styles/injected.scss index 7728cc2618f..b34443db2ec 100644 --- a/src/injected/styles/injected.scss +++ b/src/injected/styles/injected.scss @@ -314,6 +314,7 @@ box-shadow: 0 0 0 4px white !important; @include ms-high-contrast-override { + forced-color-adjust: none; outline-color: Highlight !important; box-shadow: 0 0 0 4px HighlightText !important; } From 795f8bd83b4470b13593b7e27dbaf7f8e05e86fe Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Tue, 22 Nov 2022 14:32:09 -0500 Subject: [PATCH 9/9] Update solid outline style to be 2px wide per PR feedback --- src/injected/styles/injected.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/injected/styles/injected.scss b/src/injected/styles/injected.scss index b34443db2ec..54e8d9055a9 100644 --- a/src/injected/styles/injected.scss +++ b/src/injected/styles/injected.scss @@ -294,15 +294,15 @@ .insights-highlight-outline-solid { // Non-HC outline-color is intentionally unset; individual formatters should override it - outline-width: 1px !important; + outline-width: 2px !important; outline-style: solid !important; outline-offset: 1px !important; - box-shadow: 0 0 0 3px white !important; + box-shadow: 0 0 0 4px white !important; @include ms-high-contrast-override { forced-color-adjust: none; outline-color: Highlight !important; - box-shadow: 0 0 0 3px HighlightText !important; + box-shadow: 0 0 0 4px HighlightText !important; } }