fix(supersearch): fix cursor issues (#1654)

* Add draw, theme as supersearch extensions
* Margin around atomic pills as inline css
* CSS tweaks
* Fixed flaky test, uncomment a11y test on help page

Author: jesperengstrom

lxl-web/src/lib/styles/lxlquery.css

@@ -2,10 +2,6 @@
 	color: var(--text-body);
 	font-size: var(--text-sm);
 	white-space: nowrap;
-
-	@media screen and (min-width: 640px) {
-		font-size: var(--text-sm);
-	}
 }
 
 .lxl-qualifier.editing {
@@ -49,10 +45,15 @@
 	background-color: var(--color-accent-50);
 }
 
-.lxl-qualifier-value:not(:has(.lxl-ghost-paren)) {
+/* make up space for missing parens */
+.lxl-qualifier-value.editable:not(:has(.lxl-ghost-paren)) {
 	padding-inline: calc(var(--spacing) * 1.5);
 }
 
+.lxl-qualifier-value.editable {
+	margin-left: -2px;
+}
+
 .atomic .lxl-qualifier-value {
 	border-radius: 0;
 }

lxl-web/tests/help.filters.spec.ts

@@ -1,22 +1,28 @@
 import { expect, test } from '@playwright/test';
-// import AxeBuilder from '@axe-core/playwright';
+import AxeBuilder from '@axe-core/playwright';
 
 test.beforeEach(async ({ page }) => {
 	await page.goto('/help/filters');
 });
 
-/*
 test('should not have any detectable a11y issues', async ({ page }) => {
-	const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+	const accessibilityScanResults = await new AxeBuilder({ page })
+		.exclude('[role="combobox"][aria-placeholder]') // aria-placeholder issue in supersearch is a false alarm (see https://github.com/w3c/aria/issues/2689)
+		.analyze();
 	await expect.soft(accessibilityScanResults.violations).toEqual([]);
 });
-*/
 
 test('qualifier keys can be added from filter list', async ({ page }) => {
 	await page.getByRole('main').getByRole('button').getByText('Ingår i bibliografi').click();
+	await page.waitForResponse(
+		(res) => res.url().includes('/supersearch?_q=') && res.status() === 200
+	);
 	await expect(page.getByRole('combobox').first()).toContainText('Ingår i bibliografi');
 	await expect(page.getByRole('combobox').last()).toContainText('Ingår i bibliografi');
 	await page.keyboard.press('Escape');
 	await page.getByRole('main').getByRole('button').getByText('Bibliotek').first().click();
+	await page.waitForResponse(
+		(res) => res.url().includes('/supersearch?_q=') && res.status() === 200
+	);
 	await expect(page.getByRole('combobox').first()).toContainText('Bibliotek');
 });

packages/supersearch/src/lib/components/SuperSearch.svelte

@@ -35,6 +35,7 @@
 		DispatchChangeParams
 	} from '$lib/types/superSearch.js';
 	import { historyKeymap, standardKeymap } from '@codemirror/commands';
+	import { draw, theme } from '$lib/extensions/theme';
 
 	export type ExpandedContentParams = {
 		search: ReturnType<typeof useSearchRequest>;
@@ -224,6 +225,8 @@
 		preventNewLine({ replaceWithSpace: true }),
 		...(language ? [language] : []),
 		placeholderCompartment.of(placeholderExtension(placeholder)),
+		draw,
+		theme,
 		...extensions
 	]);
 

packages/supersearch/src/lib/extensions/lxlQualifierPlugin/qualifierDecoration.ts

@@ -27,6 +27,7 @@ class QualifierWidget extends WidgetType {
 	toDOM(view: EditorView): HTMLElement {
 		const container = document.createElement('span');
 		container.className = 'atomic';
+		container.setAttribute('style', 'margin-inline: 2px');
 
 		container.ondblclick = () => {
 			if (this.props.atomicFrom != null && this.props.atomicTo != null) {
@@ -78,7 +79,7 @@ export function addDecorations(view: EditorView) {
 			if (!qualifier.valueLabel && valueNode) {
 				decorations.push(
 					Decoration.mark({
-						class: 'lxl-qualifier-value',
+						class: 'lxl-qualifier-value editable',
 						inclusive: false
 					}).range(valueNode.from, valueNode.node.to)
 				);

packages/supersearch/src/lib/extensions/theme.ts

@@ -0,0 +1,18 @@
+import { EditorView } from '@codemirror/view';
+import { drawSelection } from '@codemirror/view';
+
+export const draw = drawSelection();
+
+export const theme = EditorView.theme({
+	'&.cm-focused .cm-cursor': {
+		borderLeft: '1.4px solid #000',
+		marginLeft: '0px'
+	},
+	'&.cm-editor .cm-selectionLayer': {
+		zIndex: '1!important',
+		pointerEvents: 'none'
+	},
+	'&.cm-focused .cm-selectionBackground': {
+		background: '#3b82f640!important'
+	}
+});