@apify/ui-library 0.73.1-fixa11yaudit-b2e9ed.16 → 0.73.1-fixa11yaudit-b2e9ed.39

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.73.1-fixa11yaudit-b2e9ed.16+263d6454bff",
+    "version": "0.73.1-fixa11yaudit-b2e9ed.39+8c4235dce5b",
     "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": "263d6454bff1e09d3c9b6d4a9a62408f41c3eb2c"
+    "gitHead": "8c4235dce5bb5c60ea2246f86b630bd0ad899167"
 }

package/src/components/button.tsx

@@ -75,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/prism_highlighter.tsx

@@ -54,16 +54,25 @@ type PreWrapperProps = {
 const PreWrapper = styled.pre<PreWrapperProps>`
     width: 100%;
     position: relative;
-    overflow: auto;
     z-index: 2;
     padding: ${({ $isSingleLine }) => ($isSingleLine ? 0 : `${theme.space.space16} 0`)};
     margin: 0;
+    overflow: auto;
 
     code {
         min-width: 100%;
         display: inline-block;
         vertical-align: middle;
 
+        /* The following CSS deal with https://github.com/apify/apify-core/issues/20920 */
+        ${({ $isSingleLine }) => ($isSingleLine ? css`
+            overflow-y: hidden;
+            scrollbar-width: none;
+        ` : css`
+            scrollbar-width: thin;
+            overflow: hidden;
+        `)};
+
         *,
         *::before,
         *::after {

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