Merge pull request #39 from make-software/bugfix/change-components-to-fix-click-a11y

Change components to fix click a11y

Author: victoriari

dist/cspr-design.es.js

@@ -20,5 +20,5 @@ export declare const ProductItemWrapper: import('styled-components').StyledCompo
     disabled: boolean;
 }, never>;
 export declare const StyledBodyText: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<import('../../..').BodyTextProps & React.RefAttributes<HTMLSpanElement>>, import('styled-components').DefaultTheme, {}, never>;
-export declare const ProductsMenuItem: ({ nameLabel, link, icon, descriptionText, selected, newBadgeLabel, comingSoonBadgeLabel, badge, }: ProductsMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductsMenuItem: React.ForwardRefExoticComponent<ProductsMenuItemProps & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=products-menu-item.d.ts.map

dist/cspr-design.umd.js

@@ -1,8 +1,10 @@
-import { PropsWithChildren } from 'react';
+import { default as React } from 'react';
 interface DropdownMenuItemProps {
     onClick?: () => void;
     padding?: string;
 }
-export declare const DropdownMenuItem: (props: PropsWithChildren<DropdownMenuItemProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
 export {};
 //# sourceMappingURL=dropdown-menu-item.d.ts.map

dist/lib/components/confirmation-window/confirmation-window.d.ts.map

@@ -217,11 +217,28 @@ export const ConfirmationWindow = ({
               justify={'space-between'}
             >
               {dismissLabel && (
-                <StyledDismissButton color={'utility'} onClick={onDismiss}>
+                <StyledDismissButton
+                    color={'utility'}
+                    hasOutline
+                    onClick={onDismiss}
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        onDismiss();
+                      }
+                    }}>
                   {dismissLabel}
                 </StyledDismissButton>
               )}
-              <StyledConfirmButton onClick={onConfirm}>
+              <StyledConfirmButton
+                  onClick={onConfirm}
+                  hasOutline
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                     if (e.key === 'Enter') {
+                         onConfirm();
+                     }
+                  }}>
                 {confirmLabel}
               </StyledConfirmButton>
             </ButtonsContainer>