Add aria label to the customer account block link

[samueljseay]

Changes proposed in this Pull Request:

As mentioned in #46754 there is no aria-label on the customer account when the setting is icon-only. It makes sense to add this to improve a11y in this situation.

Closes #46754 .

How to test the changes in this Pull Request:

1. Add the customer account block to some content
2. In the editor, set the block display style setting to "icon only"
3. In the inspector in editor and front-end, confirm that an aria label is assigned to the link when it is display icon only
4. Also ensure that the aria label is not displayed for other display modes.

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Add aria-label to customer account block link when in icon-only display mode.

Comment

[github-actions]

Hi @imanish003,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Hi @imanish003,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[imanish003]

Hey @samueljseay,
I tested the changes & it's working as expected. Although, I have one quick question:
Would it be problematic if we added "aria-label" for all display styles? AFAIU We aren't adding it because there is following span in case of other display styles:

<span class="label">My Account</span>

But I don't think it will be problematic to have both i.e. this span & aria-label 🤔

[samueljseay]

@imanish003

Yes it would be problematic to use for all display styles because it would override the actual text of the element to provide the label in screen readers. At worst its confusing if someone changes the text in future, at best its redundant.

Basically we should only provide it when there is no text available.

[imanish003]

@samueljseay That makes sense. Thanks for sharing your rationale behind it 🙌🏻