{
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'
+ })}
/>