I am attempting to check the accessibility of my web app. To do so, I added the ChromeVox extension to Chrome and turned it on. I see that ChromeVox can read out most of input controls when the user focuses on them. But, with these two <DateTimeInput> controls, ChromeVox only reads the place holder values, not the <label> for each. It's strange to me.
The following is the code for the <DateTimeInput> control portion of my web app:
<f:SimpleForm maxContainerCols="3" editable="true" labelSpanL="2" labelSpanM="2" layout="ResponsiveGridLayout">
<f:content>
<Label text="Start time" required="true" labelFor="startTimeFilter"></Label>
<DateTimeInput id="startTimeFilter" type="DateTime" />
<Label text="End Time" required="true" labelFor="endTimeFilter"></Label>
<DateTimeInput id="endTimeFilter" type="DateTime" />
</f:content>
</f:SimpleForm>
The UI looks like:
How can I change my code to make it such that ChromeVox, and other screen readers, read the <label> for each input when the input is focused?
Related
I have my form view defined as follow in the tryton client
<form>
<group id="form">
<label name="capo_famiglia" />
<field name="capo_famiglia"/>
<label name="tipo_famiglia" />
<field name="tipo_famiglia"/>
<label name="data_inizio" />
<field name="data_inizio" widget="date"/>
<label name="data_fine" />
<field name="data_fine" widget="date"/>
<field name="componenti"
colspan="4"
view_ids="registry.family_date_view_tree,registry.family_date_view_form"/>
</group>
</form>
the field componenti is a One2Many fields.
the widget show me only 2 records in the form view, even if I put 3 or 4 records.
I try to make as done in sale_order,using notebook, and yexpand but without any result.
This is the view:
Click To View the image
any help is really appreciated
I guess your are using the web client. Because with the desktop client One2Many widget fill all the available vertical space. This behavior could not be mimicked on the web so the best solution found for now is a default min-height=100px and max-height=300px. Normally it is should be enough to show 8 rows.
I'm trying to change styling of empty/invalid input fields on form. I'm using Primefaces, so I wanted to swtich its messages for required fields and I've done it on this way:
<p:inputText id="firstName" value="#{myClass.firstName}" required="true" styleClass="#{not component.valid ? 'ui-input-invalid' : ''}"/>
If component is empty (invalid) I add css to this input field so its border become red without any text. But, among many input fields I have, I have some fields that are p:autocomplete or fields that are read-only by default. I know fields like that aren't supposed to be marked as invalid, but I need to mark them as invalid also. Browsing Internet didn't bring any successful solution, do you have any?
<p:autoComplete id="city" forceSelection="true" minQueryLength="2" queryDelay="400" value="#{myClass.city}" required="true" completeMethod="#{myClass.fetchCities}" effect="fade" global="false" var="city" itemLabel="#{city.name}" itemValue="#{city}" converter="cityConverter" styleClass="#{not component.valid ? 'ui-input-invalid' : ''}"/>
Thanks in advance...
I Google and search every article here and in the google but i cannot find anything regarding this issue. Any idea why the request.form["name here"] is nothing when the html control is disabled something like
<input type="radio" name="name here" disabled />
removing disabled would return the values. I tested this only on IE 10 not sure on other browsers.
I am looking into changing the css of the radio button but that is a different story.
Thank you.
Disabled form fields are not part of the posted data. If you disable the html control the data will not be posted.
If you want to show the data and have it posted, but not possible to edit you can set the control to readonly instead.
<input type="radio" name="name here" readonly="readonly" />
Can I make date field in Google Chrome mandatory? In other words I want to remove the cancel ('x') button from the input.
The input example on JSFiddle.
<input type="date" name="start" id="start" value="2014-02-11">
The current Google Chrome version is 32.0.1700.107 m
Apply required to make an input field mandatory
<input type="date" name="start" id="start" value="2014-02-11" required />
An example : http://jsfiddle.net/LnzKf/2/
use this code
<input type="date" name="start" id="start" value="2014-02-11" required>
link http://jsfiddle.net/LnzKf/3/
I have a page that is rendered through xulrunner service. There is a form and a button under the form.
For accessibility requirement, I forced the focus on the text field within the form when the user navigates to this page. However, sometimes JAWS always reads the Post Comment button label. Sometimes, JAWS reads the aria-label “Enter Comments”.
Here is the code:
<body onLoad="document.addcommentform.comment.focus()">
<input type="textarea" aria-label="Enter Comments" title="{$enterComment}" name="comment" />
<input class="Button" type="submit" value="{$postComment}" />
I also tried to put a visible label on the UI like this. I did more testing and found out the behavior is pretty the same.
<label for="addcommentform">Please enter comment
<form method="get" action="{$self}" name="addcommentform">
<textarea title="{$enterComment}" name="comment" class="commentarea" </textarea>
<input class="Button" type="submit" value="{$postComment}" />
</form>
</label>
I think it is related to this known bug https://bugzilla.mozilla.org/show_bug.cgi?id=133771
But does anybody known any workaround to this issue?
I'm a Jaws user and don't know of a way around this. Since Jaws tends to create it's own model of pages in a virtual buffer things can behave slightly differently then you would expect. To confirm or disprove weather it's a Jaws specific bug I would suggest trying out NVDA an open source and quite good Windows screen reader.