style and a11y fixes

Author: paula-stacho

packages/compass-aggregations/src/components/pipeline-output-options-menu.tsx

@@ -14,6 +14,8 @@ const containerStyles = css({
   flex: 'none',
 });
 
+const defaultTitle = 'Output Options';
+
 export const PipelineOutputOptionsMenu: React.FunctionComponent<{
   onChangeOption: (option: PipelineOutputOption) => void;
   buttonText?: string;
@@ -24,11 +26,11 @@ export const PipelineOutputOptionsMenu: React.FunctionComponent<{
         data-testid="pipeline-output-options"
         actions={pipelineOptionsActions}
         onAction={onChangeOption}
-        buttonText={buttonText ?? 'Output Options'}
+        buttonText={buttonText ?? defaultTitle}
         buttonProps={{
           size: 'xsmall',
-          title: buttonText ?? 'Output Options',
-          ['aria-label']: buttonText ?? 'Output Options',
+          title: buttonText || defaultTitle,
+          ['aria-label']: buttonText || defaultTitle,
         }}
       ></DropdownMenuButton>
     </div>

packages/compass-components/src/components/actions/dropdown-menu-button.tsx

@@ -122,7 +122,9 @@ export function DropdownMenuButton<Action extends string>({
             data-testid={actionTestId(dataTestId, action)}
             data-action={action}
             data-menuitem={true}
-            glyph={<ActionGlyph glyph={icon} size={iconSize} />}
+            glyph={
+              icon ? <ActionGlyph glyph={icon} size={iconSize} /> : undefined
+            }
             onClick={onClick}
           >
             {label}