Skip to content

Commit

Permalink
apply wcag rules for polystring editor panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@skublik
skublik committed Dec 19, 2023
1 parent 7eff4d9 commit 58616ee
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 13 deletions.
20 changes: 10 additions & 10 deletions ...n-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PolyStringEditorPanel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,43 +12,43 @@
<div class="col-3" wicket:id="localizedValueLabel" />
<div wicket:id="localizedValueWithButton" class="input-group">
<wicket:container wicket:id="localizedValue"/>
<div class="input-group-append">
<a class="input-group-append" tabindex="0" wicket:id="showHideLanguagesLocalized" wicket:message="title:PolyStringEditorPanel.editTranslation">
<div class="input-group-text">
<i class="fa fa-language" wicket:id="showHideLanguagesLocalized"/>
<i class="fa fa-language"/>
</div>
</div>
</a>
</div>
</div>

<div wicket:id="originValueContainer">
<div class="col-3" wicket:id="originValueLabel" />
<div wicket:id="origValueWithButton" class="input-group">
<wicket:container wicket:id="origValue"/>
<div class="input-group-append">
<a class="input-group-append" tabindex="0" wicket:id="showHideLanguagesOrig" wicket:message="title:PolyStringEditorPanel.editTranslation">
<div class="input-group-text">
<i class="fa fa-language" wicket:id="showHideLanguagesOrig"/>
<i class="fa fa-language"/>
</div>
</div>
</a>
</div>
</div>
<wicket:container wicket:id="fullDataContainer">
<div class="property-stripe">
<div class="row no-gutters prism-property">
<div class="col-3"><wicket:message key="PolyStringEditorPanel.keyLabel"/></div>
<div class="col-3" wicket:id="keyValueLabel"/>
<div class="col-9" wicket:id="keyValue"/>
</div>
</div>
<div class="property-stripe">
<div class="row no-gutters prism-property">
<div class="col-3"><wicket:message key="PolyStringEditorPanel.languagesList"/></div>
<div class="col-3" wicket:id="languagesListLabel"/>
</div>
</div>
<div class="property-stripe" wicket:id="languageEditor">
<div class="row no-gutters prism-property">
<div class="col-3 pr-2" wicket:id="languagesList"/>
<div class="col-8 pr-2" wicket:id="valueToAdd"/>
<div class="col-1">
<a class="btn btn-tool" wicket:id="addLanguageValue"><i class="fa fa-plus-circle"/></a>
<a class="btn btn-tool" wicket:id="addLanguageValue" wicket:message="title:PolyStringEditorPanel.addLanguageValue"><i class="fa fa-plus-circle"/></a>
</div>
</div>
</div>
Expand All @@ -57,7 +57,7 @@
<div class="col-3 pr-2" wicket:id="languageName"/>
<div class="col-8 pr-2" wicket:id="translation"/>
<div class="col-1">
<a class="btn btn-tool" wicket:id="removeLanguageButton"><i class="fa fa-minus-circle"/></a>
<a class="btn btn-tool" wicket:id="removeLanguageButton" wicket:message="title:PolyStringEditorPanel.removeLanguageButton"><i class="fa fa-minus-circle"/></a>
</div>
</div>
</div>
Expand Down
33 changes: 30 additions & 3 deletions ...n-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PolyStringEditorPanel.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ public class PolyStringEditorPanel extends InputPanel {
private static final String ID_ORIG_VALUE_LABEL = "originValueLabel";
private static final String ID_ORIG_VALUE = "origValue";
private static final String ID_ORIG_VALUE_WITH_BUTTON = "origValueWithButton";
private static final String ID_KEY_VALUE_LABEL = "keyValueLabel";
private static final String ID_KEY_VALUE = "keyValue";
private static final String ID_LANGUAGE_LIST_LABEL = "languagesListLabel";
private static final String ID_LANGUAGES_REPEATER = "languagesRepeater";
private static final String ID_LANGUAGE_NAME = "languageName";
private static final String ID_TRANSLATION = "translation";
Expand All @@ -65,6 +67,7 @@ public class PolyStringEditorPanel extends InputPanel {
private static final String ID_VALUE_TO_ADD = "valueToAdd";
private static final String ID_ADD_LANGUAGE_VALUE_BUTTON = "addLanguageValue";
private static final String ID_REMOVE_LANGUAGE_BUTTON = "removeLanguageButton";
private static final String ID_INPUT = "input";

private final StringBuilder currentlySelectedLang = new StringBuilder();
private final IModel<PolyString> model;
Expand All @@ -85,6 +88,21 @@ public PolyStringEditorPanel(String id, IModel<PolyString> model,
protected void onInitialize() {
super.onInitialize();
initLayout();
addLabelledBy();
}

private void addLabelledBy() {
get(createComponentPath(ID_LOCALIZED_VALUE_CONTAINER, ID_LOCALIZED_VALUE_WITH_BUTTON, ID_LOCALIZED_VALUE_PANEL, ID_INPUT)).add(AttributeAppender.append(
"aria-labelledby",
get(createComponentPath(ID_LOCALIZED_VALUE_CONTAINER, ID_LOCALIZED_VALUE_LABEL)).getMarkupId()));

get(createComponentPath(ID_ORIGIN_VALUE_CONTAINER, ID_ORIG_VALUE_WITH_BUTTON, ID_ORIG_VALUE, ID_INPUT)).add(AttributeAppender.append(
"aria-labelledby",
get(createComponentPath(ID_ORIGIN_VALUE_CONTAINER, ID_ORIG_VALUE_LABEL)).getMarkupId()));

get(createComponentPath(ID_FULL_DATA_CONTAINER, ID_KEY_VALUE, ID_INPUT)).add(AttributeAppender.append(
"aria-labelledby",
get(createComponentPath(ID_FULL_DATA_CONTAINER, ID_KEY_VALUE_LABEL)).getMarkupId()));
}

private void initLayout() {
Expand All @@ -111,7 +129,8 @@ private void initLayout() {
TextPanel<String> localizedValuePanel = new TextPanel<>(ID_LOCALIZED_VALUE_PANEL, Model.of(localizedValue));
localizedValuePanel.setOutputMarkupId(true);
localizedValuePanel.getBaseFormComponent().add(new EmptyOnBlurAjaxFormUpdatingBehaviour());
localizedValuePanel.add(new EnableBehaviour(() -> false));
// localizedValuePanel.add(new EnableBehaviour(() -> false));
localizedValuePanel.getBaseFormComponent().add(AttributeAppender.append("readonly", "readonly"));
localizedValueWithButton.add(localizedValuePanel);

AjaxButton showHideLanguagesLocalizedButton = new AjaxButton(ID_SHOW_HIDE_LANGUAGES_LOCALIZED) {
Expand All @@ -124,7 +143,6 @@ public void onClick(AjaxRequestTarget target) {
}
};
showHideLanguagesLocalizedButton.setOutputMarkupId(true);
// showHideLanguagesLocalizedButton.add(AttributeAppender.append("style", "cursor: pointer;"));
localizedValueWithButton.add(showHideLanguagesLocalizedButton);

WebMarkupContainer originValueContainer = new WebMarkupContainer(ID_ORIGIN_VALUE_CONTAINER);
Expand Down Expand Up @@ -190,7 +208,11 @@ public Iterator<String> getIterator(String input) {
fullDataContainer.add(new VisibleBehaviour(() -> showFullData));
add(fullDataContainer);

TextPanel<String> keyValue = new TextPanel<>(ID_KEY_VALUE, new IModel<String>() {
Label keyValueLabel = new Label(ID_KEY_VALUE_LABEL, createStringResource("PolyStringEditorPanel.keyLabel"));
keyValueLabel.setOutputMarkupId(true);
fullDataContainer.add(keyValueLabel);

TextPanel<String> keyValue = new TextPanel<>(ID_KEY_VALUE, new IModel<>() {
private static final long serialVersionUID = 1L;

@Override
Expand Down Expand Up @@ -218,6 +240,10 @@ public void detach() {
keyValue.setOutputMarkupId(true);
fullDataContainer.add(keyValue);

Label languageListLabel = new Label(ID_LANGUAGE_LIST_LABEL, createStringResource("PolyStringEditorPanel.languagesList"));
languageListLabel.setOutputMarkupId(true);
fullDataContainer.add(languageListLabel);

IModel<String> langChoiceModel = Model.of();
WebMarkupContainer languageEditorContainer = new WebMarkupContainer(ID_LANGUAGE_EDITOR);
languageEditorContainer.setOutputMarkupId(true);
Expand Down Expand Up @@ -344,6 +370,7 @@ public void onClick(AjaxRequestTarget target) {
}
};
showHideLanguagesButton.setOutputMarkupId(true);
showHideLanguagesButton.add(new VisibleBehaviour(() -> !showFullData));
origValueWithButton.add(showHideLanguagesButton);
}

Expand Down
5 changes: 5 additions & 0 deletions gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/prism/InputPanel.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

import com.evolveum.midpoint.web.security.MidPointApplication;

import org.apache.commons.lang3.StringUtils;
import org.apache.wicket.Component;
import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
import org.apache.wicket.behavior.Behavior;
Expand Down Expand Up @@ -79,6 +80,10 @@ public LocalizationService getLocalizationService() {
return WebComponentUtil.getPage(InputPanel.this, PageAdminLTE.class).getLocalizationService();
}

public String createComponentPath(String... components) {
return StringUtils.join(components, ":");
}


// @Override
// protected void onConfigure() {
Expand Down

0 comments on commit 58616ee

Please sign in to comment.