ENGCOM-4328: [Backport] Add alt text to saved payment method for acce…

…ssibility #21206
magento · Feb 21, 2019 · f064e8c · f064e8c
2 parents 6480499 + cf5b832
commit f064e8c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/app/code/Magento/Payment/Model/CcConfigProvider.php b/app/code/Magento/Payment/Model/CcConfigProvider.php
@@ -44,7 +44,7 @@ public function __construct(
     }
 
     /**
-     * {@inheritdoc}
+     * @inheritdoc
      */
     public function getConfig()
     {
@@ -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),
                     ];
                 }
             }

diff --git a/app/code/Magento/Payment/Test/Unit/Model/CcConfigProviderTest.php b/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')

diff --git a/app/code/Magento/Vault/view/frontend/web/template/payment/form.html b/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>