I am new to ARIA roles. If I have tool-tip type functionality, i.e. if someone click the question mark button more text is displayed detailing instruction on how to fill in the form field, should I be using the aria-expanded attribute, the aria-hidden attribute or both?
<div class="login-form-field tt-highlight">
<div class="error-message error-style">
<p>Sorry you have not entered anything in the field above.</p>
</div>
<div class="col-xs-10 col-sm-10 col-md-10">
<label for="inputTxtCustomerPostcode" class="login" />Postcode:</label>
<input id="inputTxtCustomerPostcode" type="text" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<a title="Please enter a valid case reference tooltip" class="login-tooltip" data-toggle="collapse" data-parent="#accordion" href="#collapseTxtCustomerPostcode" role="button" aria-pressed="false"></a>
</div>
<div id="collapseTxtCustomerPostcode" class="panel-collapse collapse" role="tree tooltip">
<div class="panel-body" role="treeitem" aria-expanded="false" aria-hidden="true">
<p>some text goes here for the tooltip</p>
</div>
</div>
</div>
Use the RDF model diagram to help:
aria-expanded is defined for the treeitem role via inheritance.
aria-hidden is defined for all roles, but has this caveat:
Note: Authors are advised to avoid using aria-hidden="false" with styles or attributes that have historically prevented rendering in all modalities, such as display:none or visibility:hidden in CSS, or the hidden attribute in HTML 5. At the time of this writing, aria-hidden="false" is known to work inconsistently when used in conjunction with such features. As future implementations improve, use caution and test thoroughly before relying on this approach.
As a result, aria-expanded by itself should suffice.
References
WAI-ARIA Taxonomy
WAI-ARIA RDF Model
aria-expanded
aria-hidden
Related
Data is being populated from database
<div th:each="comm : ${listBothComm}">
<label class="list-group-item d-flex gap-2"> <input
checked="" class="form-check-input flex-shrink-0"
th:field="*{comm_cd}" th:value="${comm.comm_cd}" type="checkbox"><span
th:text="${comm.comm_nm}"> </span>
</label>
</div>
The answer to your question is provided in this post:
https://stackoverflow.com/a/72300493/15730570
The answer is for simple checkbox which passes one value back to controller. To pass multiple values, you will need to to tweak your thymeleaf code accordingly.
Picture
Hi, this is my design right now and i want to expand it more but something is limiting me.
<div className="position-absolute start-50 translate-middle-x">
<div className="d-flex">
<div className="me-2">
<Posts />
</div>
<div className="col">
<GroupPage />
</div>
</div>
</div>
I use d-flex to add element by : by.
I want to expand it to almost whole screen but no luck.
I followed JustinKo's other answer(How to access and interact with Shadow DOM using Watir?) but I don't know how to use it for my requirement here.
here is the text field which I would like to locate. This text_field is coming within the shadow dom as shown below.
<div class="vaadin-text-field-container">
<label part="label" id="vaadin-text-field-label-0">Username</label>
<div part="input-field" id="vaadin-text-field-input-0">
<slot name="prefix"></slot>
<slot name="input">
<input part="value" tabindex="0" aria-labelledby="vaadin-text-field-label-0 vaadin-text-field-input-0" maxlength="512" autocomplete="off" required="">
</slot>
<div part="clear-button" id="clearButton" role="button" aria-label="Clear" hidden="true"></div>
<slot name="suffix"></slot>
</div>
<div part="helper-text" id="vaadin-text-field-helper-0">
<slot name="helper"></slot>
</div>
<div part="error-message" aria-live="assertive" aria-hidden="true" id="vaadin-text-field-error-0"></div>
</div>
<style include="lumo-text-field"></style><style include="lumo-input-field-theme"></style><style include="flow_css_mod_12"></style>
Any specific method which would help me locating this element in Shadow DOM in WATIR?
I have a label which display a given text coming from a String variable.
This variable can have two different values and for each value I have a translated version from english to my native language stored in a property file.
I have the following code:
add(new Label("fruit", new PropertyModel(getModelObject(), "fruit.name")));
and HTML:
<wicket:panel xmlns:wicket="http://wicket.apache.org/">
<div>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5">
<wicket:message key="myBasket.fruit">
</wicket:message>
</div>
<div class="col-sm-7">
<span wicket:id="fruit"></span>
</div>
</div>
</div>
</div>
</div>
</wicket:panel>
This fruit can be either apple or pear.
In my property file I have a translation for both values:
apple=Apfel
pear=Birne
When I run my code, the content of my label displays in English.
How can I set the value coming from the property file based on the value of the variable?
Thank you!
take a look at class StringResourceModel. You should use it as model for your Label. See user guide.
I'm using MVC architecture, I have used my own custom taglib along with JSTL that will generate forms, gridList dynamically. is it a proper practice to do it. is it make any impact on performance?
<c:forEach items="${uiFieldList}" var="u" >
<div class="span5">
<div class="control-group">
<label class="control-label" ><spring:message code="${u.fieldLabel}" /><c:if test="${u.mandatory =='Y'}"><strong style="color:red;">*</strong></c:if></label>
<div class="controls">
<div class="input-prepend">
<iana:text name="${u.name}" id="${u.id}" value="${u.value}" ></iana:text>
</div>
</div>
</div>
</div>
Any suggestions?