ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

F: Improve styling and accessibility

Browse Source
This commit is contained in:
Ivan 2025-03-20 18:24:07 +03:00
parent 09b56f49d8
commit 1cd780504d
12 changed files with 39 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rsconcept/frontend/src/app/navigation/navigation-button.tsx
View File

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

2
rsconcept/frontend/src/components/control/button.tsx
View File

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

20
rsconcept/frontend/src/components/data-table/pagination-tools.tsx
View File

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

1
rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
View File

@ -31,7 +31,6 @@ export function DropdownButton({
}: DropdownButtonProps) {
return (
<button
tabIndex={-1}
type='button'
onClick={onClick}
className={clsx(

1
rsconcept/frontend/src/components/dropdown/dropdown.tsx
View File

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

5
rsconcept/frontend/src/components/input/search-bar.tsx
View File

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

2
rsconcept/frontend/src/components/input/text-area.tsx
View File

@ -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

2
rsconcept/frontend/src/components/input/text-input.tsx
View File

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

1
rsconcept/frontend/src/features/library/components/select-location.tsx
View File

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

10
rsconcept/frontend/src/styling/components.css
View File

@ -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;

10
rsconcept/frontend/src/styling/setup.css
View File

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

4
rsconcept/frontend/src/styling/utilities.css
View File

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