From 1d36e98d9d4abbd888b4ff28dd4450f9bc20ccb8 Mon Sep 17 00:00:00 2001
From: Okan Sahin <39759830+mokimo@users.noreply.github.com>
Date: Tue, 29 Oct 2024 09:01:09 +0100
Subject: [PATCH] MWPW-160834: Clickable App and Playstore links (#3074)

* Place app store buttons next to eachother

* Add Robert's PR feedback

* Address Rares PR feedback

* Add aria-labels

* Keep lines under 100 characters

* Remove the margin of the container
---
 libs/blocks/media/media.css | 7 ++++---
 libs/blocks/media/media.js  | 5 +++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css
index 169c6d07e5..a1db42de61 100644
--- a/libs/blocks/media/media.css
+++ b/libs/blocks/media/media.css
@@ -165,8 +165,8 @@ div[class*="-up"] .media .foreground > .media-row {
 }
 
 .media.qr-code .qr-button-container {
-  display: inline;
-  margin-right: var(--spacing-s);
+  display: inline-block;
+  margin: 0;
 }
 
 .media.qr-code .google-play,
@@ -179,7 +179,8 @@ div[class*="-up"] .media .foreground > .media-row {
   justify-content: center;
   padding: 0;
   display: inline-flex;
-  margin: var(--spacing-xs) var(--spacing-s) 0 0;
+  margin-top: var(--spacing-xs);
+  margin-inline-end: var(--spacing-s);
 }
 
 .media.qr-code .google-play {
diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js
index 1aa55cb4fa..62b3af490c 100644
--- a/libs/blocks/media/media.js
+++ b/libs/blocks/media/media.js
@@ -34,11 +34,16 @@ function decorateQr(el) {
   const googlePlay = text.children[(text.children.length - 2)]?.querySelector('a');
   const qrImage = text.children[(text.children.length - 3)];
   if (!qrImage || !appStore || !googlePlay) return;
+  [appStore, googlePlay].forEach(({ parentElement }) => {
+    parentElement.classList.add('qr-button-container');
+  });
   qrImage.classList.add('qr-code-img');
   appStore.classList.add('app-store');
   appStore.textContent = '';
+  appStore.setAttribute('aria-label', 'Apple App Store');
   googlePlay.classList.add('google-play');
   googlePlay.textContent = '';
+  googlePlay.setAttribute('aria-label', 'Google Play Store');
 }
 
 export default async function init(el) {