From 2b3358275d08c73bc6f9b4703059827dd735648a Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 20 Mar 2025 18:24:40 +0300
Subject: [PATCH] F: Improve styling and accessibility

---
 .../src/app/navigation/navigation-button.tsx  |  2 +-
 .../src/components/control/button.tsx         |  2 +-
 .../data-table/pagination-tools.tsx           | 20 ++++++++++++-------
 .../components/dropdown/dropdown-button.tsx   |  1 -
 .../src/components/dropdown/dropdown.tsx      |  1 +
 .../src/components/input/search-bar.tsx       |  5 +----
 .../src/components/input/text-area.tsx        |  2 +-
 .../src/components/input/text-input.tsx       |  2 +-
 .../library/components/select-location.tsx    |  1 +
 rsconcept/frontend/src/styling/components.css | 10 ++++++++++
 rsconcept/frontend/src/styling/setup.css      | 10 +++++++---
 rsconcept/frontend/src/styling/utilities.css  |  4 ++--
 12 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/rsconcept/frontend/src/app/navigation/navigation-button.tsx b/rsconcept/frontend/src/app/navigation/navigation-button.tsx
index 3298e130..2870826d 100644
--- a/rsconcept/frontend/src/app/navigation/navigation-button.tsx
+++ b/rsconcept/frontend/src/app/navigation/navigation-button.tsx
@@ -21,7 +21,7 @@ export function NavigationButton({ icon, title, hideTitle, className, style, onC
       data-tooltip-hidden={hideTitle}
       data-tooltip-content={title}
       onClick={onClick}
-      className={clsx('p-2 flex items-center gap-1', 'cc-btn-nav', 'font-controls clr-outline', className)}
+      className={clsx('p-2 flex items-center gap-1', 'cc-btn-nav', 'font-controls focus-outline', className)}
       style={style}
     >
       {icon ? icon : null}
diff --git a/rsconcept/frontend/src/components/control/button.tsx b/rsconcept/frontend/src/components/control/button.tsx
index 1afeecff..bdb9d538 100644
--- a/rsconcept/frontend/src/components/control/button.tsx
+++ b/rsconcept/frontend/src/components/control/button.tsx
@@ -44,7 +44,7 @@ export function Button({
         'clr-btn-default cc-animate-color',
         dense ? 'px-1' : 'px-3 py-1',
         loading ? 'cursor-progress' : 'cursor-pointer',
-        noOutline ? 'outline-hidden' : 'clr-outline',
+        noOutline ? 'outline-hidden' : 'focus-outline',
         !noBorder && 'border rounded-sm',
         className
       )}
diff --git a/rsconcept/frontend/src/components/data-table/pagination-tools.tsx b/rsconcept/frontend/src/components/data-table/pagination-tools.tsx
index 0d792c3b..47838b54 100644
--- a/rsconcept/frontend/src/components/data-table/pagination-tools.tsx
+++ b/rsconcept/frontend/src/components/data-table/pagination-tools.tsx
@@ -38,7 +38,8 @@ export function PaginationTools<TData>({ id, table, paginationOptions }: Paginat
       <div className='flex'>
         <button
           type='button'
-          className='clr-hover clr-text-controls cc-animate-color'
+          aria-label='Первая страница'
+          className='clr-hover clr-text-controls cc-animate-color focus-outline'
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
         >
@@ -46,7 +47,8 @@ export function PaginationTools<TData>({ id, table, paginationOptions }: Paginat
         </button>
         <button
           type='button'
-          className='clr-hover clr-text-controls cc-animate-color'
+          aria-label='Предыдущая страница'
+          className='clr-hover clr-text-controls cc-animate-color focus-outline'
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
@@ -55,7 +57,8 @@ export function PaginationTools<TData>({ id, table, paginationOptions }: Paginat
         <input
           id={id ? `${id}__page` : undefined}
           title='Номер страницы. Выделите для ручного ввода'
-          className='w-6 text-center bg-prim-100'
+          aria-label='Номер страницы'
+          className='w-6 text-center bg-prim-100 focus-outline'
           value={table.getState().pagination.pageIndex + 1}
           onChange={event => {
             const page = event.target.value ? Number(event.target.value) - 1 : 0;
@@ -66,7 +69,8 @@ export function PaginationTools<TData>({ id, table, paginationOptions }: Paginat
         />
         <button
           type='button'
-          className='clr-hover clr-text-controls cc-animate-color'
+          aria-label='Следующая страница'
+          className='clr-hover clr-text-controls cc-animate-color focus-outline'
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
@@ -74,7 +78,8 @@ export function PaginationTools<TData>({ id, table, paginationOptions }: Paginat
         </button>
         <button
           type='button'
-          className='clr-hover clr-text-controls cc-animate-color'
+          aria-label='Последняя страница'
+          className='clr-hover clr-text-controls cc-animate-color focus-outline'
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
         >
@@ -83,12 +88,13 @@ export function PaginationTools<TData>({ id, table, paginationOptions }: Paginat
       </div>
       <select
         id={id ? `${id}__per_page` : undefined}
+        aria-label='Выбор количества строчек на странице'
         value={table.getState().pagination.pageSize}
         onChange={handlePaginationOptionsChange}
-        className='mx-2 cursor-pointer bg-prim-100'
+        className='mx-2 cursor-pointer bg-prim-100 focus-outline'
       >
         {paginationOptions.map(pageSize => (
-          <option key={`${prefixes.page_size}${pageSize}`} value={pageSize}>
+          <option key={`${prefixes.page_size}${pageSize}`} value={pageSize} aria-label={`${pageSize} на страницу`}>
             {pageSize} на стр
           </option>
         ))}
diff --git a/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx b/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
index 3b931a1b..5c1b94eb 100644
--- a/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
+++ b/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
@@ -31,7 +31,6 @@ export function DropdownButton({
 }: DropdownButtonProps) {
   return (
     <button
-      tabIndex={-1}
       type='button'
       onClick={onClick}
       className={clsx(
diff --git a/rsconcept/frontend/src/components/dropdown/dropdown.tsx b/rsconcept/frontend/src/components/dropdown/dropdown.tsx
index b7a0c719..42781332 100644
--- a/rsconcept/frontend/src/components/dropdown/dropdown.tsx
+++ b/rsconcept/frontend/src/components/dropdown/dropdown.tsx
@@ -48,6 +48,7 @@ export function Dropdown({
         className
       )}
       aria-hidden={!isOpen}
+      inert={!isOpen}
       {...restProps}
     >
       {children}
diff --git a/rsconcept/frontend/src/components/input/search-bar.tsx b/rsconcept/frontend/src/components/input/search-bar.tsx
index 90381817..e7df4de6 100644
--- a/rsconcept/frontend/src/components/input/search-bar.tsx
+++ b/rsconcept/frontend/src/components/input/search-bar.tsx
@@ -41,10 +41,7 @@ export function SearchBar({
   return (
     <div className={clsx('relative flex items-center', className)} {...restProps}>
       {!noIcon ? (
-        <IconSearch
-          className='absolute -top-0.5 left-2 translate-y-1/2 pointer-events-none clr-text-controls'
-          size='1.25rem'
-        />
+        <IconSearch className='absolute -top-0.5 left-2 translate-y-1/2 cc-search-icon' size='1.25rem' />
       ) : null}
       <TextInput
         id={id}
diff --git a/rsconcept/frontend/src/components/input/text-area.tsx b/rsconcept/frontend/src/components/input/text-area.tsx
index f8368cd3..513d2be5 100644
--- a/rsconcept/frontend/src/components/input/text-area.tsx
+++ b/rsconcept/frontend/src/components/input/text-area.tsx
@@ -56,7 +56,7 @@ export function TextArea({
           fitContent && 'field-sizing-content',
           noResize && 'resize-none',
           transparent ? 'bg-transparent' : 'clr-input',
-          !noOutline && 'clr-outline',
+          !noOutline && 'focus-outline',
           dense && 'grow max-w-full',
           !dense && !!label && 'mt-2',
           !dense && className
diff --git a/rsconcept/frontend/src/components/input/text-input.tsx b/rsconcept/frontend/src/components/input/text-input.tsx
index 0adeb44c..7869a605 100644
--- a/rsconcept/frontend/src/components/input/text-input.tsx
+++ b/rsconcept/frontend/src/components/input/text-input.tsx
@@ -54,7 +54,7 @@ export function TextInput({
           'leading-tight truncate hover:text-clip',
           transparent ? 'bg-transparent' : 'clr-input',
           !noBorder && 'border',
-          !noOutline && 'clr-outline',
+          !noOutline && 'focus-outline',
           (!noBorder || !disabled) && 'px-3',
           dense && 'grow max-w-full',
           !dense && !!label && 'mt-2',
diff --git a/rsconcept/frontend/src/features/library/components/select-location.tsx b/rsconcept/frontend/src/features/library/components/select-location.tsx
index 80b10fb7..def57419 100644
--- a/rsconcept/frontend/src/features/library/components/select-location.tsx
+++ b/rsconcept/frontend/src/features/library/components/select-location.tsx
@@ -84,6 +84,7 @@ export function SelectLocation({ value, dense, prefix, onClick, className, style
                     <IconFolderOpened size='1rem' className='icon-green' />
                   )
                 }
+                aria-label='Отображение вложенных папок'
                 onClick={event => handleClickFold(event, item, folded.includes(item))}
               />
             ) : (
diff --git a/rsconcept/frontend/src/styling/components.css b/rsconcept/frontend/src/styling/components.css
index 3fd5a910..7000dea1 100644
--- a/rsconcept/frontend/src/styling/components.css
+++ b/rsconcept/frontend/src/styling/components.css
@@ -18,6 +18,16 @@
   }
 }
 
+@utility cc-search-icon {
+  pointer-events: none;
+  color: var(--clr-prim-800);
+  background-color: transparent;
+
+  :focus-within > & {
+    color: var(--clr-sec-600);
+  }
+}
+
 @utility cc-tab-tools {
   z-index: var(--z-index-pop);
   position: absolute;
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
index d53e4f23..7ad2f2b1 100644
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -8,9 +8,6 @@
 /* *,
 *::after,
 *::before {
-  background: hsla(135, 50%, 50%, 0.05) !important;
-  outline: 2px solid hotpink !important;
-
   :focus,
   :focus-visible,
   :focus-within {
@@ -18,6 +15,13 @@
   }
 } */
 
+/* *,
+*::after,
+*::before {
+  background: hsla(135, 50%, 50%, 0.05) !important;
+  outline: 2px solid hotpink !important;
+} */
+
 @layer utilities {
   *,
   *::after,
diff --git a/rsconcept/frontend/src/styling/utilities.css b/rsconcept/frontend/src/styling/utilities.css
index 47ede110..e71a4e80 100644
--- a/rsconcept/frontend/src/styling/utilities.css
+++ b/rsconcept/frontend/src/styling/utilities.css
@@ -71,14 +71,14 @@
   }
 }
 
-@utility clr-outline {
+@utility focus-outline {
   :is(&, .focus-frame):focus-visible {
     outline: 2px solid var(--clr-sec-600);
   }
 }
 
 @utility focus-frame {
-  :is(.clr-outline, &):focus-visible {
+  :is(.focus-outline, &):focus-visible {
     outline: 2px solid var(--clr-sec-600);
   }