[Accessibility] "Credit card" announced twice

[gazjoy]

Describe the bug When using the drop-in component with a screen reader the title "credit card" is read twice. This is because the tiny credit card icon has alt="credit card" on there.

To Reproduce Steps to reproduce the behavior:

1. Go to payment step with screen reader
2. Read the content

Expected behavior I expect "credit card" to only be read out once.

We should remove the value of the alt attribute so it looks like this alt="". This will hide the image from the accessibility tree and not be announced by a screen reader. If this is not possible we can add role="presentation" although an empty alt is preferred as it will have more assistive tech cover.

Screenshots

Desktop (please complete the following information):

• OS: macOS Monterey 12.5
• Browser: Safari 15.6
• Screen reader: VoiceOver

[sponglord]

Hi @gazjoy - yeah, it looks like our "decorative" approach (re. https://github.com/Adyen/adyen-web/issues/1691#issuecomment-1220451031) might have missed this one.

Thanks for pointing it out