@apify/ui-library 0.74.0 → 0.74.1-fixa11yaudit-b2e9ed.23

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.74.0",
+    "version": "0.74.1-fixa11yaudit-b2e9ed.23+7cd7d2b5ea8",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -66,5 +66,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "275202abde49f18ecb5f20ffba07d52dbde6011e"
+    "gitHead": "7cd7d2b5ea86f2e94f55ea1a0566afb571388ead"
 }

package/src/components/button.tsx

@@ -1,3 +1,4 @@
+import type { AriaAttributes } from 'react';
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
@@ -27,8 +28,10 @@ export interface RegularButtonProps {
     disabled?: boolean;
 }
 
+type ButtonAriaProps = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+
 // Props shared for both types of the button
-export type CommonButtonProps = RegularButtonProps & TransientButtonProps & MarginSpacingProps;
+export type CommonButtonProps = RegularButtonProps & ButtonAriaProps & TransientButtonProps & MarginSpacingProps;
 // Regular button must have onClick defined
 export type ButtonProps = CommonButtonProps & WithRequired<RegularBoxProps, 'onClick'>;
 // OR it can pass to to become anchor link - in that case onClick is not needed
@@ -72,21 +75,21 @@ type ButtonSizeCombinations = {
 const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
     primary: {
         default: {
-            textColor: theme.color.neutral.backgroundSubtle,
+            textColor: theme.color.neutral.textOnPrimary,
             backgroundColor: theme.color.primary.action,
             borderColor: theme.color.primary.action,
             hoverColor: theme.color.primary.actionHover,
             activeColor: theme.color.primary.actionActive,
         },
         success: {
-            textColor: theme.color.neutral.backgroundSubtle,
+            textColor: theme.color.neutral.textOnPrimary,
             backgroundColor: theme.color.success.action,
             borderColor: theme.color.success.action,
             hoverColor: theme.color.success.actionHover,
             activeColor: theme.color.success.actionActive,
         },
         danger: {
-            textColor: theme.color.neutral.backgroundSubtle,
+            textColor: theme.color.neutral.textOnPrimary,
             backgroundColor: theme.color.danger.action,
             borderColor: theme.color.danger.action,
             hoverColor: theme.color.danger.actionHover,

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' {...props}>
+        <ActionButton onClick={handleClick} data-test='copy_to_clipboard' aria-label="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 StyledPreProps = {
+type PreWrapperProps = {
     $hasLinePrefixes: boolean,
     $isSingleLine: boolean
 };
 
-const StyledPre = styled.pre<StyledPreProps>`
+const PreWrapper = styled.pre<PreWrapperProps>`
     width: 100%;
     position: relative;
     z-index: 2;
@@ -102,10 +102,10 @@ const StyledPre = styled.pre<StyledPreProps>`
                 }
             `}
 
-            ${({ $isSingleLine }) => ($isSingleLine ? css<StyledPreProps>`
+            ${({ $isSingleLine }) => ($isSingleLine ? css<PreWrapperProps>`
                 white-space: nowrap;
                 vertical-align: text-top;
-            ` : css<StyledPreProps>`
+            ` : css<PreWrapperProps>`
                 padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? theme.space.space8 : theme.space.space16)};
                 padding-right: ${theme.space.space16};
 
@@ -162,7 +162,8 @@ export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlight
             {...rest}
         >
             {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (
-                <StyledPre
+                <PreWrapper
+                    tabIndex={0}
                     className={clsx(className, prismClassName)}
                     $hasLinePrefixes={hasLinePrefixes}
                     $isSingleLine={isSingleLine}
@@ -182,7 +183,7 @@ export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlight
                             </div>
                         ))}
                     </Text>
-                </StyledPre>
+                </PreWrapper>
             )}
         </Highlight>
     );

package/src/components/floating/menu.tsx

@@ -44,6 +44,7 @@ export interface MenuOption {
 }
 
 export interface MenuProps<T = MenuOption> {
+    ariaLabel?: string,
     options: T[],
     value?: string,
     onSelect: (newValue: string, selectedBy: SelectActionType) => void,
@@ -64,6 +65,7 @@ const defaultRenderOption = ({ label }: MenuOption) => (<Text as='span'>{label}<
  * It tries to mimic API of react-select as closely as possible
  */
 export const Menu = <T extends MenuOption>({
+    ariaLabel,
     options,
     value,
     onSelect,
@@ -129,7 +131,8 @@ export const Menu = <T extends MenuOption>({
             {...rest}
         >
             <MenuBaseComponent
-                aria-labelledby="select-label"
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabel ? undefined : 'select-label'}
                 aria-autocomplete="none"
                 ref={refs.setReference}
                 {...getReferenceProps()}

package/src/components/tabs/tabs.tsx

@@ -66,7 +66,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
     display: flex;
     position: relative;
 
-    [role='tabpanel'] {
+    [role='tablist'] {
         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} role="tablist" data-test="tabs-wrapper" $variant={variant}>
+    return <TabsWrapper {...props} data-test="tabs-wrapper" $variant={variant}>
         <div role="cell" aria-hidden={!overflowState?.left} />
-        <div ref={ref} role="tabpanel" onScroll={scrollHandler}>
+        <div ref={ref} role="tablist" onScroll={scrollHandler}>
             {tabs.map((tab) => (
                 <Tab
                     {...tab}

package/src/components/to_consolidate/pagination.tsx

@@ -83,6 +83,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({
                 disabled={page <= 0}
                 onClick={() => onPageChange(page - 1)}
                 trackingId='PaginationPrevPage'
+                aria-label="Previous page"
             >
                 <ChevronLeftIcon size="16" />
             </PaginationButtonBase>
@@ -128,6 +129,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({
                 disabled={page >= totalPages - 1}
                 onClick={() => onPageChange(page + 1)}
                 trackingId='PaginationNextPage'
+                aria-label="Next page"
             >
                 <ChevronRightIcon size="16" />
             </PaginationButtonBase>