Add alt text to saved payment method for accessibility

Fixes #21089

Author: pmclain

app/code/Magento/Payment/Model/CcConfigProvider.php

@@ -69,7 +69,7 @@ public function getIcons()
         }
 
         $types = $this->ccConfig->getCcAvailableTypes();
-        foreach (array_keys($types) as $code) {
+        foreach ($types as $code => $label) {
             if (!array_key_exists($code, $this->icons)) {
                 $asset = $this->ccConfig->createAsset('Magento_Payment::images/cc/' . strtolower($code) . '.png');
                 $placeholder = $this->assetSource->findSource($asset);
@@ -78,7 +78,8 @@ public function getIcons()
                     $this->icons[$code] = [
                         'url' => $asset->getUrl(),
                         'width' => $width,
-                        'height' => $height
+                        'height' => $height,
+                        'title' => __($label),
                     ];
                 }
             }

app/code/Magento/Payment/Test/Unit/Model/CcConfigProviderTest.php

@@ -42,12 +42,14 @@ public function testGetConfig()
                         'vi' => [
                             'url' => 'http://cc.card/vi.png',
                             'width' => getimagesize($imagesDirectoryPath . 'vi.png')[0],
-                            'height' => getimagesize($imagesDirectoryPath . 'vi.png')[1]
+                            'height' => getimagesize($imagesDirectoryPath . 'vi.png')[1],
+                            'title' => __('Visa'),
                         ],
                         'ae' => [
                             'url' => 'http://cc.card/ae.png',
                             'width' => getimagesize($imagesDirectoryPath . 'ae.png')[0],
-                            'height' => getimagesize($imagesDirectoryPath . 'ae.png')[1]
+                            'height' => getimagesize($imagesDirectoryPath . 'ae.png')[1],
+                            'title' => __('American Express'),
                         ]
                     ]
                 ]
@@ -56,19 +58,25 @@ public function testGetConfig()
 
         $ccAvailableTypesMock = [
             'vi' => [
+                'title' => 'Visa',
                 'fileId' => 'Magento_Payment::images/cc/vi.png',
                 'path' => $imagesDirectoryPath . 'vi.png',
                 'url' => 'http://cc.card/vi.png'
             ],
             'ae' => [
+                'title' => 'American Express',
                 'fileId' => 'Magento_Payment::images/cc/ae.png',
                 'path' => $imagesDirectoryPath . 'ae.png',
                 'url' => 'http://cc.card/ae.png'
             ]
         ];
         $assetMock = $this->createMock(\Magento\Framework\View\Asset\File::class);
 
-        $this->ccConfigMock->expects($this->once())->method('getCcAvailableTypes')->willReturn($ccAvailableTypesMock);
+        $this->ccConfigMock->expects($this->once())->method('getCcAvailableTypes')
+            ->willReturn(array_combine(
+                array_keys($ccAvailableTypesMock),
+                array_column($ccAvailableTypesMock, 'title')
+            ));
 
         $this->ccConfigMock->expects($this->atLeastOnce())
             ->method('createAsset')

app/code/Magento/Vault/view/frontend/web/template/payment/form.html

@@ -19,7 +19,8 @@
             <img data-bind="attr: {
             'src': getIcons(getCardType()).url,
             'width': getIcons(getCardType()).width,
-            'height': getIcons(getCardType()).height
+            'height': getIcons(getCardType()).height,
+            'alt': getIcons(getCardType()).title
             }" class="payment-icon">
             <span translate="'ending'"></span>
             <span text="getMaskedCard()"></span>