Merge pull request #7248 from magento-gl/gl_pr_accessibility_release244_nov23_2021

sidolov · web-flow · commit 9f43821af62a · 2021-12-02T12:38:14.000-06:00
GL PR for Accessibility Release244 raised on Nov23, 2021
diff --git a/app/code/Magento/Backend/Block/Store/Switcher.php b/app/code/Magento/Backend/Block/Store/Switcher.php
@@ -20,7 +20,7 @@ class Switcher extends \Magento\Backend\Block\Template
     /**
      * URL for store switcher hint
      */
-    const HINT_URL = 'https://docs.magento.com/user-guide/configuration/scope.html';
+    public const HINT_URL = 'https://docs.magento.com/user-guide/configuration/scope.html';
 
     /**
      * Name of website variable
@@ -68,22 +68,16 @@ class Switcher extends \Magento\Backend\Block\Template
     protected $_template = 'Magento_Backend::store/switcher.phtml';
 
     /**
-     * Website factory
-     *
      * @var \Magento\Store\Model\WebsiteFactory
      */
     protected $_websiteFactory;
 
     /**
-     * Store Group Factory
-     *
      * @var \Magento\Store\Model\GroupFactory
      */
     protected $_storeGroupFactory;
 
     /**
-     * Store Factory
-     *
      * @var \Magento\Store\Model\StoreFactory
      */
     protected $_storeFactory;
@@ -617,9 +611,9 @@ public function getHintHtml()
         $url = $this->getHintUrl();
         if ($url) {
             $html = '<div class="admin__field-tooltip tooltip"><a href="%s" onclick="this.target=\'_blank\'"  title="%s"
-           class="admin__field-tooltip-action action-help"><span>%s</span></a></span></div>';
-            $title =  $this->escapeHtmlAttr(__('What is this?'));
-            $span= $this->escapeHtml(__('What is this?'));
+            class="admin__field-tooltip-action action-help"><span>%s</span></a></div>';
+            $title = $this->escapeHtmlAttr(__('What is this?'));
+            $span = $this->escapeHtml(__('What is this?'));
             $html = sprintf($html, $this->escapeUrl($url), $title, $span);
         }
         return $html;
diff --git a/app/code/Magento/Backend/Block/Widget/Button/SplitButton.php b/app/code/Magento/Backend/Block/Widget/Button/SplitButton.php
@@ -164,8 +164,12 @@ public function getToggleAttributesHtml()
         if ($disabled) {
             $classes[] = $disabled;
         }
-
-        $attributes = ['title' => $title, 'class' => join(' ', $classes), 'disabled' => $disabled];
+        $attributes = [
+            'title' => $title,
+            'class' => join(' ', $classes),
+            'disabled' => $disabled,
+            'aria-label' => (string)$this->getData('dropdown_button_aria_label'),
+        ];
         $this->_getDataAttributes(['mage-init' => '{"dropdown": {}}', 'toggle' => 'dropdown'], $attributes);
 
         $html = $this->_getAttributesString($attributes);
diff --git a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/extended.phtml b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/extended.phtml
@@ -102,8 +102,7 @@ $numColumns = count($block->getColumns());
                             selected="selected"<?php endif; ?>>200
                         </option>
                     </select>
-                    <label for="<?= $block->escapeHtml($block->getHtmlId())
-                    ?><?= $block->escapeHtml($block->getHtmlId()) ?>_page-limit"
+                    <label for="<?= $block->escapeHtml($block->getHtmlId()) ?>_page-limit"
                         class="admin__control-support-text"><?= $block->escapeHtml(__('per page')) ?></label>
 
                     <div class="admin__data-grid-pager">
diff --git a/app/code/Magento/Catalog/Block/Adminhtml/Product.php b/app/code/Magento/Catalog/Block/Adminhtml/Product.php
@@ -59,6 +59,7 @@ protected function _prepareLayout()
             'button_class' => '',
             'class_name' => \Magento\Backend\Block\Widget\Button\SplitButton::class,
             'options' => $this->_getAddProductButtonOptions(),
+            'dropdown_button_aria_label' => __('Add product of type'),
         ];
         $this->buttonList->add('add_new', $addButtonProps);
 
diff --git a/app/code/Magento/Catalog/Ui/Component/Listing/Columns/ProductActions.php b/app/code/Magento/Catalog/Ui/Component/Listing/Columns/ProductActions.php
@@ -58,6 +58,7 @@ public function prepareDataSource(array $dataSource)
                         'catalog/product/edit',
                         ['id' => $item['entity_id'], 'store' => $storeId]
                     ),
+                    'ariaLabel' => __('Edit ') . $item['name'],
                     'label' => __('Edit'),
                     'hidden' => false,
                 ];
diff --git a/app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml b/app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml
@@ -202,6 +202,7 @@
             </argument>
             <settings>
                 <label translate="true">Description</label>
+                <notice translate="true">Note: Keyboard shortcut to activate editor help : Alt + 0 (Windows) or &#x2325;0 (MacOS)</notice>
                 <dataScope>description</dataScope>
             </settings>
             <formElements>
diff --git a/app/code/Magento/Cms/Block/Adminhtml/Block/Edit/SaveButton.php b/app/code/Magento/Cms/Block/Adminhtml/Block/Edit/SaveButton.php
@@ -8,13 +8,11 @@
 use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
 use Magento\Ui\Component\Control\Container;
 
-/**
- * Class SaveButton
- * @package Magento\Customer\Block\Adminhtml\Edit
- */
 class SaveButton extends GenericButton implements ButtonProviderInterface
 {
     /**
+     * Get button data
+     *
      * @return array
      */
     public function getButtonData()
@@ -42,6 +40,7 @@ public function getButtonData()
             ],
             'class_name' => Container::SPLIT_BUTTON,
             'options' => $this->getOptions(),
+            'dropdown_button_aria_label' => __('Save options'),
         ];
     }
 
diff --git a/app/code/Magento/Cms/Block/Adminhtml/Page/Edit/SaveButton.php b/app/code/Magento/Cms/Block/Adminhtml/Page/Edit/SaveButton.php
@@ -8,13 +8,11 @@
 use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
 use Magento\Ui\Component\Control\Container;
 
-/**
- * Class SaveButton
- * @package Magento\Customer\Block\Adminhtml\Edit
- */
 class SaveButton extends GenericButton implements ButtonProviderInterface
 {
     /**
+     * Get button data
+     *
      * @return array
      */
     public function getButtonData()
@@ -40,6 +38,7 @@ public function getButtonData()
             'class_name' => Container::SPLIT_BUTTON,
             'options' => $this->getOptions(),
             'sort_order' => 90,
+            'dropdown_button_aria_label' => __('Save options'),
         ];
     }
 
diff --git a/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_form.xml b/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_form.xml
@@ -114,7 +114,7 @@
                 <dataScope>content_heading</dataScope>
             </settings>
         </field>
-        <field name="content" formElement="wysiwyg">
+        <field name="content" template="ui/form/field" formElement="wysiwyg">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="source" xsi:type="string">page</item>
@@ -125,6 +125,7 @@
                     <class name="admin__field-wide">true</class>
                 </additionalClasses>
                 <label/>
+                <notice translate="true">Note: Keyboard shortcut to activate editor help : Alt + 0 (Windows) or &#x2325;0 (MacOS)</notice>
                 <dataScope>content</dataScope>
             </settings>
             <formElements>
diff --git a/app/code/Magento/ConfigurableProduct/Block/Adminhtml/Product/Edit/Button/Save.php b/app/code/Magento/ConfigurableProduct/Block/Adminhtml/Product/Edit/Button/Save.php
@@ -9,9 +9,6 @@
 use Magento\Catalog\Block\Adminhtml\Product\Edit\Button\Generic;
 use Magento\ConfigurableProduct\Model\Product\Type\Configurable as ConfigurableType;
 
-/**
- * Class Save
- */
 class Save extends Generic
 {
     /**
@@ -43,6 +40,7 @@ public function getButtonData()
             ],
             'class_name' => Container::SPLIT_BUTTON,
             'options' => $this->getOptions(),
+            'dropdown_button_aria_label' => __('Save options'),
         ];
     }
 
diff --git a/app/code/Magento/ConfigurableProduct/Test/Unit/Block/Adminhtml/Product/Edit/Button/SaveTest.php b/app/code/Magento/ConfigurableProduct/Test/Unit/Block/Adminhtml/Product/Edit/Button/SaveTest.php
@@ -63,5 +63,6 @@ public function testGetButtonData()
 
         $this->assertArrayHasKey('data_attribute', $result);
         $this->assertArrayHasKey('options', $result);
+        $this->assertArrayHasKey('dropdown_button_aria_label', $result);
     }
 }
diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/components/price-configurable.js b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/components/price-configurable.js
@@ -51,6 +51,7 @@ define([
          */
         handlePriceValue: function (isConfigurable) {
             this.disabled(!!this.isUseDefault() || isConfigurable);
+            this.required(!!this.isUseDefault() || !isConfigurable);
 
             if (isConfigurable) {
                 this.clear();
diff --git a/app/code/Magento/Ui/Component/Control/SplitButton.php b/app/code/Magento/Ui/Component/Control/SplitButton.php
@@ -161,7 +161,12 @@ public function getToggleAttributesHtml()
             $classes[] = $disabled;
         }
 
-        $attributes = ['title' => $title, 'class' => join(' ', $classes), 'disabled' => $disabled];
+        $attributes = [
+            'title' => $title,
+            'class' => join(' ', $classes),
+            'disabled' => $disabled,
+            'aria-label' => (string)$this->getData('dropdown_button_aria_label'),
+        ];
         $this->getDataAttributes(['mage-init' => '{"dropdown": {}}', 'toggle' => 'dropdown'], $attributes);
 
         $html = $this->attributesToHtml($attributes);
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html b/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html
@@ -5,7 +5,9 @@
  */
 -->
 <div class="admin__field-tooltip">
-    <a class="admin__field-tooltip-action action-help" target="_blank" tabindex="1" attr="href: tooltip.link"></a>
+    <a class="admin__field-tooltip-action action-help" target="_blank" tabindex="1" attr="href: tooltip.link">
+        <span translate="'What is this?'"></span>
+    </a>
     <!-- ko with: {descriptionUnsanitizedHtml: tooltip.description} -->
         <div class="admin__field-tooltip-content" html="descriptionUnsanitizedHtml"></div>
     <!-- /ko -->
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/select.html b/app/code/Magento/Ui/view/base/web/templates/form/element/select.html
@@ -9,7 +9,8 @@
         name: inputName,
         id: uid,
         disabled: disabled,
-        'aria-describedby': noticeId
+        'aria-describedby': noticeId,
+        'aria-label': noticeId
     },
     hasFocus: focused,
     optgroup: options,
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/fieldset.html b/app/code/Magento/Ui/view/base/web/templates/form/fieldset.html
@@ -23,14 +23,22 @@
             <span translate="label"></span>
             <span class="admin__page-nav-item-messages" if="collapsible">
                 <span class="admin__page-nav-item-message _changed">
-                    <span class="admin__page-nav-item-message-icon"></span>
-                    <span class="admin__page-nav-item-message-tooltip"
+                    <span class="admin__page-nav-item-message-icon"
+                          role="tooltip"
+                          tabindex="0"
+                          aria-labelledby="changed-message-tooltip">
+                    </span>
+                    <span class="admin__page-nav-item-message-tooltip" id="changed-message-tooltip"
                           data-bind="i18n: 'Changes have been made to this section that have not been saved.'">
                     </span>
                 </span>
                 <span class="admin__page-nav-item-message _error">
-                    <span class="admin__page-nav-item-message-icon"></span>
-                    <span class="admin__page-nav-item-message-tooltip"
+                    <span class="admin__page-nav-item-message-icon"
+                          role="tooltip"
+                          tabindex="0"
+                          aria-labelledby="error-message-tooltip">
+                    </span>
+                    <span class="admin__page-nav-item-message-tooltip" id="error-message-tooltip"
                           data-bind="i18n: 'This tab contains invalid data. Please resolve this before saving.'">
                     </span>
                 </span>
diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/cells/actions.html b/app/code/Magento/Ui/view/base/web/templates/grid/cells/actions.html
@@ -10,7 +10,7 @@
     repeat="foreach: $col.getVisibleActions($row()._rowIndex), item: '$action'"
     click="$col.getActionHandler($action())"
     text="$action().label"
-    attr="target: $col.getTarget($action()), href: $action().href"></a>
+    attr="target: $col.getTarget($action()), href: $action().href, 'aria-label': $action().ariaLabel"></a>
 
 <div class="action-select-wrap" if="$col.isMultiple($row()._rowIndex)" collapsible>
     <button class="action-select" translate="'Select'" toggleCollapsible></button>
diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/controls/bookmarks/bookmarks.html b/app/code/Magento/Ui/view/base/web/templates/grid/controls/bookmarks/bookmarks.html
@@ -21,7 +21,6 @@
                 <input class="admin__control-text" type="text"
                     data-bind="
                         value: customLabel,
-                        autoselect,
                         hasFocus: isCustomVisible(),
                         keyboard: {
                             13: applyCustom.bind($data),
diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/controls/bookmarks/view.html b/app/code/Magento/Ui/view/base/web/templates/grid/controls/bookmarks/view.html
@@ -10,7 +10,6 @@
         data-bind="
             value: $view.value,
             hasFocus: $parent.isEditing($view.index),
-            autoselect,
             attr: {
                 placeholder: $view.label
             },
diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/paging/sizes.html b/app/code/Magento/Ui/view/base/web/templates/grid/paging/sizes.html
@@ -7,10 +7,14 @@
 
 <div class="selectmenu" collapsible="">
     <div class="selectmenu-value" openCollapsible="">
-        <input type="text" ko-value="_value" attr="id: index" autoselect/>
+        <input type="text" ko-value="_value" attr="id: index" autoselect aria-labelledby="per-page-text"/>
     </div>
-    <button class="selectmenu-toggle" type="button" css="_active: $collapsible.opened" toggleCollapsible>
-        <span translate="'Select'"></span>
+    <button class="selectmenu-toggle"
+            type="button"
+            css="_active: $collapsible.opened"
+            toggleCollapsible
+            aria-labelledby="per-page-text select-button-text">
+        <span id="select-button-text" translate="'Select'"></span>
     </button>
     <div class="selectmenu-items" css="_active: $collapsible.opened" outerClick="discardAll.bind($data)">
         <ul>
@@ -58,4 +62,4 @@
         </ul>
     </div>
 </div>
-<label class="admin__control-support-text" translate="'per page'" attr="for: index"></label>
+<label class="admin__control-support-text" translate="'per page'" attr="for: index" id="per-page-text"></label>
diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/search/search.html b/app/code/Magento/Ui/view/base/web/templates/grid/search/search.html
@@ -21,7 +21,7 @@
                     13: apply.bind($data, false),
                     27: cancel
                 }"/>
-    <button class="action-submit" type="button" click="apply.bind($data, false)">
+    <button class="action-submit" type="button" click="apply.bind($data, false)" attr="'aria-label': $t('Search')">
         <span translate="'Search'"></span>
     </button>
 </div>
diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/sticky/filters.html b/app/code/Magento/Ui/view/base/web/templates/grid/sticky/filters.html
@@ -14,7 +14,8 @@
                     window.scrollTo(0, 0);
                     $data.trigger('open');
                  },
-                 attr: {disabled: !hasVisible()}">
+                 attr: {disabled: !hasVisible()}"
+                 aria-label="product-filters">
             <span data-bind="i18n: 'Filters'"></span>
         </button>
         <span class="filters-active" data-bind="text: countActive() || ''"></span> <!-- Added the amount of selected filters -->
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/components/_media-gallery.less b/app/design/adminhtml/Magento/backend/web/css/source/components/_media-gallery.less
@@ -23,7 +23,7 @@
 @image-gallery-placeholder__height: 150px;
 @image-gallery-placeholder__width: @image-gallery-placeholder__height;
 
-@image-gallery-icons__color: @color-gray62;
+@image-gallery-icons__color: @color-gray34;
 @image-gallery-icons__hover__color: @color-gray52;
 
 @image-gallery-action__z-index: @image-gallery-image-hidden__z-index + 1;
@@ -106,7 +106,8 @@
         }
 
         .fileinput-button,
-        .image-browse { // TODO UI: remove after check on configurable product
+        .image-browse {
+            //  TODO UI: remove after check on configurable product;
             bottom: 0;
             left: 0;
             position: absolute;
@@ -204,6 +205,9 @@
         width: 20px;
         z-index: @image-gallery-action__z-index;
 
+        /**
+        * @codingStandardsIgnoreStart
+        */
         .lib-icon-font(
             @icon-delete__content,
             @_icon-font: @icons-admin__font-name,
@@ -213,6 +217,7 @@
             @_icon-font-text-hide: true,
             @_icon-font-display: block
         );
+        //@codingStandardsIgnoreEnd
     }
 
     .draggable-handle {
diff --git a/dev/tests/integration/testsuite/Magento/Backend/Block/Widget/Button/SplitButtonTest.php b/dev/tests/integration/testsuite/Magento/Backend/Block/Widget/Button/SplitButtonTest.php
@@ -74,7 +74,8 @@ public function testToHtml(): void
                         'onclick' => $onclick = 'console.log("option")',
                         'style' => 'width: 100px'
                     ]
-                ]
+                ],
+                'dropdown_button_aria_label' => 'Split button options',
             ]
         );
 
@@ -83,8 +84,12 @@ public function testToHtml(): void
         $this->assertStringContainsString('<span>A button</span>', $html);
         $this->assertStringNotContainsString('onclick=', $html);
         $this->assertStringNotContainsString('style=', $html);
-        $this->assertMatchesRegularExpression('/\<script.*?\>.*?' . preg_quote($onclick) . '.*?\<\/script\>/ims', $html);
+        $this->assertMatchesRegularExpression(
+            '/\<script.*?\>.*?' . preg_quote($onclick) . '.*?\<\/script\>/ims',
+            $html
+        );
         $this->assertStringContainsString('width', $html);
         $this->assertStringContainsString('100px', $html);
+        $this->assertStringContainsString('aria-label="Split button options"', $html);
     }
 }
diff --git a/dev/tests/integration/testsuite/Magento/Ui/Component/Control/SplitButtonTest.php b/dev/tests/integration/testsuite/Magento/Ui/Component/Control/SplitButtonTest.php
