@apify/ui-library 0.72.1-fixa11yaudit-b2e9ed.6 → 0.72.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.72.1-fixa11yaudit-b2e9ed.6+f7343ecc27c",
+    "version": "0.72.2",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^0.11.1",
+        "@apify/ui-icons": "^0.12.0",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -66,5 +66,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "f7343ecc27c649336f6dac03889401c64c9143bf"
+    "gitHead": "de690dce31fd00c6237dca84f570309e96faaef3"
 }

package/src/components/button.tsx

@@ -266,7 +266,6 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
     };
 
     const iconSize = size === 'medium' ? '16' : '12';
-    console.log('variant', variant);
 
     if (isAnchorButton(props)) {
         const isExternal = isUrlExternal(props.to, windowLocationHost);

package/src/components/code/action_button.tsx

@@ -89,7 +89,7 @@ interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
 export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
     const [isCopied, handleClick] = useCopyToClipboard({ text: code });
     return (
-        <ActionButton onClick={handleClick} data-test='copy_to_clipboard' aria-label="Copy to clipboard" {...props}>
+        <ActionButton onClick={handleClick} data-test='copy_to_clipboard' {...props}>
             {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
         </ActionButton>
     );

package/src/components/code/prism_highlighter.tsx

@@ -46,12 +46,12 @@ const loadLanguages = async () => {
 
 void loadLanguages();
 
-type PreWrapperProps = {
+type StyledPreProps = {
     $hasLinePrefixes: boolean,
     $isSingleLine: boolean
 };
 
-const PreWrapper = styled.pre<PreWrapperProps>`
+const StyledPre = styled.pre<StyledPreProps>`
     width: 100%;
     position: relative;
     overflow: auto;
@@ -93,10 +93,10 @@ const PreWrapper = styled.pre<PreWrapperProps>`
                 }
             `}
 
-            ${({ $isSingleLine }) => ($isSingleLine ? css<PreWrapperProps>`
+            ${({ $isSingleLine }) => ($isSingleLine ? css<StyledPreProps>`
                 white-space: nowrap;
                 vertical-align: text-top;
-            ` : css<PreWrapperProps>`
+            ` : css<StyledPreProps>`
                 padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? theme.space.space8 : theme.space.space16)};
                 padding-right: ${theme.space.space16};
 
@@ -153,8 +153,7 @@ export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlight
             {...rest}
         >
             {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (
-                <PreWrapper
-                    tabIndex={0}
+                <StyledPre
                     className={clsx(className, prismClassName)}
                     $hasLinePrefixes={hasLinePrefixes}
                     $isSingleLine={isSingleLine}
@@ -174,7 +173,7 @@ export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlight
                             </div>
                         ))}
                     </Text>
-                </PreWrapper>
+                </StyledPre>
             )}
         </Highlight>
     );

package/src/components/tabs/tabs.tsx

@@ -66,7 +66,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
     display: flex;
     position: relative;
 
-    [role='tablist'] {
+    [role='tabpanel'] {
         min-width: 0;
         display: flex;
         flex-grow: 1;
@@ -152,9 +152,9 @@ export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props
         setOveflowState(isTabsOverflowing(event.currentTarget as HTMLDivElement));
     }, []);
 
-    return <TabsWrapper {...props} data-test="tabs-wrapper" $variant={variant}>
+    return <TabsWrapper {...props} role="tablist" data-test="tabs-wrapper" $variant={variant}>
         <div role="cell" aria-hidden={!overflowState?.left} />
-        <div ref={ref} role="tablist" onScroll={scrollHandler}>
+        <div ref={ref} role="tabpanel" onScroll={scrollHandler}>
             {tabs.map((tab) => (
                 <Tab
                     {...tab}