[Modals] Replace aria-haspopup="dialog" with aria-describedby

assets/cart-drawer.js

@@ -10,7 +10,7 @@ class CartDrawer extends HTMLElement {
   setHeaderCartIconAccessibility() {
     const cartLink = document.querySelector('#cart-icon-bubble');
     cartLink.setAttribute('role', 'button');
-    cartLink.setAttribute('aria-haspopup', 'dialog');
+    cartLink.setAttribute('aria-describedby', 'a11y-modal-window-message');
     cartLink.addEventListener('click', (event) => {
       event.preventDefault();
       this.open(cartLink)

assets/details-modal.js

@@ -3,6 +3,7 @@ class DetailsModal extends HTMLElement {
     super();
     this.detailsContainer = this.querySelector('details');
     this.summaryToggle = this.querySelector('summary');
+    this.summaryToggle.setAttribute('aria-describedby', 'a11y-modal-window-message');
 
     this.detailsContainer.addEventListener(
       'keyup',

assets/product-form.js

@@ -8,7 +8,8 @@ if (!customElements.get('product-form')) {
       this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
       this.cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
       this.submitButton = this.querySelector('[type="submit"]');
-      if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-haspopup', 'dialog');
+
+      if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-describedby', 'a11y-modal-window-message');
     }
 
     onSubmitHandler(evt) {

layout/password.liquid

@@ -164,5 +164,8 @@
     <footer>
       {% section 'main-password-footer' %}
     </footer>
+    <div hidden>
+      <span id="a11y-modal-window-message">{{ 'accessibility.link_messages.modal_window' | t }}</span>
+    </div>
   </body>
 </html>

layout/theme.liquid

@@ -228,11 +228,6 @@
 
     {% section 'footer' %}
 
-    <ul hidden>
-      <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
-      <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
-    </ul>
-
     <script>
       window.shopUrl = '{{ request.origin }}';
       window.routes = {
@@ -265,5 +260,11 @@
     {%- if settings.predictive_search_enabled -%}
       <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
     {%- endif -%}
+
+    <div hidden>
+      <span id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</span>
+      <span id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</span>
+      <span id="a11y-modal-window-message">{{ 'accessibility.link_messages.modal_window' | t }}</span>
+    </div>
   </body>
 </html>

locales/bg-BG.json

@@ -68,7 +68,8 @@
     "refresh_page": "При задаване на избор се опреснява цялата страница.",
     "link_messages": {
       "new_window": "Отваря се в нов прозорец.",
-      "external": "Отваря външен уебсайт."
+      "external": "Отваря външен уебсайт.",
+      "modal_window": "изскачащ диалогов прозорец"
     },
     "loading": "Зареждане...",
     "skip_to_product_info": "Прескочи към информацията за продукта",

locales/cs.json

@@ -69,7 +69,8 @@
     "loading": "Načítání...",
     "link_messages": {
       "new_window": "Otevře se v novém okně.",
-      "external": "Otevře externí webovou stránku."
+      "external": "Otevře externí webovou stránku.",
+      "modal_window": "vyskakovací okno dialogu"
     },
     "skip_to_product_info": "Přejít na informace o produktu",
     "total_reviews": "celkový počet recenzí",

locales/da.json

@@ -68,7 +68,8 @@
     "refresh_page": "Hele siden bliver genindlæst, når du vælger et afsnit.",
     "link_messages": {
       "new_window": "Åbner i et nyt vindue.",
-      "external": "Åbner eksternt website."
+      "external": "Åbner eksternt website.",
+      "modal_window": "pop op-dialogboks"
     },
     "loading": "Indlæser...",
     "skip_to_product_info": "Gå til produktoplysninger",

locales/de.json

@@ -68,7 +68,8 @@
     "refresh_page": "Wenn du dich für eine Auswahl entscheidest, wird die Seite komplett aktualisiert.",
     "link_messages": {
       "new_window": "Wird in einem neuen Fenster geöffnet.",
-      "external": "Öffnet externe Webseite."
+      "external": "Öffnet externe Webseite.",
+      "modal_window": "Dialog-Pop-up"
     },
     "loading": "Wird geladen ...",
     "skip_to_product_info": "Zu Produktinformationen springen",

locales/el.json

@@ -68,7 +68,8 @@
     "refresh_page": "Ο ορισμός μιας επιλογής έχει ως αποτέλεσμα την πλήρη ανανέωση της σελίδας.",
     "link_messages": {
       "new_window": "Ανοίγει σε νέο παράθυρο.",
-      "external": "Ανοίγει εξωτερικό ιστότοπο."
+      "external": "Ανοίγει εξωτερικό ιστότοπο.",
+      "modal_window": "αναδυόμενο παράθυρο διαλόγου"
     },
     "loading": "Φόρτωση...",
     "skip_to_product_info": "Μετάβαση στις πληροφορίες προϊόντος",

locales/en.default.json

@@ -69,7 +69,8 @@
     "refresh_page": "Choosing a selection results in a full page refresh.",
     "link_messages": {
       "new_window": "Opens in a new window.",
-      "external": "Opens external website."
+      "external": "Opens external website.",
+      "modal_window": "dialog popup"
     },
     "loading": "Loading...",
     "total_reviews": "total reviews",

locales/es.json

@@ -68,7 +68,8 @@
     "refresh_page": "Al seleccionar una opción, se actualiza toda la página.",
     "link_messages": {
       "new_window": "Se abre en una nueva ventana.",
-      "external": "Se abre el sitio web externo."
+      "external": "Se abre el sitio web externo.",
+      "modal_window": "Cuadro de diálogo emergente"
     },
     "loading": "Cargando...",
     "skip_to_product_info": "Ir directamente a la información del producto",

locales/fi.json

@@ -68,7 +68,8 @@
     "refresh_page": "Vaihtoehdon valinta päivittää koko sivun.",
     "link_messages": {
       "new_window": "Avaa uuden ikkunan.",
-      "external": "Avaa ulkoisen verkkosivuston."
+      "external": "Avaa ulkoisen verkkosivuston.",
+      "modal_window": "ponnahdusvalintaikkuna"
     },
     "loading": "Ladataan...",
     "skip_to_product_info": "Siirry tuotetietoihin",

locales/fr.json

@@ -68,7 +68,8 @@
     "refresh_page": "Le choix d'une sélection entraîne l'actualisation de la page entière.",
     "link_messages": {
       "new_window": "S'ouvre dans une nouvelle fenêtre.",
-      "external": "Ouvre un site web externe."
+      "external": "Ouvre un site web externe.",
+      "modal_window": "boîte de dialogue contextuelle"
     },
     "loading": "Chargement en cours...",
     "skip_to_product_info": "Passer aux informations produits",

locales/hr-HR.json

@@ -69,7 +69,8 @@
     "loading": "Učitavanje...",
     "link_messages": {
       "new_window": "Otvara se u novom prozoru.",
-      "external": "Otvara vanjsko web-mjesto."
+      "external": "Otvara vanjsko web-mjesto.",
+      "modal_window": "skočni prozor za razgovor"
     },
     "skip_to_product_info": "Preskoči do informacija o proizvodu",
     "total_reviews": "ukupan broj pregleda",

locales/hu.json

@@ -68,7 +68,8 @@
     "refresh_page": "Ha kiválasztasz egy lehetőséget, a teljes oldal frissül.",
     "link_messages": {
       "new_window": "Tartalom megnyitása új ablakban.",
-      "external": "Külső webhelyet nyit meg."
+      "external": "Külső webhelyet nyit meg.",
+      "modal_window": "előugró párbeszédpanel"
     },
     "loading": "Betöltés folyamatban…",
     "skip_to_product_info": "Kihagyás, és ugrás a termékadatokra",

locales/id.json

@@ -68,7 +68,8 @@
     "refresh_page": "Jika memilih salah satu, seluruh halaman akan dimuat ulang.",
     "link_messages": {
       "new_window": "Membuka di jendela baru.",
-      "external": "Membuka situs web eksternal."
+      "external": "Membuka situs web eksternal.",
+      "modal_window": "popup dialog"
     },
     "loading": "Memuat...",
     "skip_to_product_info": "Langsung ke informasi produk",

locales/it.json

@@ -68,7 +68,8 @@
     "refresh_page": "Scegliendo una selezione si ottiene un aggiornamento completo della pagina.",
     "link_messages": {
       "new_window": "Si apre in una nuova finestra.",
-      "external": "Apre un sito web esterno."
+      "external": "Apre un sito web esterno.",
+      "modal_window": "pop up di dialogo"
     },
     "loading": "Caricamento in corso...",
     "skip_to_product_info": "Passa alle informazioni sul prodotto",

locales/ja.json

@@ -68,7 +68,8 @@
     "refresh_page": "選択結果を選ぶと、ページが全面的に更新されます。",
     "link_messages": {
       "new_window": "新しいウィンドウで開きます。",
-      "external": "外部のウェブサイトを開きます。"
+      "external": "外部のウェブサイトを開きます。",
+      "modal_window": "ダイアログのポップアップ"
     },
     "loading": "読み込み中…",
     "skip_to_product_info": "商品情報にスキップ",

locales/ko.json

@@ -68,7 +68,8 @@
     "refresh_page": "선택을 누르면 전체 페이지가 새로 고쳐집니다.",
     "link_messages": {
       "new_window": "새 창에서 열립니다.",
-      "external": "외부 웹사이트를 엽니다."
+      "external": "외부 웹사이트를 엽니다.",
+      "modal_window": "대화 상자 팝업"
     },
     "loading": "로드하는 중...",
     "skip_to_product_info": "제품 정보로 건너뛰기",

locales/lt-LT.json

@@ -69,7 +69,8 @@
     "loading": "Įkeliama...",
     "link_messages": {
       "new_window": "Atsidaro naujame lange.",
-      "external": "Atidaro išorinę svetainę."
+      "external": "Atidaro išorinę svetainę.",
+      "modal_window": "iškylantysis dialogo langas"
     },
     "skip_to_product_info": "Pereiti prie informacijos apie gaminį",
     "total_reviews": "iš viso apžvalgų",

locales/nb.json

@@ -68,7 +68,8 @@
     "refresh_page": "Ved å gjøre et valg vil hele siden lastes inn på nytt.",
     "link_messages": {
       "new_window": "Åpner i et nytt vindu.",
-      "external": "Åpner eksternt nettsted."
+      "external": "Åpner eksternt nettsted.",
+      "modal_window": "popupdialog"
     },
     "loading": "Laster inn …",
     "skip_to_product_info": "Hopp til produktinformasjon",

locales/nl.json

@@ -68,7 +68,8 @@
     "refresh_page": "Een selectie kiezen resulteert in het geheel verversen van de pagina.",
     "link_messages": {
       "new_window": "Opent in een nieuw venster.",
-      "external": "Opent externe website."
+      "external": "Opent externe website.",
+      "modal_window": "pop-up-dialoogvenster"
     },
     "loading": "Bezig met laden...",
     "skip_to_product_info": "Ga direct naar productinformatie",

locales/pl.json

@@ -69,7 +69,8 @@
     "loading": "Ładowanie...",
     "link_messages": {
       "new_window": "Otwiera się w nowym oknie.",
-      "external": "Otwiera zewnętrzną stronę internetową."
+      "external": "Otwiera zewnętrzną stronę internetową.",
+      "modal_window": "wyskakujące okienko dialogowe"
     },
     "skip_to_product_info": "Pomiń, aby przejść do informacji o produkcie",
     "total_reviews": "suma recenzji",

locales/pt-BR.json

@@ -68,7 +68,8 @@
     "refresh_page": "Ao escolher uma seleção, a página inteira é atualizada.",
     "link_messages": {
       "new_window": "Abre em uma nova janela.",
-      "external": "Abre um site externo."
+      "external": "Abre um site externo.",
+      "modal_window": "pop-up da caixa de diálogo"
     },
     "loading": "Carregando...",
     "skip_to_product_info": "Pular para as informações do produto",

locales/pt-PT.json

@@ -68,7 +68,8 @@
     "refresh_page": "Escolher uma seleção resulta numa atualização de página completa.",
     "link_messages": {
       "new_window": "Abre numa nova janela.",
-      "external": "Abre website externo."
+      "external": "Abre website externo.",
+      "modal_window": "pop-up da caixa de diálogo"
     },
     "loading": "A carregar...",
     "skip_to_product_info": "Saltar para a informação do produto",

locales/ro-RO.json

@@ -69,7 +69,8 @@
     "loading": "Se încarcă...",
     "link_messages": {
       "new_window": "Se deschide într-o fereastră nouă.",
-      "external": "Deschide site-ul extern."
+      "external": "Deschide site-ul extern.",
+      "modal_window": "fereastră popup pentru dialog"
     },
     "skip_to_product_info": "Salt la informațiile despre produs",
     "total_reviews": "total recenzii",

locales/ru.json

@@ -69,7 +69,8 @@
     "loading": "Загрузка…",
     "link_messages": {
       "new_window": "Открывается в новом окне.",
-      "external": "Открывает внешний сайт."
+      "external": "Открывает внешний сайт.",
+      "modal_window": "всплывающее окно разговора"
     },
     "skip_to_product_info": "Перейти к информации о продукте",
     "total_reviews": "всего отзывов",

locales/sk-SK.json

@@ -69,7 +69,8 @@
     "loading": "Načítava sa...",
     "link_messages": {
       "new_window": "Otvorí sa v novom okne.",
-      "external": "Otvorí externú webovú lokalitu."
+      "external": "Otvorí externú webovú lokalitu.",
+      "modal_window": "rozbaľovacie dialógové okno"
     },
     "skip_to_product_info": "Prejsť na informácie o produkte",
     "total_reviews": "celkový počet recenzií",

locales/sl-SI.json

@@ -69,7 +69,8 @@
     "loading": "Nalaganje ...",
     "link_messages": {
       "new_window": "Odpre se v novem oknu.",
-      "external": "Odpre zunanje spletno mesto."
+      "external": "Odpre zunanje spletno mesto.",
+      "modal_window": "pojavno pogovorno okno"
     },
     "skip_to_product_info": "Preskoči na informacije o izdelku",
     "total_reviews": "skupno število pregledov",

locales/sv.json

@@ -68,7 +68,8 @@
     "refresh_page": "När du gör ett urval uppdateras sidan.",
     "link_messages": {
       "new_window": "Öppnas i ett nytt fönster.",
-      "external": "Öppnar extern webbplats."
+      "external": "Öppnar extern webbplats.",
+      "modal_window": "dialog-popup"
     },
     "loading": "Laddar ...",
     "skip_to_product_info": "Gå vidare till produktinformation",

locales/th.json

@@ -68,7 +68,8 @@
     "refresh_page": "การเลือกตัวเลือกจะส่งผลให้มีการรีเฟรชทั้งหน้า",
     "link_messages": {
       "new_window": "เปิดในหน้าต่างใหม่",
-      "external": "เปิดเว็บไซต์ภายนอก"
+      "external": "เปิดเว็บไซต์ภายนอก",
+      "modal_window": "ป๊อปอัพกล่องโต้ตอบ"
     },
     "loading": "กำลังโหลด...",
     "skip_to_product_info": "ข้ามไปยังข้อมูลสินค้า",

locales/tr.json

@@ -68,7 +68,8 @@
     "refresh_page": "Bir seçim yapmanız sayfanın tamamının yenilenmesine neden olur.",
     "link_messages": {
       "new_window": "Yeni bir pencerede açılır.",
-      "external": "Harici web sitesini açar."
+      "external": "Harici web sitesini açar.",
+      "modal_window": "iletişim kutusu açılır penceresi"
     },
     "loading": "Yükleniyor...",
     "skip_to_product_info": "Ürün bilgisine atla",

locales/vi.json

@@ -68,7 +68,8 @@
     "refresh_page": "Khi bạn chọn một mục, toàn bộ trang sẽ được làm mới.",
     "link_messages": {
       "new_window": "Mở trong cửa sổ mới.",
-      "external": "Mở trang web bên ngoài."
+      "external": "Mở trang web bên ngoài.",
+      "modal_window": "cửa sổ bật lên của hộp thoại"
     },
     "loading": "Đang tải...",
     "skip_to_product_info": "Chuyển đến thông tin sản phẩm",

locales/zh-CN.json

@@ -68,7 +68,8 @@
     "refresh_page": "选择某一选项会使整个页面刷新。",
     "link_messages": {
       "new_window": "在新窗口中打开。",
-      "external": "打开外部网站。"
+      "external": "打开外部网站。",
+      "modal_window": "对话框弹出窗口"
     },
     "loading": "正在加载…",
     "skip_to_product_info": "跳至产品信息",

locales/zh-TW.json

@@ -68,7 +68,8 @@
     "refresh_page": "選擇項目後，整個頁面將重新整理。",
     "link_messages": {
       "new_window": "在新視窗中開啟。",
-      "external": "開啟外部網站。"
+      "external": "開啟外部網站。",
+      "modal_window": "彈出式對話視窗"
     },
     "loading": "載入中......",
     "skip_to_product_info": "略過產品資訊",

sections/collage.liquid

@@ -95,7 +95,7 @@
                 </noscript>
                 <modal-opener class="no-js-hidden" data-modal="#PopupModal-{{ block.id }}">
                   <div class="deferred-media">
-                    <button class="deferred-media__poster full-unstyled-link{% if block.settings.image_padding %} collage-card-spacing{% endif %}" type="button" aria-haspopup="dialog" data-media-id="{{ block.settings.video_url.id }}">
+                    <button class="deferred-media__poster full-unstyled-link{% if block.settings.image_padding %} collage-card-spacing{% endif %}" type="button" aria-describedby="a11y-modal-window-message" data-media-id="{{ block.settings.video_url.id }}">
                       <div class="media media--transparent ratio"{% if block.settings.cover_image != blank %} style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"{% else %} style="--ratio-percent: 100%"{% endif %}>
                         <span class="deferred-media__poster-button motion-reduce">
                           {%- render 'icon-play' -%}

sections/header.liquid

@@ -297,7 +297,7 @@
     {%- if section.settings.logo_position == 'top-center' or section.settings.menu == blank -%}
       <details-modal class="header__search">
         <details>
-          <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="{{ 'general.search.search' | t }}">
+          <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-label="{{ 'general.search.search' | t }}">
             <span>
               <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false" role="presentation">
                 <use href="#icon-search">
@@ -493,7 +493,7 @@
     <div class="header__icons">
       <details-modal class="header__search">
         <details>
-          <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="{{ 'general.search.search' | t }}">
+          <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-label="{{ 'general.search.search' | t }}">
             <span>
               <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false" role="presentation">
                 <use href="#icon-search">