import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.HTML;
-import com.google.gwt.user.client.ui.Widget;
import com.vaadin.client.communication.StateChangeEvent;
import com.vaadin.client.ui.AbstractFieldConnector;
import com.vaadin.client.ui.AriaHelper;
removeStyleDependentName("hasdescription");
}
+ AriaHelper.handleInputRequired(owner.getWidget(), showRequired);
+
if (showRequired) {
if (requiredFieldIndicator == null) {
requiredFieldIndicator = DOM.createDiv();
DOM.insertChild(getElement(), requiredFieldIndicator,
getInsertPosition(InsertPosition.REQUIRED));
- Roles.getTextboxRole().setAriaRequiredProperty(
- owner.getWidget().getElement(), true);
-
// Hide the required indicator from assistive device
Roles.getTextboxRole().setAriaHiddenState(
requiredFieldIndicator, true);
// Remove existing
DOM.removeChild(getElement(), requiredFieldIndicator);
requiredFieldIndicator = null;
-
- Roles.getTextboxRole().removeAriaRequiredProperty(
- owner.getWidget().getElement());
}
+ AriaHelper.handleInputInvalid(owner.getWidget(), showError);
+
if (showError) {
if (errorIndicatorElement == null) {
errorIndicatorElement = DOM.createDiv();
DOM.insertChild(getElement(), errorIndicatorElement,
getInsertPosition(InsertPosition.ERROR));
+
+ // Hide error indicator from assistive devices
+ Roles.getTextboxRole().setAriaHiddenState(
+ errorIndicatorElement, true);
}
} else if (errorIndicatorElement != null) {
// Remove existing
* WAI-ARIA specification.
*
* @param widget
- * Element, that should be bound to the caption
- * @param captionElement
- * Element of the caption
+ * Widget, that should be bound to the caption
+ * @param captionElements
+ * Element with of caption to bind
*/
public static void bindCaption(Widget widget, Element captionElement) {
assert widget != null : "Valid Widget required";
}
}
- public static void clearCaption(Widget widget) {
+ /**
+ * Removes a binding to a caption from the provided Widget.
+ *
+ * @param widget
+ * Widget, that was bound to a caption before
+ */
+ private static void clearCaption(Widget widget) {
Roles.getTextboxRole()
.removeAriaLabelledbyProperty(widget.getElement());
}
+ /**
+ * Handles the required actions depending of the input Widget being required
+ * or not.
+ *
+ * @param widget
+ * Widget, typically an input Widget like TextField
+ * @param required
+ * boolean, true when the element is required
+ */
+ public static void handleInputRequired(Widget widget, boolean required) {
+ assert widget != null : "Valid Widget required";
+
+ if (widget instanceof HandlesAriaRequired) {
+ ((HandlesAriaRequired) widget).setRequired(required);
+ } else {
+ handleInputRequired(widget.getElement(), required);
+ }
+ }
+
/**
* Handles the required actions depending of the input element being
* required or not.
*
- * @param inputElement
- * Element, typically an input element
+ * @param element
+ * Element, typically from an input Widget like TextField
* @param required
* boolean, true when the element is required
*/
- public static void handleInputRequired(Element inputElement,
- boolean required) {
+ public static void handleInputRequired(Element element, boolean required) {
if (required) {
- Roles.getTextboxRole().setAriaRequiredProperty(inputElement, true);
+ Roles.getTextboxRole().setAriaRequiredProperty(element, required);
+ } else {
+ Roles.getTextboxRole().removeAriaRequiredProperty(element);
+ }
+ }
+
+ /**
+ * Handles the required actions depending of the input Widget contains
+ * unaccepted input.
+ *
+ * @param widget
+ * Widget, typically an input Widget like TextField
+ * @param invalid
+ * boolean, true when the Widget input has an error
+ */
+ public static void handleInputInvalid(Widget widget, boolean invalid) {
+ assert widget != null : "Valid Widget required";
+
+ if (widget instanceof HandlesAriaInvalid) {
+ ((HandlesAriaInvalid) widget).setInvalid(invalid);
} else {
- Roles.getTextboxRole().removeAriaRequiredProperty(inputElement);
+ handleInputInvalid(widget.getElement(), invalid);
}
}
/**
* Handles the required actions depending of the input element contains
- * unaccepted input
+ * unaccepted input.
*
- * @param inputElement
- * Element, typically an input element
- * @param showError
+ * @param element
+ * Element, typically an input Widget like TextField
+ * @param invalid
* boolean, true when the element input has an error
*/
- public static void handleInputError(Element inputElement, boolean showError) {
- if (showError) {
- Roles.getTextboxRole().setAriaInvalidState(inputElement,
+ public static void handleInputInvalid(Element element, boolean invalid) {
+ if (invalid) {
+ Roles.getTextboxRole().setAriaInvalidState(element,
InvalidValue.TRUE);
} else {
- Roles.getTextboxRole().removeAriaInvalidState(inputElement);
+ Roles.getTextboxRole().removeAriaInvalidState(element);
}
}
* @return String with the id of the element
*/
public static String ensureUniqueId(Element element) {
+ assert element != null : "Valid Element required";
+
String id = element.getId();
if (null == id || id.isEmpty()) {
id = DOM.createUniqueId();
--- /dev/null
+package com.vaadin.client.ui;
+
+/**
+ * Some Widgets need to handle the required handling for WAI-ARIA themselfs, as
+ * this attribute needs to be set to the input element itself. In such a case,
+ * the Widget needs to implement this interface.
+ */
+public interface HandlesAriaInvalid {
+ /**
+ * Called to set the element, typically an input element, as invalid.
+ *
+ * @param invalid
+ * boolean, true when the element should be marked invalid, false
+ * otherwise
+ */
+ void setInvalid(boolean invalid);
+}
--- /dev/null
+package com.vaadin.client.ui;
+
+/**
+ * Some Widgets need to handle the required handling for WAI-ARIA themselfs, as
+ * this attribute needs to be set to the input element itself. In such a case,
+ * the Widget needs to implement this interface.
+ */
+public interface HandlesAriaRequired {
+ /**
+ * Called to set the element, typically an input element, as required.
+ *
+ * @param required
+ * boolean true when the element needs to be set as required
+ */
+ void setRequired(boolean required);
+}
package com.vaadin.client.ui;
-import com.google.gwt.aria.client.CheckedValue;
-import com.google.gwt.aria.client.Roles;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.vaadin.client.VTooltip;
public class VCheckBox extends com.google.gwt.user.client.ui.CheckBox implements
- Field {
+ Field, HandlesAriaInvalid, HandlesAriaRequired {
public static final String CLASSNAME = "v-checkbox";
public VCheckBox() {
setStyleName(CLASSNAME);
- // Add a11y role "checkbox"
- Roles.getCheckboxRole().set(getElement());
- Roles.getCheckboxRole().setAriaCheckedState(getElement(),
- CheckedValue.FALSE);
-
Element el = DOM.getFirstChild(getElement());
while (el != null) {
DOM.sinkEvents(el,
}
}
- @Override
- public void setValue(Boolean value, boolean fireEvents) {
- setCheckedValue(value);
- super.setValue(value, fireEvents);
+ /**
+ * Gives access to the input element.
+ *
+ * @return Element of the CheckBox itself
+ */
+ private Element getCheckBoxElement() {
+ // FIXME: Would love to use a better way to access the checkbox element
+ return (Element) getElement().getFirstChildElement();
}
- private void setCheckedValue(Boolean value) {
- CheckedValue checkedValue = value ? CheckedValue.TRUE
- : CheckedValue.FALSE;
- Roles.getCheckboxRole().setAriaCheckedState(getElement(), checkedValue);
+ @Override
+ public void setRequired(boolean required) {
+ AriaHelper.handleInputRequired(getCheckBoxElement(), required);
}
@Override
- public void setEnabled(boolean enabled) {
- super.setEnabled(enabled);
-
- Roles.getCheckboxRole().setAriaDisabledState(getElement(), true);
+ public void setInvalid(boolean invalid) {
+ AriaHelper.handleInputInvalid(getCheckBoxElement(), invalid);
}
}
@SuppressWarnings("deprecation")
public class VFilterSelect extends Composite implements Field, KeyDownHandler,
KeyUpHandler, ClickHandler, FocusHandler, BlurHandler, Focusable,
- SubPartAware {
+ SubPartAware, HandlesAriaInvalid, HandlesAriaRequired {
/**
* Represents a suggestion in the suggestion popup box
});
popupOpener.sinkEvents(Event.ONMOUSEDOWN);
+ Roles.getButtonRole()
+ .setAriaHiddenState(popupOpener.getElement(), true);
Roles.getButtonRole().set(popupOpener.getElement());
panel.add(tb);
}
return null;
}
+
+ @Override
+ public void setRequired(boolean required) {
+ AriaHelper.handleInputRequired(tb, required);
+ }
+
+ @Override
+ public void setInvalid(boolean invalid) {
+ AriaHelper.handleInputInvalid(tb, invalid);
+ }
}
boolean required = owner instanceof AbstractFieldConnector
&& ((AbstractFieldConnector) owner).isRequired();
+
+ AriaHelper.handleInputRequired(owner.getWidget(), required);
+
if (required) {
if (requiredFieldIndicator == null) {
requiredFieldIndicator = DOM.createSpan();
"v-required-field-indicator");
DOM.appendChild(getElement(), requiredFieldIndicator);
- Roles.getTextboxRole().setAriaRequiredProperty(
- owner.getWidget().getElement(), true);
-
// Hide the required indicator from screen reader, as this
// information is set directly at the input field
Roles.getTextboxRole().setAriaHiddenState(
if (requiredFieldIndicator != null) {
DOM.removeChild(getElement(), requiredFieldIndicator);
requiredFieldIndicator = null;
-
- Roles.getTextboxRole().removeAriaRequiredProperty(
- owner.getWidget().getElement());
}
}
showError = false;
}
+ AriaHelper.handleInputInvalid(owner.getWidget(), showError);
+
if (showError) {
if (errorIndicatorElement == null) {
errorIndicatorElement = DOM.createDiv();
DOM.setElementProperty(errorIndicatorElement, "className",
"v-errorindicator");
DOM.appendChild(getElement(), errorIndicatorElement);
+
+ // Hide the error indicator from screen reader, as this
+ // information is set directly at the input field
+ Roles.getFormRole().setAriaHiddenState(
+ errorIndicatorElement, true);
}
} else if (errorIndicatorElement != null) {
import java.util.List;
import java.util.Map;
-import com.google.gwt.aria.client.CheckedValue;
-import com.google.gwt.aria.client.Id;
import com.google.gwt.aria.client.Roles;
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.event.dom.client.BlurEvent;
import com.google.gwt.event.dom.client.LoadHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.Command;
-import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.FocusWidget;
import com.google.gwt.user.client.ui.Focusable;
import com.vaadin.shared.ui.optiongroup.OptionGroupConstants;
public class VOptionGroup extends VOptionGroupBase implements FocusHandler,
- BlurHandler, HandlesAriaCaption {
+ BlurHandler {
public static final String CLASSNAME = "v-select-optiongroup";
/** For internal use only. May be removed or replaced in the future. */
public boolean htmlContentAllowed = false;
- private String labelId;
-
public VOptionGroup() {
super(CLASSNAME);
panel = (Panel) optionsContainer;
if (isMultiselect()) {
op = new VCheckBox();
op.setHTML(itemHtml);
-
- // Add a11y role "checkbox" - FIXME - did not find a good
- // solution to prevent getFirstChild()
- com.google.gwt.dom.client.Element checkBoxElement = op
- .getElement().getFirstChildElement();
- Roles.getCheckboxRole().set(checkBoxElement);
- Roles.getCheckboxRole().setAriaCheckedState(checkBoxElement,
- CheckedValue.FALSE);
} else {
op = new RadioButton(paintableId, itemHtml, true);
op.setStyleName("v-radiobutton");
-
- // Add a11y role "radio" - FIXME - did not find a good solution
- // to prevent getFirstChild()
- com.google.gwt.dom.client.Element radioElement = op
- .getElement().getFirstChildElement();
- Roles.getRadioRole().set(radioElement);
- Roles.getRadioRole().setAriaCheckedState(radioElement,
- CheckedValue.FALSE);
- }
-
- if (labelId != null && !labelId.isEmpty()) {
- Roles.getFormRole().setAriaDescribedbyProperty(
- op.getElement().getFirstChildElement(), Id.of(labelId));
}
if (icon != null && icon.length() != 0) {
}
client.updateVariable(paintableId, "selected", getSelectedItems(),
isImmediate());
-
- for (CheckBox item : optionsToKeys.keySet()) {
- CheckedValue value = item.getValue() ? CheckedValue.TRUE
- : CheckedValue.FALSE;
- Roles.getCheckboxRole().setAriaCheckedState(item.getElement(),
- value);
- }
}
}
});
}
}
-
- @Override
- public void bindAriaCaption(Element captionElement) {
- labelId = captionElement.getId();
- for (CheckBox item : optionsToKeys.keySet()) {
- Roles.getCheckboxRole().setAriaLabelledbyProperty(
- item.getElement(), Id.of(labelId));
- }
- }
-
- @Override
- public void clearAriaCaption() {
- labelId = null;
- for (CheckBox item : optionsToKeys.keySet()) {
- Roles.getCheckboxRole().removeAriaLabelledbyProperty(
- item.getElement());
- }
- }
}
import com.vaadin.client.VConsole;
import com.vaadin.client.ui.VCalendarPanel.FocusOutListener;
import com.vaadin.client.ui.VCalendarPanel.SubmitListener;
+import com.vaadin.shared.ui.datefield.PopupDateFieldState;
import com.vaadin.shared.ui.datefield.Resolution;
/**
private Label selectedDate;
+ private Element descriptionForAssisitveDevicesElement;
+
public VPopupCalendar() {
super();
add(calendarToggle);
+ // Description of the usage of the widget for assisitve device users
+ descriptionForAssisitveDevicesElement = DOM.createDiv();
+ descriptionForAssisitveDevicesElement
+ .setInnerText(PopupDateFieldState.DESCRIPTION_FOR_ASSISTIVE_DEVICES);
+ AriaHelper.ensureUniqueId(descriptionForAssisitveDevicesElement);
+ Id.of(descriptionForAssisitveDevicesElement);
+ AriaHelper
+ .visibleForAssistiveDevicesOnly(descriptionForAssisitveDevicesElement);
+ DOM.appendChild(getElement(), descriptionForAssisitveDevicesElement);
+
calendar = GWT.create(VCalendarPanel.class);
calendar.setParentField(this);
calendar.setFocusOutListener(new FocusOutListener() {
if (isTextFieldEnabled()) {
super.clearAriaCaption();
} else {
- AriaHelper.clearCaption(calendarToggle);
+ AriaHelper.bindCaption(calendarToggle, null);
}
handleAriaAttributes();
return super.getSubPartName(subElement);
}
+ /**
+ * Set a description that explains the usage of the Widget for users of
+ * assistive devices.
+ *
+ * @param descriptionForAssistiveDevices
+ * String with the description
+ */
+ public void setDescriptionForAssistiveDevices(
+ String descriptionForAssistiveDevices) {
+ descriptionForAssisitveDevicesElement
+ .setInnerText(descriptionForAssistiveDevices);
+ }
+
+ /**
+ * Get the description that explains the usage of the Widget for users of
+ * assistive devices.
+ *
+ * @return String with the description
+ */
+ public String getDescriptionForAssistiveDevices() {
+ return descriptionForAssisitveDevicesElement.getInnerText();
+ }
}
import com.vaadin.shared.ui.datefield.Resolution;
public class VTextualDate extends VDateField implements Field, ChangeHandler,
- Focusable, SubPartAware, HandlesAriaCaption {
+ Focusable, SubPartAware, HandlesAriaCaption, HandlesAriaInvalid,
+ HandlesAriaRequired {
private static final String PARSE_ERROR_CLASSNAME = "-parseerror";
@Override
public void clearAriaCaption() {
- AriaHelper.clearCaption(text);
+ AriaHelper.bindCaption(text, null);
+ }
+
+ @Override
+ public void setRequired(boolean required) {
+ AriaHelper.handleInputRequired(text, required);
+ }
+
+ @Override
+ public void setInvalid(boolean invalid) {
+ AriaHelper.handleInputInvalid(text, invalid);
}
/**
blurHandlerRegistration);
if (null != getState().errorMessage) {
+ getWidget().setInvalid(true);
+
if (getWidget().errorIndicatorElement == null) {
getWidget().errorIndicatorElement = DOM.createSpan();
getWidget().errorIndicatorElement.setInnerHTML(" ");
} else if (getWidget().errorIndicatorElement != null) {
DOM.setStyleAttribute(getWidget().errorIndicatorElement, "display",
"none");
- }
- if (isReadOnly()) {
- getWidget().setEnabled(false);
+ getWidget().setInvalid(false);
}
+ getWidget().setRequired(isRequired());
+ getWidget().setEnabled(!isReadOnly());
+
if (getIcon() != null) {
if (getWidget().icon == null) {
getWidget().icon = new Icon(getConnection());
+ "-button-readonly");
}
+ getWidget().setDescriptionForAssistiveDevices(
+ getState().descriptionForAssistiveDevices);
getWidget().calendarToggle.setEnabled(true);
}
import com.vaadin.client.communication.StateChangeEvent.StateChangeHandler;
import com.vaadin.client.ui.AbstractFieldConnector;
import com.vaadin.client.ui.AbstractLayoutConnector;
-import com.vaadin.client.ui.LayoutClickEventHandler;
import com.vaadin.client.ui.AriaHelper;
+import com.vaadin.client.ui.LayoutClickEventHandler;
import com.vaadin.client.ui.layout.ElementResizeEvent;
import com.vaadin.client.ui.layout.ElementResizeListener;
import com.vaadin.shared.AbstractFieldState;
slot.setCaption(caption, iconUrlString, styles, error, showError,
required, enabled);
- AriaHelper.handleInputRequired(child.getWidget().getElement(),
- required);
- AriaHelper.handleInputError(child.getWidget().getElement(),
- showError);
+ AriaHelper.handleInputRequired(child.getWidget(), required);
+ AriaHelper.handleInputInvalid(child.getWidget(), showError);
AriaHelper.bindCaption(child.getWidget(), slot.getCaptionElement());
if (slot.hasCaption()) {
getState().textFieldEnabled = state;
}
+ /**
+ * Set a description that explains the usage of the Widget for users of
+ * assistive devices.
+ *
+ * @param descriptionForAssistiveDevices
+ * String with the description
+ */
+ public void setDescriptionForAssistiveDevices(String description) {
+ getState().descriptionForAssistiveDevices = description;
+ }
+
+ /**
+ * Get the description that explains the usage of the Widget for users of
+ * assistive devices.
+ *
+ * @return String with the description
+ */
+ public String getDescriptionForAssistiveDevices() {
+ return getState().descriptionForAssistiveDevices;
+ }
}
package com.vaadin.shared.ui.datefield;
public class PopupDateFieldState extends TextualDateFieldState {
+ public static final String DESCRIPTION_FOR_ASSISTIVE_DEVICES = "Arrow down key opens calendar element for choosing the date";
+
{
primaryStyleName = "v-datefield";
}
public boolean textFieldEnabled = true;
-
+ public String descriptionForAssistiveDevices = DESCRIPTION_FOR_ASSISTIVE_DEVICES;
}
projects / vaadin-framework.git / commitdiff