diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json index 4db67d96c8..5dfbc80997 100644 --- a/packages/venia-ui/i18n/en_US.json +++ b/packages/venia-ui/i18n/en_US.json @@ -481,5 +481,15 @@ "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.", "wishlist.itemCountOpen": "Showing {currentCount} of {count} items in this list", "wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list", - "wishlist.loadMore": "Load More" + "wishlist.loadMore": "Load More", + "global.firstNameRequired":"First Name Required", + "global.lastNameRequired":"Last Name Required", + "global.emailRequired":"Email Required", + "global.passwordRequired":"Password Required", + "global.countryRequired":"Country Required", + "global.streetAddressRequired":"Street Address Required", + "global.cityRequired":"City Required", + "global.stateRequired":"State Required", + "Form.postalCode":"ZIP / Postal Code Required", + "Form.phonenumber":"Phone Number Required" } diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap index a80be14524..84ca4114ed 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap +++ b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap @@ -46,6 +46,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = ` className="input" > { { { { validatePassword ])} validateOnBlur + aria-label={formatMessage({ + id: 'global.passwordRequired', + defaultMessage: 'Password Required' + })} />
@@ -215,6 +218,7 @@ Array [ className="input" > @@ -676,6 +687,7 @@ Array [ className="input" > @@ -1197,6 +1216,7 @@ Array [ className="input" > @@ -191,6 +195,7 @@ Array [ className="input" > @@ -641,6 +654,7 @@ Array [ className="input" > @@ -1079,6 +1101,7 @@ Array [ className="input" > @@ -1543,6 +1574,7 @@ Array [ className="input" > { id="customer_firstname" data-cy="CustomerForm-firstName" validate={isRequired} + aria-label={formatMessage({ + id: 'global.firstNameRequired', + defaultMessage: 'First Name Required' + })} /> @@ -176,6 +180,10 @@ const CustomerForm = props => { id="customer_lastname" data-cy="CustomerForm-lastName" validate={isRequired} + aria-label={formatMessage({ + id: 'global.lastNameRequired', + defaultMessage: 'Last Name Required' + })} /> @@ -183,6 +191,10 @@ const CustomerForm = props => {
@@ -198,6 +210,10 @@ const CustomerForm = props => { validate={isRequired} id="customer_street0" data-cy="CustomerForm-street0" + aria-label={formatMessage({ + id: 'global.streetAddressRequired', + defaultMessage: 'Street Address Required' + })} />
@@ -224,12 +240,20 @@ const CustomerForm = props => { id: 'global.city', defaultMessage: 'City' })} + aria-label={formatMessage({ + id: 'global.countryRequired', + defaultMessage: 'Country Required' + })} > @@ -240,12 +264,20 @@ const CustomerForm = props => { fieldInput={'region[region]'} fieldSelect={'region[region_id]'} optionValueKey={'id'} + aria-label={formatMessage({ + id: 'global.stateRequired', + defaultMessage: 'State Required' + })} />
@@ -261,6 +293,10 @@ const CustomerForm = props => { validate={isRequired} id="customer_telephone" data-cy="CustomerForm-telephone" + aria-label={formatMessage({ + id: 'global.phonenumberRequired', + defaultMessage: 'Phone Number Required' + })} />
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js index c2cda920cb..752cac1736 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js @@ -153,6 +153,10 @@ const GuestForm = props => { id="email" data-cy="GuestForm-email" validate={isRequired} + aria-label={formatMessage({ + id: 'global.emailRequired', + defaultMessage: 'Email Required' + })} onBlur={() => handleValidateEmail( formApiRef.current.getValue('email') @@ -185,6 +189,10 @@ const GuestForm = props => { id="firstname" data-cy="GuestForm-firstName" validate={isRequired} + aria-label={formatMessage({ + id: 'global.firstNameRequired', + defaultMessage: 'First Name Required' + })} /> @@ -205,6 +213,10 @@ const GuestForm = props => { id="lastname" data-cy="GuestForm-lastName" validate={isRequired} + aria-label={formatMessage({ + id: 'global.lastNameRequired', + defaultMessage: 'Last Name Required' + })} /> @@ -216,6 +228,10 @@ const GuestForm = props => { })} validate={isRequired} data-cy="GuestForm-country" + aria-label={formatMessage({ + id: 'global.countryRequired', + defaultMessage: 'Country Required' + })} />
@@ -235,6 +251,10 @@ const GuestForm = props => { id="street0" data-cy="GuestForm-street0" validate={isRequired} + aria-label={formatMessage({ + id: 'global.streetAddressRequired', + defaultMessage: 'Street Address Required' + })} />
@@ -275,6 +295,10 @@ const GuestForm = props => { id="city" data-cy="GuestForm-city" validate={isRequired} + aria-label={formatMessage({ + id: 'global.cityRequired', + defaultMessage: 'City Required' + })} /> @@ -289,6 +313,10 @@ const GuestForm = props => { fieldSelect={'region[region_id]'} optionValueKey={'id'} data-cy="GuestForm-region" + aria-label={formatMessage({ + id: 'global.stateRequired', + defaultMessage: 'State Required' + })} />
@@ -299,6 +327,10 @@ const GuestForm = props => { })} validate={isRequired} data-cy="GuestForm-postcode" + aria-label={formatMessage({ + id: 'global.postalCodeRequired', + defaultMessage: 'ZIP / Postal Code Required' + })} />
@@ -318,6 +350,10 @@ const GuestForm = props => { id="telephone" data-cy="GuestForm-telephone" validate={isRequired} + aria-label={formatMessage({ + id: 'global.phonenumberRequired', + defaultMessage: 'Phone Number Required' + })} />
diff --git a/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap b/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap index c4c7b139d4..daaf554258 100644 --- a/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap +++ b/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap @@ -28,6 +28,7 @@ exports[`renders the correct tree 1`] = ` > { mask={value => value && value.trim()} maskOnBlur={true} data-cy="customer-firstname" + aria-label={formatMessage({ + id: 'global.firstNameRequired', + defaultMessage: 'First Name Required' + })} /> { mask={value => value && value.trim()} maskOnBlur={true} data-cy="customer-lastname" + aria-label={formatMessage({ + id: 'global.lastNameRequired', + defaultMessage: 'Last Name Required' + })} /> { mask={value => value && value.trim()} maskOnBlur={true} data-cy="customer-email" + aria-label={formatMessage({ + id: 'global.emailRequired', + defaultMessage: 'Email Required' + })} /> { mask={value => value && value.trim()} maskOnBlur={true} data-cy="password" + aria-label={formatMessage({ + id: 'global.passwordRequired', + defaultMessage: 'Password Required' + })} />
{ field="email" validate={isRequired} data-cy="email" + aria-label={formatMessage({ + id: 'global.emailRequired', + defaultMessage: 'Email Required' + })} /> { autoComplete="current-password" isToggleButtonHidden={false} data-cy="password" + aria-label={formatMessage({ + id: 'global.passwordRequired', + defaultMessage: 'Password Required' + })} />