diff --git a/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml b/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml index 991d9a36d18e04c7e8b17744dd3b2d32981fdc18..2f8feb52db5ffc071055bebfb436b449331dbb1c 100644 --- a/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml +++ b/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml @@ -101,7 +101,33 @@ </block> </container> <container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main"> + <block class="Magento\Framework\View\Element\Template" name="skip_gallery_after.target" before="skip_gallery_before.wrapper" template="Magento_Theme::html/skiptarget.phtml"> + <arguments> + <argument name="target_id" xsi:type="string">gallery-prev-area</argument> + </arguments> + </block> + <container name="skip_gallery_before.wrapper" htmlTag="div" htmlClass="action-skip-wrapper"> + <block class="Magento\Framework\View\Element\Template" before="product.info.media.image" name="skip_gallery_before" template="Magento_Theme::html/skip.phtml"> + <arguments> + <argument name="target" xsi:type="string">gallery-next-area</argument> + <argument name="label" translate="true" xsi:type="string">Skip to the end of the images gallery</argument> + </arguments> + </block> + </container> <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="product/view/gallery.phtml"/> + <container name="skip_gallery_after.wrapper" htmlTag="div" htmlClass="action-skip-wrapper"> + <block class="Magento\Framework\View\Element\Template" after="product.info.media.image" name="skip_gallery_after" template="Magento_Theme::html/skip.phtml"> + <arguments> + <argument name="target" xsi:type="string">gallery-prev-area</argument> + <argument name="label" translate="true" xsi:type="string">Skip to the beginning of the images gallery</argument> + </arguments> + </block> + </container> + <block class="Magento\Framework\View\Element\Template" name="skip_gallery_before.target" after="skip_gallery_after.wrapper" template="Magento_Theme::html/skiptarget.phtml"> + <arguments> + <argument name="target_id" xsi:type="string">gallery-next-area</argument> + </arguments> + </block> </container> <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="product.info.media"> <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info"> diff --git a/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/_module.less index 3b8e84da841069ed41c651329f48ef91a0e10133..7fb7985ada12a8f932134c8afeee765a260f6083 100644 --- a/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/_module.less +++ b/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/_module.less @@ -112,6 +112,11 @@ } } + .action-skip-wrapper { + height: 0; + position: relative; + } + // // Global notice // --------------------------------------------- diff --git a/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less index 5581eb7fb05212c4c24967baf6aab30398bd8072..12ef890f4305539539582af433c1b7961a15043a 100644 --- a/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less +++ b/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less @@ -168,6 +168,11 @@ } } + .action-skip-wrapper { + height: 0; + position: relative; + } + // // Global notice // ---------------------------------------------