Allow Lighthouse scan to reach 100% Accessibility on Homepage

app/code/Magento/Theme/view/frontend/templates/html/sections.phtml

@@ -1,20 +1,21 @@
 <?php
 /**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
+ * Copyright 2014 Adobe
+ * All Rights Reserved.
  */
 
 /**
  *  General template for displaying group of blocks divided into sections
  */
+/** @var \Magento\Framework\Escaper $escaper */
 
 $group = $block->getGroupName();
 $groupCss = $block->getGroupCss();
 ?>
 <?php if ($detailedInfoGroup = $block->getGroupChildNames($group)):?>
-    <div class="sections <?= $block->escapeHtmlAttr($groupCss) ?>">
+    <div class="sections <?= $escaper->escapeHtmlAttr($groupCss) ?>">
         <?php $layout = $block->getLayout(); ?>
-        <div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items"
+        <div class="section-items <?= $escaper->escapeHtmlAttr($groupCss) ?>-items"
              data-mage-init='{"tabs":{"openedState":"active"}}'>
             <?php foreach ($detailedInfoGroup as $name):?>
                 <?php
@@ -25,16 +26,16 @@ $groupCss = $block->getGroupCss();
                     $alias = $layout->getElementAlias($name);
                     $label = $block->getChildData($alias, 'title');
                 ?>
-                <div class="section-item-title <?= $block->escapeHtmlAttr($groupCss) ?>-item-title"
+                <div class="section-item-title <?= $escaper->escapeHtmlAttr($groupCss) ?>-item-title"
                      data-role="collapsible">
-                    <a class="<?= $block->escapeHtmlAttr($groupCss) ?>-item-switch"
-                       data-toggle="switch" href="#<?= $block->escapeHtmlAttr($alias) ?>">
+                    <a class="<?= $escaper->escapeHtmlAttr($groupCss) ?>-item-switch"
+                       data-toggle="switch" href="#<?= $escaper->escapeHtmlAttr($alias) ?>">
                         <?= /* @noEscape */ $label ?>
                     </a>
                 </div>
-                <div class="section-item-content <?= $block->escapeHtmlAttr($groupCss) ?>-item-content"
-                     id="<?= $block->escapeHtmlAttr($alias) ?>"
-                     data-role="content">
+                <div class="section-item-content <?= $escaper->escapeHtmlAttr($groupCss) ?>-item-content"
+                     id="<?= $escaper->escapeHtmlAttr($alias) ?>"
+                     role="tab">
                     <?= /* @noEscape */ $html ?>
                 </div>
             <?php endforeach;?>

app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_module.less

@@ -1,6 +1,6 @@
 // /**
-//  * Copyright © Magento, Inc. All rights reserved.
-//  * See COPYING.txt for license details.
+//  * Copyright 2017 Adobe
+//  * All Rights Reserved.
 //  */
 
 //
@@ -34,7 +34,7 @@
 
 //  Size and Manufacturer attributes
 @attr-swatch-option__background: @swatch-option__background;
-@attr-swatch-option__color: #949494;
+@attr-swatch-option__color: #474747;
 
 @attr-swatch-option__selected__background: @color-white;
 @attr-swatch-option__selected__border: @border-width__base solid @color-white;
@@ -47,7 +47,7 @@
 //  Tooltip
 @swatch-option-tooltip__background: @color-white;
 @swatch-option-tooltip__border: @swatch-option__border;
-@swatch-option-tooltip__color: #949494;
+@swatch-option-tooltip__color: #474747;
 
 @swatch-option-tooltip-title__color: #282828;
 
@@ -184,7 +184,7 @@
                 pointer-events: none;
 
                 &:after {
-                    //  ToDo: improve .lib-background-gradient() to support diagonal gradient
+                    //  ToDo: improve .lib-background-gradient() to support diagonal gradient;
                     background: linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
                     background: -moz-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
                     background: -ms-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);