Fix a11y issues

Author: jissereitsma

Component/Form/FormRepository.php

@@ -16,6 +16,10 @@
 use Loki\AdminComponents\ProviderHandler\ProviderHandlerListing;
 use Loki\Components\Component\ComponentRepository;
 
+/**
+ * @method FormViewModel getViewModel()
+ * @method FormContext getContext()
+ */
 class FormRepository extends ComponentRepository
 {
     public function __construct(

Component/Form/FormViewModel.php

@@ -19,6 +19,7 @@
 
 /**
  * @method FormRepository getRepository()
+ * @method FormContext getContext()
  */
 class FormViewModel extends ComponentViewModel
 {

Form/Field/Field.php

@@ -23,6 +23,12 @@ public function getLabel(): string
         return (string)$this->getData('label');
     }
 
+    public function getDomId(): string
+    {
+        $domId = strtolower($this->getScope().'-'.$this->getCode());
+        return preg_replace('/([^a-z0-9\-]+)/', '-', $domId);
+    }
+
     public function getCode(): string
     {
         return (string)$this->getData('code');

view/adminhtml/templates/form/actions.phtml

@@ -22,8 +22,6 @@ $mainSaveAction = false;
 $otherSaveActions = (array)$block->getOtherSaveActions(); // @todo: Test whether this is working
 ?>
 <div class="page-main-actions">
-    <div class="page-actions-placeholder"></div>
-
     <div class="page-actions">
         <div class="page-actions-inner">
             <div class="page-actions-buttons">

view/adminhtml/templates/form/field.phtml

@@ -46,10 +46,12 @@ if (!empty($depends)) {
 }
 
 $cssClass = implode(' ', $cssClass);
+$fieldId = $field->getDomId();
+
 ?>
 <div class="<?= $escaper->escapeHtml($cssClass) ?>" <?= $escaper->escapeHtml($dependStatement) ?>>
     <div class="admin__field-label">
-        <label for="<?= $escaper->escapeHtml($field->getCode()) ?>">
+        <label for="<?= $escaper->escapeHtml($fieldId) ?>">
             <span><?= $escaper->escapeHtml($field->getLabel()) ?></span>
             <?php if ($field->isRequired()): ?>
                 <span style="display: inline; color:red">*</span>

view/adminhtml/templates/form/field_type/entity_select.phtml

@@ -37,7 +37,7 @@ if (isset($fieldAttributes['type'])) {
 $columns = $entitySelect->getColumns();
 $currentItem = $entitySelect->getCurrentItem();
 $valueCode = $entitySelect->getValueCode();
-
+$fieldId = $field->getDomId();
 // @todo: Modal effect with _show does not animate
 ?>
 <div
@@ -49,6 +49,7 @@ $valueCode = $entitySelect->getValueCode();
 
     <div class="input-with-button">
         <input
+            id="<?= $escaper->escapeHtml($fieldId) ?>"
             class="admin__control-text"
             type="<?= $escaper->escapeHtml($inputType) ?>"
             name="<?= $escaper->escapeHtml($field->getCode()) ?>"

view/adminhtml/templates/form/field_type/entity_select/table.phtml

@@ -102,7 +102,6 @@ $state = $viewModel->getState();
                             :checked="isSelected"
                             @change="toggleSelectedId"
                             data-row-id="<?= $escaper->escapeHtml($item->getId()) ?>">
-                        <label></label>
                     </label>
                 </td>
                 <?php foreach ($viewModel->getVisibleColumns() as $column): ?>

view/adminhtml/templates/form/field_type/from_to.phtml

@@ -21,18 +21,20 @@ $inputType = $field->getInputType();
 if (empty($inputType)) {
     $inputType = 'text';
 }
+
+$fieldId = $field->getDomId();
 ?>
 <div class="">
     <div class="admin__form-field">
         <label
-            for="<?= $escaper->escapeHtml($field->getScope()) ?>.<?= $escaper->escapeHtml($field->getCode()) ?>"
+            for="<?= $escaper->escapeHtml($fieldId) ?>"
             class="admin__form-field-label">
             <span>from</span>
         </label>
 
         <div class="admin__form-field-control">
             <input
-                id="<?= $escaper->escapeHtml($field->getScope()) ?>.<?= $escaper->escapeHtml($field->getCode()) ?>"
+                id="<?= $escaper->escapeHtml($fieldId) ?>"
                 class="admin__control-text"
                 type="<?= $escaper->escapeHtml($inputType) ?>"
                 data-name="<?= $escaper->escapeHtml($field->getCode()) ?>.from"
@@ -49,12 +51,16 @@ if (empty($inputType)) {
     </div>
 
     <div class="admin__form-field">
-        <label class="admin__form-field-label">
+        <label
+            for="<?= $escaper->escapeHtml($fieldId) ?>-to"
+            class="admin__form-field-label"
+        >
             <span>to</span>
         </label>
 
         <div class="admin__form-field-control">
             <input
+                id="<?= $escaper->escapeHtml($fieldId) ?>-to"
                 class="admin__control-text"
                 type="<?= $escaper->escapeHtml($inputType) ?>"
                 data-name="<?= $escaper->escapeHtml($field->getCode()) ?>.to"

view/adminhtml/templates/form/field_type/input.phtml

@@ -22,8 +22,11 @@ if (isset($fieldAttributes['type'])) {
     $inputType = $fieldAttributes['type'];
     unset($fieldAttributes['type']);
 }
+
+$fieldId = $field->getDomId();
 ?>
 <input
+    id="<?= $escaper->escapeHtml($fieldId) ?>"
     class="admin__control-text"
     type="<?= $escaper->escapeHtml($inputType) ?>"
     name="<?= $escaper->escapeHtml($field->getCode()) ?>"

view/adminhtml/templates/form/field_type/select.phtml

@@ -21,8 +21,10 @@ $emptyOption = $field->getEmptyOption();
 $fieldType = $field->getFieldType();
 $options = $fieldType->getOptions();
 $fieldAttributes = $field->getFieldAttributes();
+$fieldId = $field->getDomId();
 ?>
 <select
+    id="<?= $escaper->escapeHtml($fieldId) ?>"
     aria-label="<?= $escaper->escapeHtml($field->getLabel()) ?>"
     class="admin__control-select"
     name="<?= $escaper->escapeHtml($field->getCode()) ?>"