♿️(frontend) fix sidebar resize handle for screen readers

Expose the handle as a slider so arrow keys work with NVDA

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- 💄(frontend) improve comments highlights #1961
+  ♿️(frontend) fix sidebar resize handle for screen readers #2122
+
 ## [v4.8.3] - 2026-03-23
 
 ### Changed

src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts

@@ -131,12 +131,13 @@ test.describe('Doc Comments', () => {
     await thread.getByRole('paragraph').first().fill('This is a comment');
     await thread.locator('[data-test="save"]').click();
     await expect(thread.getByText('This is a comment').first()).toBeHidden();
+    await expect(editor.getByText('Hello')).toHaveClass('bn-thread-mark');
 
-    // Check background color changed
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
+
     await editor.first().click();
     await editor.getByText('Hello').click();
 
@@ -185,6 +186,7 @@ test.describe('Doc Comments', () => {
     await thread.getByText('This is an edited comment').first().hover();
     await thread.locator('[data-test="resolve"]').click();
     await expect(thread).toBeHidden();
+
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
       'rgba(0, 0, 0, 0)',
@@ -196,11 +198,13 @@ test.describe('Doc Comments', () => {
 
     await thread.getByRole('paragraph').first().fill('This is a new comment');
     await thread.locator('[data-test="save"]').click();
+    await expect(editor.getByText('Hello')).toHaveClass('bn-thread-mark');
 
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
+
     await editor.first().click();
     await editor.getByText('Hello').click();
 
@@ -208,6 +212,7 @@ test.describe('Doc Comments', () => {
     await thread.locator('[data-test="moreactions"]').first().click();
     await getMenuItem(thread, 'Delete comment').click();
 
+    await expect(editor.getByText('Hello')).not.toHaveClass('bn-thread-mark');
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
       'rgba(0, 0, 0, 0)',
@@ -263,7 +268,7 @@ test.describe('Doc Comments', () => {
 
     await expect(otherEditor.getByText('Hello')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
 
     // We change the role of the second user to reader
@@ -298,7 +303,7 @@ test.describe('Doc Comments', () => {
 
     await expect(otherEditor.getByText('Hello')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
     await otherEditor.getByText('Hello').click();
     await expect(
@@ -344,7 +349,7 @@ test.describe('Doc Comments', () => {
 
     await expect(editor1.getByText('Document One')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
 
     await editor1.getByText('Document One').click();

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx

@@ -8,12 +8,37 @@ export const cssComments = (
   & .--docs--main-editor .ProseMirror {
     // Comments marks in the editor
     .bn-editor {
-      .bn-thread-mark:not([data-orphan='true']),
-      .bn-thread-mark-selected:not([data-orphan='true']) {
-        background: ${canSeeComment ? '#EDB40066' : 'transparent'};
-        color: var(--c--globals--colors--gray-700);
+      // Resets blocknote comments styles
+      .bn-thread-mark,
+      .bn-thread-mark-selected {
+        background-color: transparent;
       }
 
+      ${canSeeComment &&
+      css`
+        .bn-thread-mark:not([data-orphan='true']) {
+          background-color: color-mix(
+            in srgb,
+            var(--c--contextuals--background--palette--yellow--tertiary) 40%,
+            transparent
+          );
+          border-bottom: 2px solid
+            var(--c--contextuals--background--palette--yellow--secondary);
+
+          mix-blend-mode: multiply;
+
+          transition:
+            background-color var(--c--globals--transitions--duration),
+            border-bottom-color var(--c--globals--transitions--duration);
+
+          &:has(.bn-thread-mark-selected) {
+            background-color: var(
+              --c--contextuals--background--palette--yellow--tertiary
+            );
+          }
+        }
+      `}
+
       [data-show-selection] {
         color: HighlightText;
       }

src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   ImperativePanelHandle,
   Panel,
@@ -22,12 +23,15 @@ type ResizableLeftPanelProps = {
   maxPanelSizePx?: number;
 };
 
+const RESIZE_HANDLE_ID = 'left-panel-resize-handle';
+
 export const ResizableLeftPanel = ({
   leftPanel,
   children,
   minPanelSizePx = 300,
   maxPanelSizePx = 450,
 }: ResizableLeftPanelProps) => {
+  const { t } = useTranslation();
   const { isDesktop } = useResponsiveStore();
   const { isPanelOpen } = useLeftPanelStore();
   const ref = useRef<ImperativePanelHandle>(null);
@@ -96,6 +100,50 @@ export const ResizableLeftPanel = ({
     };
   }, [isDesktop]);
 
+  /**
+   * Workaround: NVDA does not enter focus mode for role="separator"
+   * intercepted by browse-mode navigation and never reach the handle.
+   * Changing the role to "slider" makes NVDA reliably switch to focus
+   * mode, restoring progressive keyboard resize with arrow keys.
+   */
+  useEffect(() => {
+    if (!isPanelOpen) {
+      return;
+    }
+    const handle = document.getElementById(RESIZE_HANDLE_ID);
+    if (!handle) {
+      return;
+    }
+
+    handle.setAttribute('role', 'slider');
+    handle.setAttribute('aria-orientation', 'vertical');
+    handle.setAttribute('aria-label', t('Resize sidebar'));
+
+    const updateValueText = () => {
+      const value = handle.getAttribute('aria-valuenow');
+      if (value) {
+        const widthPx = Math.round(
+          (parseFloat(value) / 100) * window.innerWidth,
+        );
+        handle.setAttribute(
+          'aria-valuetext',
+          t('Sidebar width: {{widthPx}} pixels', { widthPx }),
+        );
+      }
+    };
+    updateValueText();
+
+    const observer = new MutationObserver(updateValueText);
+    observer.observe(handle, {
+      attributes: true,
+      attributeFilter: ['aria-valuenow'],
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [isPanelOpen, t]);
+
   const handleResize = (sizePercent: number) => {
     const widthPx = (sizePercent / 100) * window.innerWidth;
     savedWidthPxRef.current = widthPx;
@@ -103,7 +151,7 @@ export const ResizableLeftPanel = ({
   };
 
   return (
-    <PanelGroup direction="horizontal">
+    <PanelGroup direction="horizontal" keyboardResizeBy={1}>
       <Panel
         ref={ref}
         className="--docs--resizable-left-panel"
@@ -132,6 +180,7 @@ export const ResizableLeftPanel = ({
       </Panel>
       {isPanelOpen && (
         <PanelResizeHandle
+          id={RESIZE_HANDLE_ID}
           style={{
             borderRightWidth: '1px',
             borderRightStyle: 'solid',