online.git: Branch 'distro/collabora/co-25.04' - 5 commits - browser/css browser/html browser/src

["Caolán McNamara (via cogithub)"]

browser/css/helpdialog.css | 16 +++++++---
browser/html/cool-help.html | 62 +++++++++++++++++++++--------------------
browser/src/control/Toolbar.js | 26 +++++++++++------
3 files changed, 62 insertions(+), 42 deletions(-)

New commits:
commit 11ba5cdc08f9a0e702491d3b826ff80a06b88886
Author: Caolán McNamara <caolan....@collabora.com>
AuthorDate: Mon Apr 27 20:47:46 2026 +0000
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Apr 28 11:35:56 2026 +0200

The visual "hierarchy" isn't intentional in help

There isn't meant to be a subcategory under "Advanced" for the specific
app.

It's just a sideeffect of the hide/show by div converted to ul. Flatten
the list, and then tweak the clear search to not show the other app
entries on restoring the entries.

Signed-off-by: Caolán McNamara <caolan....@collabora.com>
Change-Id: I2e5a4224f8a65060b51e6924ca388824373a2fff
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1754

diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index 40c469a419..1a788787f8 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -88,10 +88,6 @@
margin: 0;
}

- .toc-list .toc-list {
- padding-left: 1.5em;
- }
-
.screenshot {
text-align: center;
margin: 0.1in;
diff --git a/browser/html/cool-help.html b/browser/html/cool-help.html
index 8065185444..5527d9a898 100644
--- a/browser/html/cool-help.html
+++ b/browser/html/cool-help.html
@@ -331,35 +331,27 @@
<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1335">Opening, closing, saving, printing and downloading documents</a></li>
<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1337">Editing documents</a></li>
<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1338">Advanced features</a></li>
- <li class="spreadsheet link-section hide">
- <ul class="toc-list">
- <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1359"><span class="productname">{productname}</span> spreadsheets</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1361">Editing spreadsheets</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1363">Formulas</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1367">Formatting spreadsheets</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1371">Advanced features</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1409">Spreadsheets</a></li>
- </ul>
- </li>
- <li class="text link-section hide">
- <ul class="toc-list">
- <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1373"><span class="productname">{productname}</span> text documents</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1375">Editing text documents</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1377">Context menus</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1383">Advanced text document editor features</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1407">Text documents</a></li>
- </ul>
- </li>
- <li class="presentation link-section hide">
- <ul class="toc-list">
- <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1391"><span class="productname">{productname}</span> presentations</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1393">Editing presentations</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1395">Slide show</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1397">Slide pane</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1401">Advanced features</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1411">Presentations</a></li>
- </ul>
- </li>
+
+ <li class="toc-h2 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1359"><span class="productname">{productname}</span> spreadsheets</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1361">Editing spreadsheets</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1363">Formulas</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1367">Formatting spreadsheets</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1371">Advanced features</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1409">Spreadsheets</a></li>
+
+ <li class="toc-h2 m-v-0 text hide"><a class="border-0 scroll-button" href="#1373"><span class="productname">{productname}</span> text documents</a></li>
+ <li class="toc-h3 m-v-0 text hide"><a class="border-0 scroll-button" href="#1375">Editing text documents</a></li>
+ <li class="toc-h3 m-v-0 text hide"><a class="border-0 scroll-button" href="#1377">Context menus</a></li>
+ <li class="toc-h3 m-v-0 text hide"><a class="border-0 scroll-button" href="#1383">Advanced text document editor features</a></li>
+ <li class="toc-h3 m-v-0 text hide"><a class="border-0 scroll-button" href="#1407">Text documents</a></li>
+
+ <li class="toc-h2 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1391"><span class="productname">{productname}</span> presentations</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1393">Editing presentations</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1395">Slide show</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1397">Slide pane</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1401">Advanced features</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1411">Presentations</a></li>
+
<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1403">Frequently Asked Questions</a></li>
</ul>
</nav>
diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js
index 77eec811aa..9174b87250 100644
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@@ -759,7 +759,8 @@ window.L.Map.include({
}.bind(this));

// select all event scroll elements, main-header elements, product header elements and make visible to user if search term is empty
- document.querySelectorAll('.m-v-0, .product-header, .help-dialog-header, .help-toc').forEach(function(element) {
+ // Exclude doctype-tagged TOC entries so non-current-doctype items stay hidden after search clear
+ document.querySelectorAll('.m-v-0:not(.text):not(.spreadsheet):not(.presentation), .product-header, .help-dialog-header, .help-toc').forEach(function(element) {
this.show(element);
element.style.backgroundColor = '';
}.bind(this));
commit f860133ef55002d04e61055050082c10649787f9
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Mon Apr 27 21:43:28 2026 +0530
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Apr 28 11:35:49 2026 +0200

help: add visible keyboard focus indicator to TOC jump links

The TOC jump-link styling explicitly removed the focus outline with "outline: none" and provided no replacement. Keyboard users got no visible cue when stepping through the TOC, breaking WCAG 2.4.7 (Focus Visible).

Replace the suppression with "outline: 2px solid var(--color-primary)" plus a 2px outline-offset, matching the focus style used elsewhere in the dialog framework. The CSS variable adapts to light/dark theme.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: I393477a4391bfe3ff3dda4662fb3d52d6e37118d
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1753
Reviewed-by: Caolán McNamara <caolan....@collabora.com>
Tested-by: Caolán McNamara <caolan....@collabora.com>

diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index c20fb36e8b..40c469a419 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -67,11 +67,11 @@
/* Darker text color when clicked */
}

- /* Style for toc-h2 and toc-h3 button text when focused */
+ /* Visible keyboard focus indicator for TOC jump links */
.toc-h2 a:focus,
.toc-h3 a:focus {
- outline: none;
- /* Remove outline when focused */
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
}

/* Add margin to the paragraph to separate each item */
commit 1bf6ff16a5d3dd7b1239f088cab588a28ed7516e
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Mon Apr 27 21:38:13 2026 +0530
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Apr 28 11:35:44 2026 +0200

help: keep close button visible after clicking a TOC jump link

Clicking a jump link in the help TOC made the dialog's close button disappear. The .scroll-button click handler tried to read button.dataset.target, but the HTML uses href="#nnn" - so the handler was a silent no-op and the browser performed its default anchor navigation. That scroll walks every scrollable ancestor, including the modal popup itself (which has overflow:auto in jsdialogs.css), so the dialog's titlebar - and the close button it contains - scrolled off the top.

Read href instead, preventDefault, and adjust scrollTop on the .ui-dialog-content container only. The modal stays put, only the help body scrolls, and the close button remains visible.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: Ia6c0d85631c90b241f12aacaf7b64aa29d7f0672
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1752
Tested-by: Caolán McNamara <caolan....@collabora.com>
Reviewed-by: Caolán McNamara <caolan....@collabora.com>

diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js
index aed0032727..77eec811aa 100644
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@@ -633,13 +633,22 @@ window.L.Map.include({
const buttons = onlineHelpContent.querySelectorAll('.scroll-button');

buttons.forEach((button) => {
- button.addEventListener('click', () => {
- const targetId = button.dataset.target;
- if (targetId) {
- const targetElement = document.getElementById(`${targetId}`);
- if (targetElement) {
- targetElement.scrollIntoView();
- }
+ button.addEventListener('click', (e) => {
+ const href = button.getAttribute('href');
+ if (!href || !href.startsWith('#')) return;
+ const targetElement = document.getElementById(href.substring(1));
+ if (!targetElement) return;
+ // Scroll only the help content area. The browser's default anchor
+ // navigation can scroll the modal popup itself, pushing the
+ // titlebar (and its close button) out of view.
+ e.preventDefault();
+ const scrollContainer = targetElement.closest('.ui-dialog-content');
+ if (scrollContainer) {
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const targetRect = targetElement.getBoundingClientRect();
+ scrollContainer.scrollTop += targetRect.top - containerRect.top;
+ } else {
+ targetElement.scrollIntoView({ block: 'start' });
}
});
});
commit d7088a8fbd10b73e4db67c83e3c892a2da5ed8db
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Mon Apr 27 21:29:54 2026 +0530
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Apr 28 11:35:39 2026 +0200

help: fix H2 above H1 reversal in online help dialog

The jsdialog titlebar renders the dialog title as <h2>, then the help template's inner page heading was an <h1>. The DOM heading outline therefore jumped from H2 (dialog title) back up to H1 (inner page), inverting the document outline.

Demote the inner page heading to <h2> so it sits at the same level as the framework-supplied dialog title. The remaining content hierarchy (H3 sections, H4 sub-sections) stays unchanged, leaving a sequential H2 -> H2 -> H3 -> H4 outline with no reversals.

Update the centering rule in helpdialog.css to also target the new <h2 class="help-dialog-header"> so the visible layout is unchanged.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: I6191fe5bed168c0fe765c63c0e93d86b7bd2ed33
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1751
Tested-by: Caolán McNamara <caolan....@collabora.com>
Reviewed-by: Caolán McNamara <caolan....@collabora.com>

diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index 1f5e7d0821..c20fb36e8b 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -3,7 +3,8 @@

#online-help-content-box,
#keyboard-shortcuts-content-box {
- h1 {
+ h1,
+ .help-dialog-header {
text-align: center;
}

diff --git a/browser/html/cool-help.html b/browser/html/cool-help.html
index 4f20f1977b..8065185444 100644
--- a/browser/html/cool-help.html
+++ b/browser/html/cool-help.html
@@ -323,7 +323,7 @@
</div>
</div>
<div id="online-help-content">
- <h1 class="help-dialog-header"><span class="productname">{productname}</span> Help</h1>
+ <h2 class="help-dialog-header"><span class="productname">{productname}</span> Help</h2>
<nav class="help-toc" aria-label="Help table of contents">
<ul class="toc-list">
<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1327">Collaborative editing</a></li>
commit acfb6f695a2a1767004eb7dff5acdf896211f81a
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Mon Apr 27 21:20:35 2026 +0530
Commit: Andras Timar <andras...@collabora.com>
CommitDate: Tue Apr 28 11:35:31 2026 +0200

help: render online help TOC as a list of links, not H2 headings

The page-level table of contents wrapped each jump link in <h2>, making each navigation entry register as a heading. This polluted the heading outline.

Wrap the TOC in <nav><ul> with <li> entries (a standard navigation list of links). Keep the existing toc-h2 / toc-h3 / m-v-0 / link-section classes on the <li> elements so the style and doctype-aware show/hide logic keeps working unchanged. Strip default <ul> styling so the visual result matches the previous design.

Update resetFilterResults to also show the new <nav> so the TOC reappears after clearing the search field.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: I6a6bc66e82ca45ac92bf4e4030f562ae52fc13d6
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1747
Tested-by: Caolán McNamara <caolan....@collabora.com>
Reviewed-by: Caolán McNamara <caolan....@collabora.com>

diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index edc03722a6..1f5e7d0821 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -80,6 +80,17 @@
/* Adjust margin bottom */
}

+ /* Strip default browser styling from the TOC list */
+ .toc-list {
+ list-style: none;
+ padding-left: 0;
+ margin: 0;
+ }
+
+ .toc-list .toc-list {
+ padding-left: 1.5em;
+ }
+
.screenshot {
text-align: center;
margin: 0.1in;
diff --git a/browser/html/cool-help.html b/browser/html/cool-help.html
index 99d31a4a43..4f20f1977b 100644
--- a/browser/html/cool-help.html
+++ b/browser/html/cool-help.html
@@ -324,35 +324,45 @@
</div>
<div id="online-help-content">
<h1 class="help-dialog-header"><span class="productname">{productname}</span> Help</h1>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1327">Collaborative editing</a></h2>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1333"><span class="productname">{productname}</span> user interface</a></h2>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1335">Opening, closing, saving, printing and downloading documents</a></h2>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1337">Editing documents</a></h2>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1338">Advanced features</a></h2>
- <div class="spreadsheet link-section hide">
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1359"><span class="productname">{productname}</span> spreadsheets</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1361">Editing spreadsheets</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1363">Formulas</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1367">Formatting spreadsheets</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1371">Advanced features</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1409">Spreadsheets</a></h2>
- </div>
- <div class="text link-section hide">
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1373"><span class="productname">{productname}</span> text documents</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1375">Editing text documents</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1377">Context menus</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1383">Advanced text document editor features</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1407">Text documents</a></h2>
- </div>
- <div class="presentation link-section hide">
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1391"><span class="productname">{productname}</span> presentations</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1393">Editing presentations</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1395">Slide show</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1397">Slide pane</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1401">Advanced features</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1411">Presentations</a></h2>
- </div>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1403">Frequently Asked Questions</a></h2>
+ <nav class="help-toc" aria-label="Help table of contents">
+ <ul class="toc-list">
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1327">Collaborative editing</a></li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1333"><span class="productname">{productname}</span> user interface</a></li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1335">Opening, closing, saving, printing and downloading documents</a></li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1337">Editing documents</a></li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1338">Advanced features</a></li>
+ <li class="spreadsheet link-section hide">
+ <ul class="toc-list">
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1359"><span class="productname">{productname}</span> spreadsheets</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1361">Editing spreadsheets</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1363">Formulas</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1367">Formatting spreadsheets</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1371">Advanced features</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1409">Spreadsheets</a></li>
+ </ul>
+ </li>
+ <li class="text link-section hide">
+ <ul class="toc-list">
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1373"><span class="productname">{productname}</span> text documents</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1375">Editing text documents</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1377">Context menus</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1383">Advanced text document editor features</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1407">Text documents</a></li>
+ </ul>
+ </li>
+ <li class="presentation link-section hide">
+ <ul class="toc-list">
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1391"><span class="productname">{productname}</span> presentations</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1393">Editing presentations</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1395">Slide show</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1397">Slide pane</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1401">Advanced features</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1411">Presentations</a></li>
+ </ul>
+ </li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1403">Frequently Asked Questions</a></li>
+ </ul>
+ </nav>

<div class="section">
<p class="section-header"><span class="productname">{productname}</span> allows you to create and edit office documents text documents, spreadsheets and presentations directly in your browser, in a simple and straight-forward way. You can work alone on a document, or collaboratively as part of a team.</p>
diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js
index ee45cad89d..aed0032727 100644
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@@ -750,7 +750,7 @@ window.L.Map.include({
}.bind(this));

// select all event scroll elements, main-header elements, product header elements and make visible to user if search term is empty
- document.querySelectorAll('.m-v-0, .product-header, .help-dialog-header').forEach(function(element) {
+ document.querySelectorAll('.m-v-0, .product-header, .help-dialog-header, .help-toc').forEach(function(element) {
this.show(element);
element.style.backgroundColor = '';
}.bind(this));