apply wcag rules to generated form components

Evolveum · Dec 11, 2023 · 467017c · 467017c
1 parent 3049bc5
commit 467017c
Show file tree

Hide file tree

Showing 27 changed files with 175 additions and 48 deletions.
diff --git a/.../java/com/evolveum/midpoint/gui/api/component/autocomplete/AbstractAutoCompletePanel.html b/.../java/com/evolveum/midpoint/gui/api/component/autocomplete/AbstractAutoCompletePanel.html
@@ -10,7 +10,7 @@
 <wicket:panel>
     <div class="autocomplete-parent" style="height:30px; position: relative;">
         <input wicket:id="input" class="form-control form-control-sm w-100" type="text"/>
-        <a class="icon" wicket:id="iconButton">
+        <a class="icon" wicket:id="iconButton" aria-hidden="true" tabindex="-1">
             <i class="fa fa-chevron-down"/>
         </a>
     </div>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/page/PageBase.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/page/PageBase.html
@@ -15,7 +15,7 @@
             <div class="navbar-nav">
                 <a tabindex="-1" wicket:id="menuToggle" class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
             </div>
-            <div class="ml-2 navbar-title" wicket:id="pageTitleContainer">
+            <div class="ml-2 navbar-title" wicket:id="pageTitleContainer" role="heading" aria-level="1">
                         <span class="page-title" wicket:id="pageTitle">
                             <span wicket:id="deploymentName"/>
                             <span wicket:id="pageTitleReal"/>

diff --git a/...ui/src/main/java/com/evolveum/midpoint/gui/impl/page/admin/AbstractPageObjectDetails.html b/...ui/src/main/java/com/evolveum/midpoint/gui/impl/page/admin/AbstractPageObjectDetails.html
@@ -22,7 +22,7 @@
                     <wicket:enclosure child="navigation">
                         <div class="details-panel-navigation p-2" wicket:id="navigation"/>
                     </wicket:enclosure>
-                    <div class="details-panel-details-form" wicket:id="mainPanel"/>
+                    <div class="details-panel-details-form" wicket:id="mainPanel" wicket:message="aria-label:AbstractPageObjectDetails.detailsPanel" tabindex="0"/>
                 </div>
             </form>
         </div>

diff --git a/...gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/ExpressionPropertyPanel.java b/...gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/ExpressionPropertyPanel.java
@@ -49,7 +49,7 @@ public ExpressionPropertyPanel(String id, IModel<PrismPropertyWrapper<Expression
     }
 
     @Override
-    protected Component createHeaderPanel() {
+    protected ItemHeaderPanel createHeaderPanel() {
         ExpressionWrapper expressionWrapper = (ExpressionWrapper) getModelObject();
         if (expressionWrapper != null && (expressionWrapper.isAssociationExpression() || expressionWrapper.isAttributeExpression())) {
             return new ExpressionPropertyHeaderPanel(ID_HEADER, getModel()) {

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/ItemHeaderPanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/ItemHeaderPanel.html
@@ -28,11 +28,11 @@
 
         <wicket:child/>
 
-        <button wicket:id="add" wicket:message="title:ItemHeaderPanel.addValue" class="btn btn-tool" trigger="hover">
+        <button wicket:id="add" class="btn btn-tool" trigger="hover">
             <i class="fa fa-plus-circle"></i>
         </button>
 
-        <button wicket:id="remove" wicket:message="title:ItemHeaderPanel.removeAll" class="btn btn-tool" trigger="hover">
+        <button wicket:id="remove" class="btn btn-tool" trigger="hover">
             <i class="fa fa-minus-circle"></i>
         </button>
 </wicket:panel>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/ItemHeaderPanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/ItemHeaderPanel.java
@@ -11,6 +11,7 @@
 import org.apache.wicket.Component;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.ajax.markup.html.AjaxLink;
+import org.apache.wicket.behavior.AttributeAppender;
 import org.apache.wicket.markup.html.WebMarkupContainer;
 import org.apache.wicket.markup.html.basic.Label;
 import org.apache.wicket.model.IModel;
@@ -75,13 +76,17 @@ protected void initHeaderLabel() {
     }
 
     private void createTitle() {
-        Component displayName = createTitle(new PropertyModel<>(getModel(), "displayName"));
+        Component displayName = createTitle(createLabelModel());
         displayName.add(new AttributeModifier("style", getDeprecatedCss())); //TODO create deprecated css class?
 
         add(displayName);
 
     }
 
+    public IModel<String> createLabelModel() {
+        return new PropertyModel<>(getModel(), "displayName");
+    }
+
     protected abstract Component createTitle(IModel<String> model);
 
     private void createHelpText() {
@@ -170,6 +175,7 @@ public boolean isVisible() {
                 return isAddButtonVisible();
             }
         });
+        addButton.add(AttributeAppender.append("title", getTitleForAddButton()));
         add(addButton);
 
         AjaxLink<Void> removeButton = new AjaxLink<>(ID_REMOVE_BUTTON) {
@@ -181,9 +187,18 @@ public void onClick(AjaxRequestTarget target) {
             }
         };
         removeButton.add(new VisibleBehaviour(this::isButtonEnabled));
+        removeButton.add(AttributeAppender.append("title", getTitleForRemoveAllButton()));
         add(removeButton);
     }
 
+    protected IModel<String> getTitleForRemoveAllButton() {
+        return getPageBase().createStringResource("ItemHeaderPanel.removeAll");
+    }
+
+    protected IModel<String> getTitleForAddButton() {
+        return getPageBase().createStringResource("ItemHeaderPanel.addValue");
+    }
+
     private void addValue(AjaxRequestTarget target) {
         IW parentWrapper = getModelObject();
         try {
@@ -219,4 +234,7 @@ protected boolean isButtonEnabled() {
         return getModelObject() != null && !getModelObject().isReadOnly() && getModelObject().isMultiValue();
     }
 
+    public Component getLabelComponent() {
+        return get(ID_LABEL);
+    }
 }
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/ItemPanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/ItemPanel.java
@@ -44,7 +44,7 @@ public abstract class ItemPanel<VW extends PrismValueWrapper<?>, IW extends Item
 
     private static final String DOT_CLASS = ItemPanel.class.getName() + "";
 
-    private static final String ID_VALUES_CONTAINER = "valuesContainer";
+    protected static final String ID_VALUES_CONTAINER = "valuesContainer";
     private static final String ID_VALUES = "values";
 
     private ItemPanelSettings itemPanelSettings;
@@ -85,7 +85,7 @@ protected boolean getHeaderVisibility() {
         return getParent().findParent(AbstractItemWrapperColumnPanel.class) == null;
     }
 
-    protected abstract Component createHeaderPanel();
+    protected abstract ItemHeaderPanel createHeaderPanel();
 
     protected Component createValuesPanel() {
 

diff --git a/...i/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerHeaderPanel.html b/...i/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerHeaderPanel.html
@@ -12,22 +12,22 @@
         <button wicket:id="expandCollapseButton" wicket:message="title:PrismObjectPanel.expandCollapseContainer"
                 class="btn btn-tool expand-collapse-button" trigger="hover">
         </button>
-        <a class="prism-title" wicket:id="label"/>
+        <a class="prism-title" wicket:id="label" wicket:message="aria-description:PrismObjectPanel.labelDescription"/>
         <span wicket:id="required" class="text-danger" style="font-weight: bold;" wicket:message="title:prismPropertyPanel.required">*</span>
         <wicket:enclosure child="help">
-            <button class="btn btn-tool">
+            <span class="btn btn-tool" wicket:message="title:PrismObjectPanel.help" tabindex="0">
                 <i wicket:id="help"/>
-            </button>
+            </span>
         </wicket:enclosure>
         <wicket:enclosure child="deprecated">
-            <button class="btn btn-tool">
+            <span class="btn btn-tool" tabindex="0" wicket:message="title:PrismObjectPanel.deprecated">
                 <i wicket:id="deprecated"/>
-            </button>
+            </span>
         </wicket:enclosure>
         <wicket:enclosure child="experimental">
-            <button class="btn btn-tool">
+            <span class="btn btn-tool" tabindex="0" wicket:message="title:PrismObjectPanel.experimental">
                 <i wicket:id="experimental"/>
-            </button>
+            </span>
         </wicket:enclosure>
 
         <button wicket:id="add" wicket:message="title:ItemHeaderPanel.addValue" class="btn btn-tool" trigger="hover">

diff --git a/...i/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerHeaderPanel.java b/...i/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerHeaderPanel.java
@@ -104,4 +104,14 @@ protected boolean isAddButtonVisible() {
     protected boolean isHelpTextVisible() {
         return super.isHelpTextVisible() && getModelObject().isExpanded();
     }
+
+    @Override
+    protected IModel<String> getTitleForAddButton() {
+        return getPageBase().createStringResource("PrismContainerHeaderPanel.addButtonTitle", createLabelModel().getObject());
+    }
+
+    @Override
+    protected IModel<String> getTitleForRemoveAllButton() {
+        return getPageBase().createStringResource("PrismContainerHeaderPanel.removeAllButtonTitle", createLabelModel().getObject());
+    }
 }
diff --git a/...min-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerPanel.html b/...min-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerPanel.html
@@ -11,7 +11,7 @@
         <div class="prism-header" wicket:id="header"/>
         <div class="container-wrapper" wicket:id="valuesContainer">
             <wicket:container wicket:id="values">
-                <div wicket:id="value"/>
+                <div wicket:id="value" tabindex="0"/>
             </wicket:container>
         </div>
 </wicket:panel>

diff --git a/...min-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerPanel.java b/...min-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerPanel.java
@@ -21,9 +21,8 @@
 
 /**
  * @author katka
- *
  */
-public class PrismContainerPanel<C extends Containerable, PCW extends PrismContainerWrapper<C>> extends ItemPanel<PrismContainerValueWrapper<C>, PCW>{
+public class PrismContainerPanel<C extends Containerable, PCW extends PrismContainerWrapper<C>> extends ItemPanel<PrismContainerValueWrapper<C>, PCW> {
 
     private static final long serialVersionUID = 1L;
 
@@ -37,7 +36,6 @@ public PrismContainerPanel(String id, IModel<PCW> model, ItemPanelSettings setti
     protected void onInitialize() {
         super.onInitialize();
 
-
         add(AttributeModifier.append("class", () -> {
 
             if (getModelObject() != null && getModelObject().isMultiValue()) {
@@ -49,8 +47,31 @@ protected void onInitialize() {
     }
 
     @Override
-    protected Component createHeaderPanel() {
-        return new PrismContainerHeaderPanel<C, PCW>(ID_HEADER, getModel()) {
+    protected Component createValuesPanel() {
+        Component valueContainer = super.createValuesPanel();
+        valueContainer.add(AttributeAppender.append(
+                "aria-label",
+                () -> {
+                    if (getModelObject().isMultiValue()) {
+                        return getPageBase().createStringResource(
+                                "PrismContainerPanel.container", getHeader().createLabelModel().getObject())
+                                .getString();
+                    }
+                    return null;
+                }));
+        valueContainer.add(AttributeAppender.append(
+                "tabindex",
+                () -> getModelObject().isMultiValue() ? "0" : null));
+        return valueContainer;
+    }
+
+    private PrismContainerHeaderPanel getHeader() {
+        return (PrismContainerHeaderPanel)get(ID_HEADER);
+    }
+
+    @Override
+    protected ItemHeaderPanel createHeaderPanel() {
+        PrismContainerHeaderPanel<C, PCW> header = new PrismContainerHeaderPanel(ID_HEADER, getModel()) {
             @Override
             protected void onExpandClick(AjaxRequestTarget target) {
                 PrismContainerWrapper<C> wrapper = PrismContainerPanel.this.getModelObject();
@@ -63,11 +84,18 @@ protected void refreshPanel(AjaxRequestTarget target) {
                 target.add(PrismContainerPanel.this);
             }
         };
+
+        header.add(AttributeAppender.append(
+                "aria-label",
+                () -> getPageBase().createStringResource(
+                        "PrismContainerPanel.header",
+                        getHeader().createLabelModel().getObject())));
+        return header;
     }
 
     @Override
     protected boolean getHeaderVisibility() {
-        if(!super.getHeaderVisibility()) {
+        if (!super.getHeaderVisibility()) {
             return false;
         }
         return getModelObject() != null && getModelObject().isMultiValue();
@@ -85,14 +113,14 @@ protected void remove(PrismContainerValueWrapper<C> valueToRemove, AjaxRequestTa
         };
         panel.add(AttributeAppender.replace("style", getModelObject().isMultiValue() && !getModelObject().isExpanded() ? "display:none" : ""));
         item.add(panel);
+
         return panel;
     }
 
     protected String getCssClassForValueContainer() {
         return "";
     }
 
-
     @SuppressWarnings("unchecked")
     @Override
     protected <PV extends PrismValue> PV createNewValue(PCW itemWrapper) {

diff --git a/...ui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerValuePanel.html b/...ui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerValuePanel.html
@@ -9,13 +9,13 @@
 <html xmlns:wicket="http://wicket.apache.org">
 <wicket:panel>
     <form wicket:id="valueForm">
-        <div class="prism-header mb-3" wicket:id="header">
+        <div class="prism-header mb-3" wicket:id="header" tabindex="0">
             <button wicket:id="expandCollapseButton" wicket:message="title:PrismObjectPanel.expandCollapseContainer" class="btn btn-tool expand-collapse-button" trigger="hover"></button>
-            <a class="prism-title" wicket:id="label"/>
+            <a class="prism-title" wicket:id="label" wicket:message="aria-description:PrismContainerValuePanel.labelDescription"/>
             <wicket:enclosure child="help">
-                <button class="btn btn-tool">
+                <span class="btn btn-tool" wicket:message="title:PrismObjectPanel.help" tabindex="0">
                     <i class="helpTextIcon" wicket:id="help"/>
-                </button>
+                </span>
             </wicket:enclosure>
             <button wicket:id="sortProperties" wicket:message="title:PrismObjectPanel.sortProperties" class="btn btn-tool"></button>
             <button wicket:id="addChildContainer" wicket:message="title:PrismObjectPanel.addChildContainer" class="btn btn-tool" trigger="hover">
@@ -24,7 +24,7 @@
             <button wicket:id="removeButton" wicket:message="title:PrismObjectPanel.deleteContainer" class="btn btn-tool" trigger="hover">
                 <i class="fa fa-minus-circle"></i>
             </button>
-            <a class="btn btn-tool" wicket:id="showMetadata" wicket:message="title:PageBase.button.metadata">
+            <a class="btn btn-tool" wicket:id="showMetadata">
                 <i class="fa fa-tag"></i>
             </a>
         </div>

diff --git a/...ui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerValuePanel.java b/...ui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PrismContainerValuePanel.java
@@ -17,6 +17,7 @@
 import org.apache.wicket.Component;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.ajax.markup.html.AjaxLink;
+import org.apache.wicket.behavior.AttributeAppender;
 import org.apache.wicket.markup.html.WebMarkupContainer;
 import org.apache.wicket.markup.html.basic.Label;
 import org.apache.wicket.model.*;
@@ -77,6 +78,20 @@ protected void onInitialize() {
 
         appendClassForAddedOrRemovedItem();
 
+        add(AttributeAppender.append(
+                "aria-label",
+                () -> {
+                    String key = "PrismContainerPanel.container";
+                    if (getModelObject().getDefinition().isMultiValue()) {
+                        key = "PrismContainerValuePanel.container";
+                    }
+                    LoadableDetachableModel<String> labelModel = getLabelModel();
+                    String label = labelModel.getObject();
+                    labelModel.detach();
+                    return getPageBase().createStringResource(
+                                    key, label)
+                            .getString();
+                }));
     }
 
     protected void appendClassForAddedOrRemovedItem(){
@@ -110,6 +125,18 @@ public void onClick(AjaxRequestTarget target) {
 
         initButtons(header);
 
+        header.add(AttributeAppender.append(
+                "aria-label",
+                () -> {
+                    String key = "PrismContainerPanel.header";
+                    if (getModelObject().getDefinition().isMultiValue()) {
+                        key = "PrismContainerValuePanel.header";
+                    }
+                    return getPageBase().createStringResource(
+                                    key, headerLabelModel.getObject())
+                            .getString();
+                }));
+
         //TODO always visible if isObject
     }
 
@@ -151,7 +178,7 @@ protected Label getHelpLabel() {
     }
 
     private ToggleIconButton<String> createSortButton() {
-        ToggleIconButton<String> sortPropertiesButton = new ToggleIconButton<String>(ID_SORT_PROPERTIES,
+        ToggleIconButton<String> sortPropertiesButton = new ToggleIconButton<>(ID_SORT_PROPERTIES,
                 GuiStyleConstants.CLASS_ICON_SORT_ALPHA_ASC, GuiStyleConstants.CLASS_ICON_SORT_AMOUNT_ASC) {
 
             private static final long serialVersionUID = 1L;
@@ -166,6 +193,8 @@ public boolean isOn() {
                 return PrismContainerValuePanel.this.getModelObject().isSorted();
             }
         };
+        sortPropertiesButton.add(AttributeAppender.append(
+                "aria-pressed", () -> PrismContainerValuePanel.this.getModelObject().isSorted()));
         sortPropertiesButton.add(new VisibleBehaviour(this::shouldBeButtonsShown));
         sortPropertiesButton.setOutputMarkupId(true);
         sortPropertiesButton.setOutputMarkupPlaceholderTag(true);
@@ -174,7 +203,7 @@ public boolean isOn() {
 
     private AjaxLink createAddMoreButton() {
 
-         AjaxLink<String> addChildContainerButton = new AjaxLink<String>(ID_ADD_CHILD_CONTAINER, new StringResourceModel("PrismContainerValuePanel.addMore")) {
+         AjaxLink<String> addChildContainerButton = new AjaxLink<>(ID_ADD_CHILD_CONTAINER, new StringResourceModel("PrismContainerValuePanel.addMore")) {
                 private static final long serialVersionUID = 1L;
 
                 @Override
@@ -287,6 +316,8 @@ public boolean isOn() {
                 return PrismContainerValuePanel.this.getModelObject().isExpanded();
             }
         };
+        expandCollapseButton.add(AttributeAppender.append(
+                "aria-pressed", () -> PrismContainerValuePanel.this.getModelObject().isExpanded()));
         expandCollapseButton.setOutputMarkupId(true);
         return expandCollapseButton;
     }