Accessibility improvements: add missing labels for input fields #2970
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,217 @@ | ||||||
| package org.labkey.test.components.ui.entities; | ||||||
|
|
||||||
| import org.apache.commons.lang3.StringUtils; | ||||||
| import org.labkey.api.util.Pair; | ||||||
| import org.labkey.test.Locator; | ||||||
| import org.labkey.test.components.bootstrap.ModalDialog; | ||||||
| import org.labkey.test.components.html.Checkbox; | ||||||
| import org.labkey.test.components.html.Input; | ||||||
| import org.labkey.test.components.react.FilteringReactSelect; | ||||||
| import org.labkey.test.components.react.ReactDateTimePicker; | ||||||
| import org.labkey.test.components.react.ReactSelect; | ||||||
| import org.labkey.test.components.react.ToggleButton; | ||||||
| import org.labkey.test.components.ui.files.FileAttachmentContainer; | ||||||
| import org.labkey.test.params.FieldKey; | ||||||
| import org.openqa.selenium.WebElement; | ||||||
|
|
||||||
| import java.util.HashMap; | ||||||
| import java.util.Map; | ||||||
|
|
||||||
| import static org.labkey.test.WebDriverWrapper.WAIT_FOR_JAVASCRIPT; | ||||||
|
|
||||||
| /** | ||||||
| * Abstract base for {@link EntityBulkInsertDialog} and {@link EntityBulkUpdateDialog}. | ||||||
| */ | ||||||
| public abstract class EntityBulkDialog extends ModalDialog | ||||||
| { | ||||||
| protected int _changeCounter = 0; | ||||||
|
|
||||||
| protected EntityBulkDialog(ModalDialogFinder finder) | ||||||
| { | ||||||
| super(finder); | ||||||
| } | ||||||
|
|
||||||
| /** | ||||||
| * @param fieldIdentifier Identifier for the field; name ({@link String}) or fieldKey ({@link FieldKey}) | ||||||
| * @return current value of the specified field | ||||||
| */ | ||||||
| public String getTextArea(CharSequence fieldIdentifier) | ||||||
| { | ||||||
| return elementCache().textArea(fieldIdentifier).get(); | ||||||
| } | ||||||
|
|
||||||
| /** | ||||||
| * @param fieldIdentifier Identifier for the field; name ({@link String}) or fieldKey ({@link FieldKey}) | ||||||
| * @return current value of the specified field | ||||||
| */ | ||||||
| public String getNumericField(CharSequence fieldIdentifier) | ||||||
| { | ||||||
| return elementCache().textInput(fieldIdentifier).get(); | ||||||
| } | ||||||
|
|
||||||
| /** | ||||||
| * @param fieldIdentifier Identifier for the field; name ({@link String}) or fieldKey ({@link FieldKey}) | ||||||
| * @return current value of the specified field | ||||||
| */ | ||||||
| public boolean getBooleanField(CharSequence fieldIdentifier) | ||||||
| { | ||||||
| return elementCache().checkBox(fieldIdentifier).get(); | ||||||
| } | ||||||
|
|
||||||
| public String getFieldValue(WebElement input) | ||||||
| { | ||||||
| String value = input.getText(); | ||||||
| if (StringUtils.isEmpty(value)) | ||||||
| value = input.getAttribute("value"); | ||||||
| if (StringUtils.isEmpty(value)) | ||||||
| value = input.getAttribute("placeholder"); | ||||||
| if (StringUtils.isEmpty(value) && "checkbox".equals(input.getAttribute("type"))) | ||||||
| value = input.getAttribute("title"); | ||||||
| return value; | ||||||
| } | ||||||
|
|
||||||
| protected String getValueForReactSelect(ReactSelect reactSelect) | ||||||
| { | ||||||
| if (!reactSelect.getSelections().isEmpty()) | ||||||
| { | ||||||
| return reactSelect.getSelections().get(0); | ||||||
| } | ||||||
| else | ||||||
| { | ||||||
| return ""; | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| private WebElement getAmountUnitsRow() | ||||||
| { | ||||||
| String fieldLabel = "Amount and Units"; | ||||||
| return elementCache().formRowByControlLabel(fieldLabel); | ||||||
| } | ||||||
|
|
||||||
| public Pair<String, String> getAmountUnit() | ||||||
| { | ||||||
| String amountVal = getFieldValue(getAmountInput()); | ||||||
| String unitVal = Locator.tagWithClass("div", "select-input__value-container").withoutAttribute("type", "hidden").findElement(getAmountUnitsRow()).getText(); | ||||||
| return new Pair<>(amountVal, unitVal); | ||||||
| } | ||||||
|
|
||||||
| public Pair<String, String> getAmountUnitValue() | ||||||
|
Contributor
Author
There was a problem hiding this comment.
|
||||||
| { | ||||||
| enableAmountUnit(); | ||||||
| String amountVal = getWrapper().getFormElement(getAmountInput()); | ||||||
| String unitVal = getValueForReactSelect(getAmountUnitSelect()); | ||||||
| return new Pair<>(amountVal, unitVal); | ||||||
| } | ||||||
|
|
||||||
| public void enableAmountUnit() | ||||||
|
Contributor
Author
There was a problem hiding this comment.
Suggested change
|
||||||
| { | ||||||
| ToggleButton toggle = new ToggleButton.ToggleButtonFinder(getDriver()).findOrNull(getAmountUnitsRow()); | ||||||
| if (toggle != null && !toggle.isOn()) | ||||||
| { | ||||||
| toggle.set(true); | ||||||
| _changeCounter++; | ||||||
|
Contributor
Author
There was a problem hiding this comment. Is |
||||||
| } | ||||||
| } | ||||||
|
|
||||||
| public void disableAmountUnit() | ||||||
|
Contributor
Author
There was a problem hiding this comment.
Suggested change
|
||||||
| { | ||||||
| ToggleButton toggle = new ToggleButton.ToggleButtonFinder(getDriver()).findOrNull(getAmountUnitsRow()); | ||||||
| if(toggle != null && toggle.isOn()) | ||||||
|
Contributor
Author
There was a problem hiding this comment.
Suggested change
|
||||||
| { | ||||||
| toggle.set(false); | ||||||
| _changeCounter--; | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| private WebElement getAmountInput() | ||||||
| { | ||||||
| return elementCache().amountInputLoc.findElement(getAmountUnitsRow()); | ||||||
| } | ||||||
|
|
||||||
| public ReactSelect getAmountUnitSelect() | ||||||
| { | ||||||
| enableAmountUnit(); | ||||||
| return new ReactSelect(getAmountUnitsRow(), getDriver()); | ||||||
| } | ||||||
|
|
||||||
| public void setAmountUnit(String amount, String unit) | ||||||
| { | ||||||
| enableAmountUnit(); | ||||||
|
|
||||||
| if (amount != null) | ||||||
| getWrapper().setFormElement(getAmountInput(), amount); | ||||||
| if (unit != null) | ||||||
| { | ||||||
| ReactSelect reactSelect = getAmountUnitSelect(); | ||||||
| if (!unit.isEmpty()) | ||||||
| reactSelect.select(unit); | ||||||
| else | ||||||
| reactSelect.clearSelection(); | ||||||
| } | ||||||
|
|
||||||
| if (amount != null && unit != null) | ||||||
| _changeCounter++; | ||||||
|
Contributor
Author
There was a problem hiding this comment. Same question here about whether this is one change or two. |
||||||
| } | ||||||
|
|
||||||
| @Override | ||||||
| protected abstract ElementCache newElementCache(); | ||||||
|
|
||||||
| @Override | ||||||
| protected ElementCache elementCache() | ||||||
| { | ||||||
| return (ElementCache) super.elementCache(); | ||||||
| } | ||||||
|
|
||||||
| protected abstract class ElementCache extends ModalDialog.ElementCache | ||||||
| { | ||||||
| protected final Locator textInputLoc = Locator.tagWithAttribute("input", "type", "text"); | ||||||
| protected final Locator checkBoxLoc = Locator.tagWithAttribute("input", "type", "checkbox"); | ||||||
|
Contributor
Author
There was a problem hiding this comment.
Suggested change
|
||||||
| protected final Locator.XPathLocator amountInputLoc = Locator.tag("input").withAttribute("aria-label", "Amount"); | ||||||
|
|
||||||
| protected final Map<String, WebElement> _rows = new HashMap<>(); | ||||||
|
|
||||||
| /** | ||||||
| * Returns the form row div that contains the controls for the given field. | ||||||
| */ | ||||||
| public abstract WebElement formRow(CharSequence fieldIdentifier); | ||||||
|
|
||||||
| // For composite fields (e.g. StoredAmount + Units) that render a <div> label instead of <label for="...">, | ||||||
| private WebElement formRowByControlLabel(String fieldLabel) | ||||||
| { | ||||||
| return _rows.computeIfAbsent(fieldLabel, k -> | ||||||
| Locator.tagWithClass("div", "row") | ||||||
| .withChild(Locator.tagWithClass("div", "control-label").withText(fieldLabel)) | ||||||
| .waitForElement(this, WAIT_FOR_JAVASCRIPT)); | ||||||
| } | ||||||
|
|
||||||
| public FilteringReactSelect selectionField(CharSequence fieldIdentifier) | ||||||
| { | ||||||
| return new FilteringReactSelect(formRow(fieldIdentifier), getDriver()); | ||||||
| } | ||||||
|
|
||||||
| public Checkbox checkBox(CharSequence fieldIdentifier) | ||||||
|
Contributor
Author
There was a problem hiding this comment.
Suggested change
|
||||||
| { | ||||||
| return new Checkbox(checkBoxLoc.findElement(formRow(fieldIdentifier))); | ||||||
| } | ||||||
|
|
||||||
| public Input textInput(CharSequence fieldIdentifier) | ||||||
| { | ||||||
| return new Input(textInputLoc.findElement(formRow(fieldIdentifier)), getDriver()); | ||||||
| } | ||||||
|
|
||||||
| public Input textArea(CharSequence fieldIdentifier) | ||||||
| { | ||||||
| return new Input(Locator.tag("textarea").findElement(formRow(fieldIdentifier)), getDriver()); | ||||||
| } | ||||||
|
|
||||||
| public ReactDateTimePicker dateInput(CharSequence fieldIdentifier) | ||||||
| { | ||||||
| return new ReactDateTimePicker.ReactDateTimeInputFinder(getDriver()).find(formRow(fieldIdentifier)); | ||||||
| } | ||||||
|
|
||||||
| public FileAttachmentContainer fileUploadField(CharSequence fieldIdentifier) | ||||||
| { | ||||||
| return new FileAttachmentContainer(formRow(fieldIdentifier), getDriver()); | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe
getAmountAndUnitsReadOnlyValuesor something to distinguish it fromgetAmountUnitValue.This could also return a record instead of a pair for better readability, but not necessary.