F: Improve styling and accessibility

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}

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
       )}

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>
         ))}

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(

rsconcept/frontend/src/components/dropdown/dropdown.tsx

@@ -48,6 +48,7 @@ export function Dropdown({
         className
       )}
       aria-hidden={!isOpen}
+      inert={!isOpen}
       {...restProps}
     >
       {children}

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
+        <IconSearch className='absolute -top-0.5 left-2 translate-y-1/2 cc-search-icon' size='1.25rem' />
-          className='absolute -top-0.5 left-2 translate-y-1/2 pointer-events-none clr-text-controls'
-          size='1.25rem'
-        />
       ) : null}
       <TextInput
         id={id}

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

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',

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))}
               />
             ) : (

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;

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,

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);
   }