@paypal/checkout-components 5.0.246-alpha.0 → 5.0.246

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.246-alpha.0",
+  "version": "5.0.246",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,7 @@
     "debug": "cross-env NODE_ENV=debug",
     "delete-size": "rm dist/size.* dist/report.html",
     "demo": "serve ./demo -l 1337",
-    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open demo/dev/index.htm --https --hot=false",
+    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open demo/dev/index.htm --https --hot=false --static './'",
     "eslint-find-rules": "eslint-find-rules --current .eslintrc.js --unused --plugin",
     "flow": "flow",
     "flow-typed": "rm -rf flow-typed && flow-typed install && rm flow-typed/npm/puppeteer_*",

package/src/types.js

@@ -46,7 +46,8 @@ export type ContentType = {|
     payWith : string,
     payLater : string,
     flex : string,
-    payPalBalance: string
+    payPalBalance: string,
+    moreOptions: string
 |};
 
 export type Experiment = {|

package/src/ui/buttons/button.jsx

@@ -99,8 +99,18 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             preventClickFocus(el);
         }
     };
-    
-    const labelText = typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
+
+    function getAriaLabel() : string {
+        let labelText = typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
+
+        if (!showPayLabel && instrument?.vendor && instrument.label) {
+            labelText = instrument.secondaryInstruments ? `${instrument.secondaryInstruments[0].type} & ${instrument.vendor} ${instrument.label}` : `${instrument.vendor} ${instrument.label}`;
+        }
+
+        return labelText;
+    }
+
+    const labelText = getAriaLabel();
 
     const logoNode = (
         <Logo
@@ -253,7 +263,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 <Spinner />
             </div>
 
-            { shouldShowWalletMenu ? <MenuButton textColor={ textColor } /> : null }
+            { shouldShowWalletMenu ? <MenuButton textColor={ textColor } content={ content } /> : null }
         </div>
     );
 }

package/src/ui/buttons/menu-button/menu-button.jsx

@@ -5,10 +5,12 @@ import { node, type ChildType, Style } from '@krakenjs/jsx-pragmatic/src';
 
 import { ATTRIBUTE, TEXT_COLOR } from '../../../constants';
 import { Chevron } from '../../chevron';
+import type { ContentType } from '../../../types';
 
 import css from './menu-button.scoped.scss';
 
-export function MenuButton({ textColor = TEXT_COLOR.BLACK } : {| textColor? : $Values<typeof TEXT_COLOR> |} = { }) : ChildType {
+export function MenuButton({ textColor = TEXT_COLOR.BLACK, content } : {| textColor? : $Values<typeof TEXT_COLOR>, content : ?ContentType |} = { }) : ChildType {
+    const labelText = content?.moreOptions;
     return (
         <Style css={ css }>
             <div
@@ -16,7 +18,10 @@ export function MenuButton({ textColor = TEXT_COLOR.BLACK } : {| textColor? : $V
                     [ATTRIBUTE.MENU]: true
                 } }
                 tabindex='0'
-                class='menu-button'>
+                class='menu-button'
+                role='button'
+                aria-label={ labelText }
+                aria-haspopup='menu'>
                 <Chevron color={ textColor } />
             </div>
         </Style>