oss/forgejo
oss/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-07-02 16:38:34 +00:00
Code Wiki Activity

Reimplement editor Tab handling with accessibility safeguards (#6813)

Browse source 
The primary goal is to balance having the editor work as expected by developers (with Tab key affecting indentation) while also not impeding keyboard navigation.

* Tab indents, Shift+Tab unindents, but only when that indent would be valid. E.g. moving existing list items down or up one level.
* Indenting a selection always works.
* When an "invalid" indent is attempted, nothing happens and a toast is shown with a hint to press again to leave the editor.
* Attempting the same action again allows the textarea lose focus by allowing the browser's default key handler.
* Pressing Esc also loses focus immediately.
* No tab handling happens until the text editor has been interacted with (other than just having been focused).
* Changing indentation in block quotes adds or removes quote levels instead.

Screenshot of the toast being shown:
a6287d29-4ce0-4977-aae8-ef1aff2ac89f

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6813
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Danko Aleksejevs <danko@very.lv>
Co-committed-by: Danko Aleksejevs <danko@very.lv>
This commit is contained in:
Danko Aleksejevs 2025-05-25 19:17:03 +02:00 • committed by 0ko
parent 8b93f41aaa
commit d483dc674a
8 changed files with 278 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

9
web_src/js/modules/toast.js
View file

@ -3,6 +3,11 @@ import {svg} from '../svg.js';
import Toastify from 'toastify-js'; // don't use "async import", because when network error occurs, the "async import" also fails and nothing is shown
const levels = {
hint: {
icon: 'octicon-light-bulb',
background: 'var(--color-black-light)',
duration: 2500,
},
info: {
icon: 'octicon-check',
background: 'var(--color-green)',
@ -42,6 +47,10 @@ function showToast(message, level, {gravity, position, duration, useHtmlBody, ..
return toast;
}
export function showHintToast(message, opts) {
return showToast(message, 'hint', opts);
}
export function showInfoToast(message, opts) {
return showToast(message, 'info', opts);
}