@redneckz/wildless-cms-uni-blocks 0.14.185 → 0.14.187

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -16,6 +16,7 @@ const blockDecorator: BlockDecorator = ({ blockClassName, block, render }, i) =>
   >
     {render({ block, blockClassName: `${blockClassName} w-full` })}
     <button
+      type="button"
       className="absolute w-8 h-8 top-4 right-4 border rounded-full"
       onClick={(e) => {
         console.log('Delete', block);

package/src/components/Depository/DepositoryFilter.tsx

@@ -28,7 +28,7 @@ export const DepositoryFilter = JSX<DepositoryFilterProps>(
         {...field('endDate')}
       />
       <div className="col-span-2 mt-auto">
-        <Button className="w-full" version="secondary" onClick={onClearFilter}>
+        <Button type="reset" className="w-full" version="secondary" onClick={onClearFilter}>
           Очистить
         </Button>
       </div>

package/src/components/Footer/Footer.mobile.tsx

@@ -36,7 +36,9 @@ export const Footer = UniBlock<FooterProps>(({ className, footer, ...rest }) =>
 
   return (
     <BlockWrapper tag="footer" className={className} defaultPadding="p-4xl pb-24" {...rest}>
-      <div className="mb-lg pb-xs border-b border-main-divider">{renderTopItems(topItems)}</div>
+      <div className="mb-lg pb-xs border-b border-main-divider" role="menu">
+        {renderTopItems(topItems)}
+      </div>
       <Contacts className="overflow-hidden" items={contacts} />
       <div className="mt-xl">
         <SocialMedia className="mb-xl" media={socialMedia} stretched={true}>
@@ -74,6 +76,7 @@ const renderTopItems = (topItems: TopMenuItemProps[] | undefined) =>
       foldButtonVersion="accordion"
       label={item?.text}
       labelIcon={item?.icon}
+      role="menuitem"
     >
       <LinkList items={item.items} basePath={appendSlash(item.href)} />
     </RollupItem>

package/src/components/Header/DropdownMenu.tsx

@@ -24,8 +24,10 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
     <div
       className={style(visible ? 'bg-white rounded-md shadow-blue-gray' : '', className)}
       ref={ref}
+      role="navigation"
     >
       <button
+        type="button"
         className="group/btn flex justify-between items-center h-6"
         aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
         onClick={handleToggle}
@@ -60,6 +62,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
               href={href}
               target={target}
               onClick={onClick}
+              role="menuitem"
             >
               {text}
             </a>

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -27,7 +27,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
     const locationDialog = useLocationDialog(rest);
 
     return (
-      <div className={style('flex items-center gap-lg', className)}>
+      <div className={style('flex items-center gap-lg', className)} role="navigation">
         <TopItem
           flat={true}
           href="#"

package/src/components/Header/HeaderSubMenu.tsx

@@ -62,6 +62,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
         <div
           ref={subItemsListRef}
           className="overflow-hidden whitespace-nowrap pb-s mt-xs space-x-3xl"
+          role="menu"
         >
           {visibleSubItems.map((_, i) => (
             <HeaderSubMenuItem

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -32,7 +32,7 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
     const ref = useIntersectionObserver<HTMLSpanElement>(observerCallback, observerOptions);
 
     return (
-      <span ref={ref} className={className}>
+      <span ref={ref} className={className} role="menuitem">
         <HeaderItem {...rest}>{children}</HeaderItem>
       </span>
     );

package/src/components/Header/HeaderTop.tsx

@@ -8,7 +8,6 @@ import { projectSettings } from '../../ProjectSettings';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Logo } from '../../ui-kit/Logo/Logo';
-import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
 export interface HeaderTopProps {
@@ -26,8 +25,7 @@ const BUTTON_STYLE = {
 export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl, version }) => {
   const router = useRouter();
   const isRootLocation = projectSettings.BASE_PATH?.startsWith(router.pathname);
-  const onClick = useCallback((e) => {
-    e.preventDefault();
+  const onClick = useCallback(() => {
     router.back();
   }, []);
 
@@ -59,12 +57,13 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
   );
 });
 
-const renderBackButton = (onClick: (ev?: PreventableEvent) => void) => (
+const renderBackButton = (onClick: () => void) => (
   <div>
     <button
       className="flex items-center text-l my-2xs"
       aria-label="Вернуться назад"
       onClick={onClick}
+      type="button"
     >
       <Img
         className="w-6 h-6"

package/src/components/LinkDocs/LinkDocItem.tsx

@@ -16,7 +16,6 @@ export const LinkDocItem = JSX<LinkDocItemProps>(
     return (
       <a
         className="flex box-border gap-s group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
-        role="link"
         href={href}
         target={target}
       >

package/src/components/OfficesAtmsMap/renderFoldButton.tsx

@@ -10,6 +10,7 @@ export const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): V
   <button
     className="w-full py-2xl cursor-pointer text-primary-main flex items-center border-b border-solid border-main-divider"
     onClick={onToggle}
+    type="button"
   >
     <div className="pr-m">{labels[Number(isUnfolded)]}</div>
     <Icon className="text-primary-text" name={ICONS[Number(isUnfolded)]} width="16" height="16" />

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -28,6 +28,7 @@ export function renderBackwardButton(version: LinkButtonVersion, handleClick: ()
         text={text}
         ariaLabel={text}
         onClick={handleClick}
+        type="button"
       />
     </div>
   );

package/src/components/RollupItem/RollupItem.tsx

@@ -18,6 +18,7 @@ import { rollupItemStyles } from './rollupItemStyles';
 interface RollupItemProps extends RollupItemContent, UniBlockProps {
   labelIcon?: Picture;
   labelIconBgVersion?: IconBgVersion;
+  role?: string;
 }
 
 export const RollupItem = UniBlock<RollupItemProps>(
@@ -31,6 +32,7 @@ export const RollupItem = UniBlock<RollupItemProps>(
     foldButtonVersion = 'default',
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     version,
+    role,
     ...rest
   }) => (
     <BlockWrapper
@@ -38,6 +40,7 @@ export const RollupItem = UniBlock<RollupItemProps>(
       defaultPadding="p-0"
       tag="div"
       version="transparent"
+      role={role}
       {...rest}
     >
       <Foldable

package/src/components/SafeDepositRental/RadioButtons.tsx

@@ -12,7 +12,7 @@ export const RadioButtons = JSX(({ className = '' }: RadioButtonsProps) => {
   const onChange = useCallback((_: string) => setSelectedOption(_), []);
 
   return (
-    <div className={style('order-4', className)}>
+    <div className={style('order-4', className)} role="radiogroup">
       <Radio
         className="mb-xs"
         name="contractType"

package/src/components/StickyBottomMenu/StickyBottomMenuBurger.tsx

@@ -14,6 +14,7 @@ export const StickyBottomMenuBurger = JSX<StickyBottomMenuBurgerProps>(({ isActi
       `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`,
     )}
     onClick={onClick}
+    type="button"
   >
     <Icon className="w-6 h-6" name="BurgerIcon" iconVersion={isActive ? 'color' : 'black'} />
     Меню

package/src/ui-kit/Badge/Badge.tsx

@@ -25,6 +25,7 @@ export const Badge = JSX<BadgeProps>(({ count, version = 'secondary' }) => {
         'w-6 h-6 rounded-full flex items-center justify-center',
         badgeBgStyleMap[version],
       )}
+      role="status"
     >
       <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
         {count}

package/src/ui-kit/BaseFiltration/renderFiltrationForm.tsx

@@ -35,7 +35,7 @@ export const renderFiltrationForm = ({
     </div>
     {resetButton ? (
       <div>
-        <Button className="w-full @4xl:w-72 @4xl:ml-s" onClick={reset}>
+        <Button type="reset" className="w-full @4xl:w-72 @4xl:ml-s" onClick={reset}>
           {resetButton?.text}
         </Button>
       </div>

package/src/ui-kit/BaseTile/BaseTile.tsx

@@ -7,7 +7,6 @@ import { type Align } from '../../model/Align';
 import { type VNode } from '../../model/VNode';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { type PreventableEvent } from '../PreventableEvent';
 
 interface BaseTileProps extends UniBlockProps {
   title?: VNode;
@@ -46,8 +45,7 @@ export const BaseTile = JSX<BaseTileProps>(
     ...rest
   }) => {
     const router = useRouter();
-    const handleClick = useCallback((ev?: PreventableEvent) => {
-      ev?.preventDefault();
+    const handleClick = useCallback(() => {
       router.back();
     }, []);
 

package/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -11,7 +11,7 @@ export type BenefitItemProps = ComplexBenefitContent & {
 };
 
 export const BenefitItem = JSX<BenefitItemProps>(({ className, benefitsVersion, ..._ }) => (
-  <div className={style('flex gap-m min-w-56 items-center', className)}>
+  <div className={style('flex gap-m min-w-56 items-center', className)} role="listitem">
     {'icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null}
     <div>{renderBenefitText(_)}</div>
   </div>

package/src/ui-kit/BenefitsList/DefaultBenefitsList.tsx

@@ -29,6 +29,7 @@ export const DefaultBenefitsList = JSX<BenefitsListProps>(
           isDistortedBenefits(benefits) || isTextualBenefits(benefits) ? 'flex-col' : 'flex-wrap',
           className,
         )}
+        role="list"
       >
         {benefits.map((_, i) => (
           <BenefitItem key={String(i)} benefitsVersion={benefitsVersion} {..._} />

package/src/ui-kit/BenefitsList/TabularBenefitsList.tsx

@@ -10,6 +10,7 @@ export const TabularBenefitsList = JSX<BenefitsListProps>(({ className, benefits
         'grid grid-cols-[max-content_1fr] auto-rows-auto items-baseline gap-x-m gap-y-xs',
         className,
       )}
+      role="list"
     >
       {benefits.flatMap(renderBenefitText)}
     </div>

package/src/ui-kit/Checkbox/Checkbox.tsx

@@ -55,7 +55,7 @@ export const Checkbox = JSX<CheckboxProps>(
               value ? 'border-primary-main' : 'border-gray',
               disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover',
             )}
-            role="checkbox"
+            role={role(isRadio)}
             aria-checked={Boolean(value)}
             aria-disabled={Boolean(disabled)}
           />
@@ -73,4 +73,5 @@ export const Checkbox = JSX<CheckboxProps>(
   },
 );
 
+const role = (isRadio?: boolean) => (isRadio ? 'radio' : 'checkbox');
 const checkboxStyle = (value?: boolean) => style('rounded border', value ? 'bg-primary-main' : '');

package/src/ui-kit/CookiePopup/CookiePopup.tsx

@@ -35,7 +35,7 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
   }, []);
 
   return opened ? (
-    <div className="container fixed left-0 right-0 bottom-0 z-50">
+    <div className="container fixed left-0 right-0 bottom-0 z-50" role="dialog">
       <div className="bg-white m-xl p-xl rounded-md flex sm:items-center shadow-main-black">
         <div className="sm:flex-1">
           <Paragraph size="text-s" font="font-light" color="text-primary-text">

package/src/ui-kit/DialogManager/CloseButton.tsx

@@ -16,6 +16,7 @@ export const CloseButton = JSX<CloseButtonProps>(({ className, onClose }) => (
     )}
     onClick={onClose}
     title="Закрыть"
+    type="button"
   >
     <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
   </button>

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -20,7 +20,7 @@ export const Dialog = JSX<DialogProps>(({ className, head, children, onClose })
   }, [onClose]);
 
   return (
-    <div className={style('relative min-h-full bg-white pt-0 p-5', className)}>
+    <div className={style('relative min-h-full bg-white pt-0 p-5', className)} role="dialog">
       <div className="sticky py-xl top-0 bg-white z-10">
         <CloseButton className="absolute top-0 right-0" onClose={handleClose} />
         <div className="container">{head}</div>

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -24,6 +24,7 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
       disabled={disabled}
       data-theme={dataTheme}
       justifyContent="center"
+      role="button"
       className={style(
         'py-4 border border-transparent outline-none focus:border-primary-text space-x-s',
         disabled

package/src/ui-kit/Foldable/Foldable.tsx

@@ -29,12 +29,12 @@ export const Foldable = JSX<FoldableProps>(
     const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
 
     return isFoldButtonOnTop ? (
-      <div className={className}>
+      <div className={className} role="group">
         {buttonNode}
         {sectionNode}
       </div>
     ) : (
-      <div className={className}>
+      <div className={className} role="group">
         {sectionNode}
         {buttonNode}
       </div>

package/src/ui-kit/Heading/Heading.tsx

@@ -18,7 +18,7 @@ export const Heading = JSX<HeadingProps>(
     const Tag = headingTag(as);
 
     return (
-      <Tag className={style('font-sans m-0', styles[headingType], className)}>
+      <Tag role="heading" className={style('font-sans m-0', styles[headingType], className)}>
         {title || children}
       </Tag>
     );

package/src/ui-kit/Icon/Icon.tsx

@@ -78,5 +78,11 @@ const getInlineStyle = (className?: string, height?: string) => {
 const getSvgSize = (width?: string) => (width ? '' : 'w-full h-full');
 
 const Background = JSX<{ className?: string }>(({ className, children }) =>
-  className ? <div className={className}>{children}</div> : children,
+  className ? (
+    <div role="img" className={className}>
+      {children}
+    </div>
+  ) : (
+    children
+  ),
 );

package/src/ui-kit/LinkButton/LinkButton.tsx

@@ -24,7 +24,7 @@ export const LinkButton = JSX<LinkButtonProps>(
 );
 
 const RegularButton = JSX<LinkButtonProps>(
-  ({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (
+  ({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, type, children }) => (
     <a
       className={getRegularButtonClasses({ className, version, rounded })}
       href={href}
@@ -33,6 +33,7 @@ const RegularButton = JSX<LinkButtonProps>(
       aria-label={ariaLabel}
       role={href ? 'link' : 'button'}
       onClick={onClick}
+      type={type}
     >
       {children}
     </a>
@@ -41,14 +42,14 @@ const RegularButton = JSX<LinkButtonProps>(
 
 const DisabledButton = JSX<LinkButtonProps>(
   ({ className, ariaLabel, version, rounded, children }) => (
-    <div
-      role="button"
+    <button
+      type="button"
       aria-disabled="true"
       aria-label={ariaLabel}
       tabIndex={-1}
       className={getDisabledButtonClasses({ className, rounded, version })}
     >
       {children}
-    </div>
+    </button>
   ),
 );

package/src/ui-kit/LinkButton/LinkButtonProps.ts

@@ -14,4 +14,5 @@ export interface LinkButtonProps extends LinkButtonContent {
   appendLeft?: VNode;
   appendRight?: VNode;
   onClick?: (ev?: PreventableEvent) => void;
+  type?: string;
 }

package/src/ui-kit/LinkButton/renderButtonsSection.tsx

@@ -25,6 +25,7 @@ export const renderButtonsSection = (
           : 'flex-wrap @xl:flex-nowrap gap-lg sm:gap-m',
         className,
       )}
+      role="group"
     >
       {buttons.map(renderButton(buttonClassName))}
     </div>

package/src/ui-kit/LinkWrapper/LinkWrapper.tsx

@@ -17,7 +17,11 @@ export const LinkWrapper = JSX<LinkWrapperProps>(
     const Tag = href ? 'a' : 'div';
 
     return (
-      <Tag className={style('block', className)} {...(href ? linkProps : {})}>
+      <Tag
+        className={style('block', className)}
+        {...(href ? linkProps : {})}
+        role={href ? 'link' : 'none'}
+      >
         {children}
       </Tag>
     );

package/src/ui-kit/LocationDialog/LocationDialog.tsx

@@ -49,7 +49,7 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, defaul
               <Text size="text-l" font="font-light">
                 Сейчас выбран:&nbsp;
               </Text>
-              <button onClick={() => selectCurrentLocation(currentLocation)}>
+              <button type="button" onClick={() => selectCurrentLocation(currentLocation)}>
                 <Text color="text-primary-main">{currentLocation.name}</Text>
               </button>
             </div>

package/src/ui-kit/LocationDialog/renderRegion.tsx

@@ -9,6 +9,7 @@ export const renderRegion = (onChangeLocation?: (region: Region) => void) => (re
         onClick={() => {
           onChangeLocation && onChangeLocation(region);
         }}
+        type="button"
       >
         <Text size="text-l" font="font-light">
           {region.name || ''}

package/src/ui-kit/PriceList/PriceList.tsx

@@ -5,7 +5,10 @@ import { type PriceItem, type PriceListProps } from './PriceListProps';
 
 export const PriceList = JSX<PriceListProps>(({ priceList }) =>
   priceList?.length ? (
-    <div className="flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl">
+    <div
+      className="flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl"
+      role="list"
+    >
       {priceList.map(renderPriceListItem)}
     </div>
   ) : null,
@@ -15,6 +18,7 @@ const renderPriceListItem = ({ label, amount }: PriceItem, i: number) => (
   <div
     key={String(i)}
     className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between sm:bg-main-divider sm:py-m sm:px-lg sm:rounded-md items-baseline whitespace-pre"
+    role="listitem"
   >
     <Text font="font-light" size="text-l" color="text-secondary-text">
       {label}

package/src/ui-kit/Radio/Radio.tsx

@@ -14,6 +14,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
         name={name}
         checked={checked}
         onChange={(_) => onChange(_.target.value)}
+        role="radio"
       />
       {text ? <Text color="text-primary-text">{text}</Text> : null}
     </label>

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.tsx

@@ -29,7 +29,7 @@ export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
     onChange: onChangeCheckedItem,
     orientation = 'horizontal',
   }) => (
-    <div className={style(`flex ${orientationStyleMap[orientation]}`, className)}>
+    <div className={style(`flex ${orientationStyleMap[orientation]}`, className)} role="radiogroup">
       {items?.map(({ id, text }) => (
         <Checkbox
           key={String(id)}

package/src/ui-kit/SearchBar/SearchBar.tsx

@@ -29,7 +29,7 @@ export const SearchBar = JSX<SearchBarProps>(({ className, ...rest }) => {
   );
 
   return (
-    <div className={style('relative', className)}>
+    <div className={style('relative', className)} role="search">
       <SearchInput value={value} onChange={handleInitialInputChange} />
       <CloseButton className="absolute top-0 right-0 sm:hidden" onClose={resetQueryOnDialogClose} />
     </div>

package/src/ui-kit/Select/SelectPopup.tsx

@@ -20,14 +20,14 @@ export const SelectPopup = JSX<SelectPopupProps>(
     options?.length ? (
       <div
         className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md"
-        role="listbox"
+        role="list"
         ref={popupRef}
       >
         {filterOptions(options, query).map((option) => (
           <div
             key={option.key}
             className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
-            role="option"
+            role="listitem"
             aria-selected={option.key === value?.key}
             onClick={(e) => {
               e.stopPropagation();

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -76,6 +76,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
         className={style('box-border overflow-auto no-scrollbar', listType, className)}
         style={containerStyle}
         ref={containerRef}
+        role="list"
       >
         {mapChildren((child, idx) => (
           <SwipeListItem

package/src/ui-kit/SwipeListControl/SwipeListItem.tsx

@@ -44,6 +44,7 @@ export const SwipeListItem = JSX<SwipeListControlItemProps>(
         style={inlineStyle}
         aria-current={Boolean(idx === activeIndex)}
         ref={ref}
+        role="listitem"
       >
         {children}
       </div>

package/src/ui-kit/TextWithIcon/TextWithIcon.tsx

@@ -10,10 +10,11 @@ interface TextWithIconProps extends UniBlockProps {
   onClick?: () => void;
   disabled?: boolean;
   justifyContent?: 'between' | 'center';
+  role?: string;
 }
 
 export const TextWithIcon = JSX<TextWithIconProps>(
-  ({ textNode, iconNode, tag, onClick, justifyContent = 'between', className, ...rest }) => {
+  ({ textNode, iconNode, tag, onClick, justifyContent = 'between', className, role, ...rest }) => {
     const Tag: any = tag;
 
     return (
@@ -25,6 +26,7 @@ export const TextWithIcon = JSX<TextWithIconProps>(
           className,
         )}
         onClick={onClick}
+        role={role}
         {...rest}
       >
         {textNode ? <div>{textNode}</div> : null}