Populate label elements for street address fields in checkout

[scottsb]

Description (*)

Populate <label> elements for the street fields in checkout. (The elements are already present but are blank by default.) This applies both when entering either a new shipping address or billing address.

The one aspect of this PR I'm not certain is handled the best way is the translation of the label. Glad to see any suggestions for improvements on how I've done this.

Fixed Issues (if relevant)

#10893: Street fields in checkout don't have a label that's readable by a screenreader

Manual testing scenarios (*)

1. Add a product to your cart
2. Go to checkout
3. Verify that the street address fields have a linked <label> with text populated (e.g., "Street Address: Line 1"). These labels should be hidden visually (since meaning is implied visually by the fieldset legend) but accessible to screen reader software.

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds on Travis CI are green)

[magento-cicd2]

All committers have signed the CLA.

[magento-engcom-team]

Hi @scottsb. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento-engcom-team give me test instance - deploy test instance based on PR changes
• @magento-engcom-team give me 2.3-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Assistant documentation

[okorshenko]

@magento-engcom-team give me test instance

[magento-engcom-team]

Hi @okorshenko. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @okorshenko, here is your new Magento instance.
Admin access: https://pr-21484.instances.magento-community.engineering/admin
Login: admin Password: 123123q

[magento-engcom-team]

Hi @miguelbalparda, thank you for the review.
ENGCOM-4414 has been created to process this Pull Request

[VasylShvorak]

Hi @scottsb . There is problem with translate phrase in label for address fields.
Manual testing scenario:

• Run php bin/magento i18n:collect-phrases -o /path_to_magento/app/i18n/path_to_csv/en_US.csv" -m
• Find phrase in translation file.
• ❌ Phrase is added as "untranslatedLabel: Line %1","untranslatedLabel: Line %1",module,Magento_Checkout . Phrase is not translatable.
  

[scottsb]

@VasylShvorak Please retest. (Note that I rebased and squashed.)

[magento-engcom-team]

Hi @sidolov, thank you for the review.
ENGCOM-4414 has been created to process this Pull Request

[VasylShvorak]

✔️ QA passed

[m2-assistant]

Hi @scottsb, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

[ultrazeus]

This commit only adds the label to the first line, which I think is absolutely pointless. Why try to fix something that was never broken? Now I have to try to remove it

@trucatchtraps did you manage to remove it? I have the same problem.

[trucatchtraps]

@JulienVB

Yes, I just added it to my custom theme less file.

app/design/frontend/vendorname/themename/Magento_Customer/web/css/source/_extend.less

& when (@media-common = true) {
    //  Checkout address - Remove Street Address Label for each line
    .field.street .field .label {
        display: none;
    }
}