From f92e086b13b88fe70da4a6432dd6e11390c254c0 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 19 Mar 2025 23:28:32 +0300
Subject: [PATCH] F: Accessibility improvements

---
 .../src/app/navigation/navigation-button.tsx  | 11 +---
 rsconcept/frontend/src/components/icons.tsx   |  4 +-
 .../features/help/components/subtopics.tsx    |  6 +--
 .../features/help/items/help-interface.tsx    | 18 ++++---
 .../src/features/help/items/help-main.tsx     | 30 ++++++-----
 .../features/help/items/help-thesaurus.tsx    | 11 ++--
 .../features/help/items/ui/help-library.tsx   | 20 +++++--
 .../features/help/items/ui/help-oss-graph.tsx | 12 +++--
 .../features/help/items/ui/help-rscard.tsx    |  2 +-
 .../features/help/items/ui/help-rseditor.tsx  | 14 +++--
 .../features/help/items/ui/help-rslist.tsx    | 24 +++++----
 .../pages/library-page/toolbar-search.tsx     |  4 +-
 .../rsform/components/refs-input/tooltip.ts   |  4 +-
 .../editor-rsexpression/rs-edit-controls.tsx  | 54 +++++++++----------
 rsconcept/frontend/src/styling/components.css | 17 ++++++
 rsconcept/frontend/src/styling/setup.css      | 17 ++++++
 rsconcept/frontend/src/styling/utilities.css  | 12 -----
 rsconcept/frontend/src/utils/utils.ts         |  2 +-
 18 files changed, 152 insertions(+), 110 deletions(-)

diff --git a/rsconcept/frontend/src/app/navigation/navigation-button.tsx b/rsconcept/frontend/src/app/navigation/navigation-button.tsx
index 83c405f8..9acd6a46 100644
--- a/rsconcept/frontend/src/app/navigation/navigation-button.tsx
+++ b/rsconcept/frontend/src/app/navigation/navigation-button.tsx
@@ -15,20 +15,13 @@ export function NavigationButton({ icon, title, hideTitle, className, style, onC
   return (
     <button
       type='button'
-      tabIndex={-1}
+      tabIndex={1}
       aria-label={title}
       data-tooltip-id={!!title ? globalIDs.tooltip : undefined}
       data-tooltip-hidden={hideTitle}
       data-tooltip-content={title}
       onClick={onClick}
-      className={clsx(
-        'p-2 flex items-center gap-1',
-        'cursor-pointer',
-        'clr-btn-nav cc-animate-color duration-500',
-        'rounded-xl',
-        'font-controls whitespace-nowrap',
-        className
-      )}
+      className={clsx('p-2 flex items-center gap-1', 'cc-btn-nav', 'font-controls clr-outline', className)}
       style={style}
     >
       {icon ? icon : null}
diff --git a/rsconcept/frontend/src/components/icons.tsx b/rsconcept/frontend/src/components/icons.tsx
index d8b284ee..8ac69cdb 100644
--- a/rsconcept/frontend/src/components/icons.tsx
+++ b/rsconcept/frontend/src/components/icons.tsx
@@ -171,9 +171,9 @@ export interface IconProps {
   className?: string;
 }
 
-function MetaIconSVG({ viewBox, size = '1.5rem', props, children }: React.PropsWithChildren<IconSVGProps>) {
+function MetaIconSVG({ viewBox, size = '1.5rem', props, className, children }: React.PropsWithChildren<IconSVGProps>) {
   return (
-    <svg width={size} height={size} fill='currentColor' viewBox={viewBox} {...props}>
+    <svg width={size} height={size} fill='currentColor' className={className} viewBox={viewBox} {...props}>
       {children}
     </svg>
   );
diff --git a/rsconcept/frontend/src/features/help/components/subtopics.tsx b/rsconcept/frontend/src/features/help/components/subtopics.tsx
index 085903fd..8fb5ff0f 100644
--- a/rsconcept/frontend/src/features/help/components/subtopics.tsx
+++ b/rsconcept/frontend/src/features/help/components/subtopics.tsx
@@ -10,13 +10,13 @@ interface SubtopicsProps {
 
 export function Subtopics({ headTopic }: SubtopicsProps) {
   return (
-    <>
-      <h2>Содержание раздела</h2>
+    <details>
+      <summary className='text-center font-semibold'>Содержание раздела</summary>
       {Object.values(HelpTopic)
         .filter(topic => topic !== headTopic && topicParent.get(topic) === headTopic)
         .map(topic => (
           <TopicItem key={`${prefixes.topic_item}${topic}`} topic={topic} />
         ))}
-    </>
+    </details>
   );
 }
diff --git a/rsconcept/frontend/src/features/help/items/help-interface.tsx b/rsconcept/frontend/src/features/help/items/help-interface.tsx
index 347233da..ba97e2ea 100644
--- a/rsconcept/frontend/src/features/help/items/help-interface.tsx
+++ b/rsconcept/frontend/src/features/help/items/help-interface.tsx
@@ -26,17 +26,22 @@ export function HelpInterface() {
         интерфейса изменяются (цвет, иконка) в зависимости от доступности соответствующего функционала.
       </p>
       <p>
-        <IconHelp className='inline-icon' />
-        Помимо данного раздела справка предоставляется контекстно через специальную иконку{' '}
-        <IconHelp className='inline-icon' />
+        <IconHelp className='inline-icon' /> Помимо данного раздела справка предоставляется контекстно через специальную
+        иконку <IconHelp className='inline-icon' />
       </p>
 
       <h2>Навигация и настройки</h2>
-      <li>Ctrl + клик на объект навигации откроет новую вкладку</li>
+      <li>
+        <kbd>Ctrl + клик</kbd> на объект навигации откроет новую вкладку
+      </li>
       <li>
         <IconPin size='1.25rem' className='inline-icon' /> навигационную панель можно скрыть с помощью кнопки в правом
         верхнем углу
       </li>
+      <li>
+        <IconLightTheme className='inline-icon' />
+        <IconDarkTheme className='inline-icon' /> переключатели темы
+      </li>
       <li>
         <IconLogin size='1.25rem' className='inline-icon' /> вход в систему / регистрация нового пользователя
       </li>
@@ -44,10 +49,7 @@ export function HelpInterface() {
         <IconUser2 size='1.25rem' className='inline-icon' /> меню пользователя содержит ряд настроек и переход к профилю
         пользователя
       </li>
-      <li>
-        <IconLightTheme className='inline-icon' />
-        <IconDarkTheme className='inline-icon' /> переключатели темы
-      </li>
+
       <li>
         <IconHelp className='inline-icon' />
         <IconHelpOff className='inline-icon' /> отключение иконок контекстной справки
diff --git a/rsconcept/frontend/src/features/help/items/help-main.tsx b/rsconcept/frontend/src/features/help/items/help-main.tsx
index fbc39312..63984291 100644
--- a/rsconcept/frontend/src/features/help/items/help-main.tsx
+++ b/rsconcept/frontend/src/features/help/items/help-main.tsx
@@ -20,20 +20,22 @@ export function HelpMain() {
         <LinkTopic text='Операционной схеме синтеза' topic={HelpTopic.CC_OSS} />.
       </p>
 
-      <h2>Разделы Справки</h2>
-      {[
-        HelpTopic.THESAURUS,
-        HelpTopic.INTERFACE,
-        HelpTopic.CONCEPTUAL,
-        HelpTopic.RSLANG,
-        HelpTopic.TERM_CONTROL,
-        HelpTopic.ACCESS,
-        HelpTopic.VERSIONS,
-        HelpTopic.INFO,
-        HelpTopic.EXTEOR
-      ].map(topic => (
-        <TopicItem key={`${prefixes.topic_item}${topic}`} topic={topic} />
-      ))}
+      <details>
+        <summary className='text-center font-semibold'>Разделы Справки</summary>
+        {[
+          HelpTopic.THESAURUS,
+          HelpTopic.INTERFACE,
+          HelpTopic.CONCEPTUAL,
+          HelpTopic.RSLANG,
+          HelpTopic.TERM_CONTROL,
+          HelpTopic.ACCESS,
+          HelpTopic.VERSIONS,
+          HelpTopic.INFO,
+          HelpTopic.EXTEOR
+        ].map(topic => (
+          <TopicItem key={`${prefixes.topic_item}${topic}`} topic={topic} />
+        ))}
+      </details>
 
       <h2>Лицензирование и раскрытие информации</h2>
       <li>Пользователи Портала сохраняют авторские права на создаваемый ими контент</li>
diff --git a/rsconcept/frontend/src/features/help/items/help-thesaurus.tsx b/rsconcept/frontend/src/features/help/items/help-thesaurus.tsx
index f7d6e71e..daa32f0d 100644
--- a/rsconcept/frontend/src/features/help/items/help-thesaurus.tsx
+++ b/rsconcept/frontend/src/features/help/items/help-thesaurus.tsx
@@ -259,6 +259,10 @@ export function HelpThesaurus() {
 
       <h2>Операция</h2>
       <p>Операция – выделенная часть ОСС, определяющая способ получения КС в рамках ОСС.</p>
+      <p>
+        <IconConsolidation className='inline-icon' />
+        {'\u2009'}Ромбовидный синтез – операция, где используются КС, имеющие общих предков.
+      </p>
 
       <ul>
         По <b>способу получения КС выделены</b>:
@@ -271,13 +275,6 @@ export function HelpThesaurus() {
           {'\u2009'}синтез концептуальных схем.
         </li>
       </ul>
-
-      <br />
-
-      <p>
-        <IconConsolidation className='inline-icon' />
-        {'\u2009'}Ромбовидный синтез – операция, где используются КС, имеющие общих предков.
-      </p>
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/features/help/items/ui/help-library.tsx b/rsconcept/frontend/src/features/help/items/ui/help-library.tsx
index 85b07f48..ca81cc3e 100644
--- a/rsconcept/frontend/src/features/help/items/ui/help-library.tsx
+++ b/rsconcept/frontend/src/features/help/items/ui/help-library.tsx
@@ -34,8 +34,12 @@ export function HelpLibrary() {
       <li>
         <span className='text-(--acc-fg-green)'>зеленым текстом</span> выделены ОСС
       </li>
-      <li>клик по строке - переход к редактированию схемы</li>
-      <li>Ctrl + клик по строке откроет схему в новой вкладке</li>
+      <li>
+        <kbd>клик</kbd> по строке - переход к редактированию схемы
+      </li>
+      <li>
+        <kbd>Ctrl + клик</kbd> по строке откроет схему в новой вкладке
+      </li>
       <li>Фильтры атрибутов три позиции: да/нет/не применять</li>
       <li>
         <IconShow size='1rem' className='inline-icon' /> фильтры атрибутов применяются по клику
@@ -67,9 +71,15 @@ export function HelpLibrary() {
       <li>
         <IconSubfolders size='1rem' className='inline-icon icon-green' /> схемы во вложенных папках
       </li>
-      <li>клик по папке отображает справа схемы в ней</li>
-      <li>Ctrl + клик по папке копирует путь в буфер обмена</li>
-      <li>клик по иконке сворачивает/разворачивает вложенные</li>
+      <li>
+        <kbd>клик</kbd> по папке отображает справа схемы в ней
+      </li>
+      <li>
+        <kbd>Ctrl + клик по папке копирует путь в буфер обмена</kbd>
+      </li>
+      <li>
+        <kbd>клик</kbd> по иконке сворачивает/разворачивает вложенные
+      </li>
       <li>
         <IconFolderEmpty size='1rem' className='inline-icon clr-text-default' /> папка без схем
       </li>
diff --git a/rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx b/rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx
index 96b1910f..f595c62e 100644
--- a/rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx
+++ b/rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx
@@ -53,10 +53,14 @@ export function HelpOssGraph() {
 
         <div className='sm:w-84'>
           <h1>Изменение узлов</h1>
-          <li>Клик на операцию – выделение</li>
-          <li>Esc – сбросить выделение</li>
           <li>
-            Двойной клик – переход к связанной <LinkTopic text='КС' topic={HelpTopic.CC_SYSTEM} />
+            <kbd>Клик</kbd> на операцию – выделение
+          </li>
+          <li>
+            <kbd>Esc</kbd> – сбросить выделение
+          </li>
+          <li>
+            <kbd>Двойной клик</kbd> – переход к связанной <LinkTopic text='КС' topic={HelpTopic.CC_SYSTEM} />
           </li>
           <li>
             <IconEdit2 className='inline-icon' /> Редактирование операции
@@ -65,7 +69,7 @@ export function HelpOssGraph() {
             <IconNewItem className='inline-icon icon-green' /> Новая операция
           </li>
           <li>
-            <IconDestroy className='inline-icon icon-red' /> Delete – удалить выбранные
+            <IconDestroy className='inline-icon icon-red' /> <kbd>Delete</kbd> – удалить выбранные
           </li>
         </div>
       </div>
diff --git a/rsconcept/frontend/src/features/help/items/ui/help-rscard.tsx b/rsconcept/frontend/src/features/help/items/ui/help-rscard.tsx
index 486b9adf..3aca2782 100644
--- a/rsconcept/frontend/src/features/help/items/ui/help-rscard.tsx
+++ b/rsconcept/frontend/src/features/help/items/ui/help-rscard.tsx
@@ -34,7 +34,7 @@ export function HelpRSCard() {
         <IconOSS className='inline-icon' /> переход к связанной <LinkTopic text='ОСС' topic={HelpTopic.CC_OSS} />
       </li>
       <li>
-        <IconSave className='inline-icon' /> сохранить изменения: Ctrl + S
+        <IconSave className='inline-icon' /> сохранить изменения: <kbd>Ctrl + S</kbd>
       </li>
       <li>
         <IconEditor className='inline-icon' /> Редактор обладает правом редактирования
diff --git a/rsconcept/frontend/src/features/help/items/ui/help-rseditor.tsx b/rsconcept/frontend/src/features/help/items/ui/help-rseditor.tsx
index 4a2914dc..e00649ea 100644
--- a/rsconcept/frontend/src/features/help/items/ui/help-rseditor.tsx
+++ b/rsconcept/frontend/src/features/help/items/ui/help-rseditor.tsx
@@ -38,13 +38,13 @@ export function HelpRSEditor() {
             <IconList className='inline-icon' /> список конституент
           </li>
           <li>
-            <IconSave className='inline-icon' /> сохранить: Ctrl + S
+            <IconSave className='inline-icon' /> сохранить: <kbd>Ctrl + S</kbd>
           </li>
           <li>
             <IconReset className='inline-icon' /> сбросить изменения
           </li>
           <li>
-            <IconClone className='inline-icon icon-green' /> клонировать: Alt + V
+            <IconClone className='inline-icon icon-green' /> клонировать: <kbd>Alt + V</kbd>
           </li>
           <li>
             <IconNewItem className='inline-icon icon-green' /> новая конституента
@@ -58,7 +58,7 @@ export function HelpRSEditor() {
           <h2>Список конституент</h2>
           <li>
             <IconMoveDown className='inline-icon' />
-            <IconMoveUp className='inline-icon' /> Alt + вверх/вниз
+            <IconMoveUp className='inline-icon' /> <kbd>Alt + вверх/вниз</kbd>
           </li>
           <li>
             <IconFilter className='inline-icon' />
@@ -98,14 +98,18 @@ export function HelpRSEditor() {
         <IconTree className='inline-icon' /> отображение{' '}
         <LinkTopic text='дерева разбора' topic={HelpTopic.UI_FORMULA_TREE} />
       </li>
-      <li>Ctrl + Пробел вставка незанятого имени / замена проекции</li>
+      <li>
+        <kbd>Ctrl + Пробел</kbd> вставка незанятого имени / замена проекции
+      </li>
 
       <h2>Термин и Текстовое определение</h2>
       <li>
         <IconEdit className='inline-icon' /> редактирование <LinkTopic text='Имени' topic={HelpTopic.CC_CONSTITUENTA} />{' '}
         / <LinkTopic text='Термина' topic={HelpTopic.CC_CONSTITUENTA} />
       </li>
-      <li>Ctrl + Пробел открывает редактирование отсылок</li>
+      <li>
+        <kbd>Ctrl + Пробел</kbd> открывает редактирование отсылок
+      </li>
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/features/help/items/ui/help-rslist.tsx b/rsconcept/frontend/src/features/help/items/ui/help-rslist.tsx
index 3274228d..e9101ca1 100644
--- a/rsconcept/frontend/src/features/help/items/ui/help-rslist.tsx
+++ b/rsconcept/frontend/src/features/help/items/ui/help-rslist.tsx
@@ -33,28 +33,34 @@ export function HelpRSList() {
         <IconOSS className='inline-icon' /> переход к связанной <LinkTopic text='ОСС' topic={HelpTopic.CC_OSS} />
       </li>
       <li>
-        <IconReset className='inline-icon' /> сбросить выделение: ESC
+        <IconReset className='inline-icon' /> сбросить выделение: <kbd>ESC</kbd>
       </li>
       <li>Клик на строку – выделение</li>
-      <li>Shift + клик – выделение нескольких</li>
-      <li>Alt + клик – Редактор</li>
-      <li>Двойной клик – Редактор</li>
+      <li>
+        <kbd>Shift + клик</kbd> – выделение нескольких
+      </li>
+      <li>
+        <kbd>Alt + клик</kbd> – Редактор
+      </li>
+      <li>
+        <kbd>Двойной клик</kbd> – Редактор
+      </li>
       <li>
         <IconMoveUp className='inline-icon' />
-        <IconMoveDown className='inline-icon' /> Alt + вверх/вниз – перемещение
+        <IconMoveDown className='inline-icon' /> <kbd>Alt + вверх/вниз</kbd> – перемещение
       </li>
 
       <li>
-        <IconClone className='inline-icon icon-green' /> клонировать выделенную: Alt + V
+        <IconClone className='inline-icon icon-green' /> клонировать выделенную: <kbd>Alt + V</kbd>
       </li>
       <li>
-        <IconNewItem className='inline-icon icon-green' /> новая конституента: Alt + `
+        <IconNewItem className='inline-icon icon-green' /> новая конституента: <kbd>Alt + `</kbd>
       </li>
       <li>
-        <IconOpenList className='inline-icon icon-green' /> быстрое добавление: Alt + 1-6,Q,W
+        <IconOpenList className='inline-icon icon-green' /> быстрое добавление: <kbd>Alt + 1-6,Q,W</kbd>
       </li>
       <li>
-        <IconDestroy className='inline-icon icon-red' /> удаление выделенных: Delete
+        <IconDestroy className='inline-icon icon-red' /> удаление выделенных: <kbd>Delete</kbd>
       </li>
 
       <Divider margins='my-2' />
diff --git a/rsconcept/frontend/src/features/library/pages/library-page/toolbar-search.tsx b/rsconcept/frontend/src/features/library/pages/library-page/toolbar-search.tsx
index 2bc35495..df53cc8d 100644
--- a/rsconcept/frontend/src/features/library/pages/library-page/toolbar-search.tsx
+++ b/rsconcept/frontend/src/features/library/pages/library-page/toolbar-search.tsx
@@ -138,7 +138,9 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
             <SelectorButton
               transparent
               className='rounded-lg py-1'
-              titleHtml={(head ? describeLocationHead(head) : 'Выберите каталог') + '<br/>Ctrl + клик - Проводник'}
+              titleHtml={
+                (head ? describeLocationHead(head) : 'Выберите каталог') + '<br/><kbd>Ctrl + клик</kbd> - Проводник'
+              }
               hideTitle={headMenu.isOpen}
               icon={
                 head ? (
diff --git a/rsconcept/frontend/src/features/rsform/components/refs-input/tooltip.ts b/rsconcept/frontend/src/features/rsform/components/refs-input/tooltip.ts
index df818d5b..00362e87 100644
--- a/rsconcept/frontend/src/features/rsform/components/refs-input/tooltip.ts
+++ b/rsconcept/frontend/src/features/rsform/components/refs-input/tooltip.ts
@@ -101,7 +101,7 @@ function domTooltipEntityReference(ref: IEntityReference, cst: IConstituenta | n
   if (canClick) {
     const clickTip = document.createElement('p');
     clickTip.className = 'text-center text-xs mt-1';
-    clickTip.innerHTML = 'Ctrl + клик для перехода</br>Ctrl + пробел для редактирования';
+    clickTip.innerHTML = '<kbd>Ctrl + клик</kbd> для перехода</br><kbd>Ctrl + пробел</kbd> для редактирования';
     dom.appendChild(clickTip);
   }
 
@@ -146,7 +146,7 @@ function domTooltipSyntacticReference(
   if (canClick) {
     const clickTip = document.createElement('p');
     clickTip.className = 'text-center text-xs mt-1';
-    clickTip.innerHTML = 'Ctrl + пробел для редактирования';
+    clickTip.innerHTML = '<kbd>Ctrl + пробел</kbd> для редактирования';
     dom.appendChild(clickTip);
   }
 
diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx
index 94ef0dfb..ec86648a 100644
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx
@@ -55,30 +55,30 @@ const MAIN_THIRD_ROW: TokenID[] = [
 ];
 
 const SECONDARY_FIRST_ROW = [
-  { text: 'μ', title: 'q' },
-  { text: 'ω', title: 'w' },
-  { text: 'ε', title: 'e' },
-  { text: 'ρ', title: 'r' },
-  { text: 'τ', title: 't' },
-  { text: 'π', title: 'y' }
+  { text: 'μ', hotkey: 'q' },
+  { text: 'ω', hotkey: 'w' },
+  { text: 'ε', hotkey: 'e' },
+  { text: 'ρ', hotkey: 'r' },
+  { text: 'τ', hotkey: 't' },
+  { text: 'π', hotkey: 'y' }
 ];
 
 const SECONDARY_SECOND_ROW = [
-  { text: 'α', title: 'a' },
-  { text: 'σ', title: 's' },
-  { text: 'δ', title: 'd' },
-  { text: 'φ', title: 'f' },
-  { text: 'γ', title: 'g' },
-  { text: 'λ', title: 'h' }
+  { text: 'α', hotkey: 'a' },
+  { text: 'σ', hotkey: 's' },
+  { text: 'δ', hotkey: 'd' },
+  { text: 'φ', hotkey: 'f' },
+  { text: 'γ', hotkey: 'g' },
+  { text: 'λ', hotkey: 'h' }
 ];
 
 const SECONDARY_THIRD_ROW = [
-  { text: 'ζ', title: 'z' },
-  { text: 'ξ', title: 'x' },
-  { text: 'ψ', title: 'c' },
-  { text: 'θ', title: 'v' },
-  { text: 'β', title: 'b' },
-  { text: 'η', title: 'n' }
+  { text: 'ζ', hotkey: 'z' },
+  { text: 'ξ', hotkey: 'x' },
+  { text: 'ψ', hotkey: 'c' },
+  { text: 'θ', hotkey: 'v' },
+  { text: 'β', hotkey: 'b' },
+  { text: 'η', hotkey: 'n' }
 ];
 
 interface RSEditorControlsProps {
@@ -103,11 +103,11 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP
       {MAIN_FIRST_ROW.map(token => (
         <RSTokenButton key={`${prefixes.rsedit_btn}${token}`} token={token} onInsert={onEdit} disabled={disabled} />
       ))}
-      {SECONDARY_FIRST_ROW.map(({ text, title }) => (
+      {SECONDARY_FIRST_ROW.map(({ text, hotkey }) => (
         <RSLocalButton
-          key={`${prefixes.rsedit_btn}${title}`}
+          key={`${prefixes.rsedit_btn}${hotkey}`}
           text={text}
-          title={title}
+          titleHtml={`<kbd>[${hotkey}]</kbd>`}
           onInsert={onEdit}
           disabled={disabled}
           className='hidden xs:inline'
@@ -117,12 +117,12 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP
       {MAIN_SECOND_ROW.map(token => (
         <RSTokenButton key={`${prefixes.rsedit_btn}${token}`} token={token} onInsert={onEdit} disabled={disabled} />
       ))}
-      {SECONDARY_SECOND_ROW.map(({ text, title }) => (
+      {SECONDARY_SECOND_ROW.map(({ text, hotkey }) => (
         <RSLocalButton
-          key={`${prefixes.rsedit_btn}${title}`}
+          key={`${prefixes.rsedit_btn}${hotkey}`}
           className='hidden xs:inline'
           text={text}
-          title={title}
+          titleHtml={`<kbd>[${hotkey}]</kbd>`}
           onInsert={onEdit}
           disabled={disabled}
         />
@@ -131,12 +131,12 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP
       {MAIN_THIRD_ROW.map(token => (
         <RSTokenButton key={`${prefixes.rsedit_btn}${token}`} token={token} onInsert={onEdit} disabled={disabled} />
       ))}
-      {SECONDARY_THIRD_ROW.map(({ text, title }) => (
+      {SECONDARY_THIRD_ROW.map(({ text, hotkey }) => (
         <RSLocalButton
-          key={`${prefixes.rsedit_btn}${title}`}
+          key={`${prefixes.rsedit_btn}${hotkey}`}
           className='hidden xs:inline'
           text={text}
-          title={title}
+          titleHtml={`<kbd>[${hotkey}]</kbd>`}
           onInsert={onEdit}
           disabled={disabled}
         />
diff --git a/rsconcept/frontend/src/styling/components.css b/rsconcept/frontend/src/styling/components.css
index f5837865..3fd5a910 100644
--- a/rsconcept/frontend/src/styling/components.css
+++ b/rsconcept/frontend/src/styling/components.css
@@ -2,6 +2,22 @@
  * Module: Utility classes for specific react components.
  */
 
+@utility cc-btn-nav {
+  color: var(--clr-prim-800);
+  border-radius: 0.75rem;
+
+  cursor: pointer;
+  white-space: nowrap;
+
+  transition-property: background-color;
+  transition-timing-function: var(--ease-bezier);
+  transition-duration: 500ms;
+
+  &:hover {
+    background-color: var(--clr-sec-100);
+  }
+}
+
 @utility cc-tab-tools {
   z-index: var(--z-index-pop);
   position: absolute;
@@ -15,6 +31,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
+
   cursor: default;
   user-select: text;
   white-space: nowrap;
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
index 5d58b854..d53e4f23 100644
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -155,6 +155,23 @@
   li::marker {
     content: '–\2009';
   }
+
+  summary {
+    cursor: pointer;
+    list-style: none;
+  }
+
+  summary::before {
+    font-family: var(--font-math);
+    padding-right: 0.5rem;
+    content: '+';
+  }
+
+  details[open] summary::before {
+    font-family: var(--font-math);
+    padding-right: 0.5rem;
+    content: '-';
+  }
 }
 
 @utility border {
diff --git a/rsconcept/frontend/src/styling/utilities.css b/rsconcept/frontend/src/styling/utilities.css
index cfbc1a04..47ede110 100644
--- a/rsconcept/frontend/src/styling/utilities.css
+++ b/rsconcept/frontend/src/styling/utilities.css
@@ -64,18 +64,6 @@
   }
 }
 
-@utility clr-btn-nav {
-  color: var(--clr-prim-800);
-
-  &:disabled {
-    color: var(--clr-prim-600);
-  }
-
-  &:hover:not(:disabled) {
-    background-color: var(--clr-sec-100);
-  }
-}
-
 @utility clr-hover {
   &:hover:not(:disabled) {
     color: var(--clr-prim-999);
diff --git a/rsconcept/frontend/src/utils/utils.ts b/rsconcept/frontend/src/utils/utils.ts
index 1c9586dd..351ac7a5 100644
--- a/rsconcept/frontend/src/utils/utils.ts
+++ b/rsconcept/frontend/src/utils/utils.ts
@@ -213,5 +213,5 @@ export function removeTags(target?: string): string {
  * Generate HTML wrapper for control description including hotkey.
  */
 export function prepareTooltip(text: string, hotkey?: string) {
-  return hotkey ? `<b>[${hotkey}]</b><br/>${text}` : text;
+  return hotkey ? `<kbd>[${hotkey}]</kbd><br/>${text}` : text;
 }