When I scan the Vaadin Select component with the Axe Accessibility Chrome extension gives me the following critical error: "Elements must only use allowed ARIA attributes".
Element location:
vaadin-select-value-button
Element source:
<vaadin-select-value-button aria-haspopup="listbox" slot="value" tabindex="0" role="button" aria-labelledby="label-vaadin-select-0 vaadin-select-0" aria-required="false" aria-expanded="false"></vaadin-select-value-button>
Error:
ARIA attribute is not allowed: aria-required="false"
Is it ok that the role of the component is button?
How can i solve this?
The Vaadin's version is 23.1.2.
Related
The problem is rather simple, see the template below:
<material-tab-panel>
<material-tab label="test">
<material-expansionpanel-set>
<material-expansionpanel name="panel 1">
Test 1
</material-expansionpanel>
<material-expansionpanel name="panel 2">
Test 2
</material-expansionpanel>
</material-expansionpanel-set>
</material-tab>
</material-tab-panel>
The Dartium browser renders nothing. If I remove the surrounding material-tab-panel and material-tab the expansion-panels are rendered with the expected accordion behavior. In reverse without the expensionpanel-set the tab is rendered correctly. It seems that the combination causes the problem.
Compiling to JavaScript does not change this outcome.
This has been fixed in v0.4.0-alpha of the components.
See here https://github.com/dart-lang/angular2_components/releases/tag/v0.4.0-alpha
We hope to have this as a "gold" (non-alpha) release soon!
I have an application that uses a datalist that works in the Dev environment but returns a blank field with no lookup in the Production environment. I want to use datalist extensively as it easily provides an auto complete facility but cannot until it works in Production.
Dev is MVC VS 2010 on IE 11.0 under Win7 and it scores 302 in the HTML5Test.
Production is IE 11.0 on Server 2012 R2 Standard reported as Win8.1 and scores 312 in the HTML5Test.
After much comparing, checking, trying, inspecting and reviewing I have found the source of the issue that stops datalist working.
MVC View Code in Index.cshtml
This is the eventual experimental code trying to isolate the issue:
#model IEnumerable<CRM_MVC.Models.BranchDiary>
#{
Layout = null;
}
<body>
<div>
<lable>Enter TV Series Name </label>
<input type="text" id="tv" name="series" list="tvseries" autofocus>
<datalist id="tvseries">
<option value="Heroes">
<option value="Lost">
<option value="Fringe">
<option value="CriminalMinds">
<option value="CSIMiami">
</datalist>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</div>
</body>
Internet Explorer session showing Index.cshtml
The field should provide an autocomplete dropdown but doesn’t.
The Inspect screen shows that <datalist id=tv> is wrongly terminated by /datalist on the same line and after the option list /datalist wrongly has //datalist appearing after it.
When right click Edit HTML is selected for the Div, the original HTML correctly has the first datalist tag with no /datalist and the option list is correctly terminated at the end by the /datalist tag.
What can be done to stop the extras being added to so that it might work the same on Production as on Dev?
What resolved this was unchecking Display intranet sites in Compatibility View in IE Tools-> Compatibility View Settings.
Thanks to Mr Lister for this suggestion.
I will need to check to see if globally changing this setting affects anything else but it makes autocomplete work now as expected and required. Thanks again to Mr Lister for the assistance.
when using special charactes like . or / in id's for a jQuery UI selectmenu I do get JS syntax errors when clicking on one of the options in the open menu.
I know that in jQuery I would need to escape the special characters, but this code seems to be deep inside the lib itself.
Not sure if I miss something before I report a bug so I would like to get hints!
I'm using jQueryUI version 1.11.1 with jquery 1.11.1 but tried other versions starting from 1.10 in this fiddle
<select name=".speed/" id=".speed/" class="sm">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
The error message (in chrome console) is:
Uncaught Error: Syntax error, unrecognized expression: .ui-selectmenu-menu, #.speed/-button
jquery-1.10.1.js:1924
TIA
You can use the name attribute or document.getElementById() to get an Id that you can't use as a jQuery selector:
var elt = $(document.getElementById(".speed/"));
var elt = $("[name='.speed/']");
If the errors are generated by the library itself this won't really help much. However you could try replacing the invalid characters in the id with this as a workaround:
elt.attr("id", elt.attr("id").replace(".", "dot").replace("/", "slash"));
// ... possibly include other characters we don't like
The proper way of course would be to use id-s without dots and slashes. This is a rather sloppy way of working around it but it will work. Use with caution!
I'm trying to use the example accordion directive in my rails app but receive the following error and my browser crashes
Template for directive 'accordionGroup' must have exactly one root element.
template/accordion/accordion-group.html
My HTML view is the same as the example accordion (shortened for readability here)
<div ng-controller="AccordionDemoCtrl">
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
</accordion>
</div>
My routes:
angular
.module('App', [
'ngRoute',
'templates',
'ui.bootstrap'
])
.when('/page', {
templateUrl: 'page.html',
controller: 'PageCtrl'
})
$locationProvider.html5Mode(true);
});
I'm also using the angular template gem and not sure if that has anything to do with it.
I had a similar error with angular bootstrap and this was due to using
ui-bootstrap.js instead of ui-bootstrap-tpls.js
It might be the BOM in your accordion template file causing an issue.
Open the file in a text editor that allows you to change the encoding (like Notepad++), alter the file to be UTF-8 without BOM and save. That should solve it (assuming that's the issue!).
First of all, I'm a novice at this stuff so excuse my "ignorance."
I am creating a form in order for customers to schedule a test drive on a vehicle they are interested in purchasing. I have found jquery code which I've included in the head section as follows:
$(function() {
$( "#datepicker" ).datepicker({ autoSize: true });
$("#time1").timePicker();
// 09.00 AM - 03.30 PM, 15 minutes steps.
$("#time2").timePicker({
startTime: "09.00", // Using string. Can take string or Date object.
endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object.
show24Hours: false,
separator:'.',
step: 15
});
});
In the form, I have added the following:
<b>Pick a Date and Time</b><br>
<span class="auto-style7">Date: </span>
<input type="text" id="datepicker" name="testdrivedate" style="width: 91px" /><br>
<span class="auto-style7">Time: </span>
<input type="text" id="time2" name="testdrivetime" size="10" value="09.00 AM" style="width: 87px"/><br>
The datepicker works well, when the user clicks in the field, the calendar shows up just below the field and when a date is selected, the field is populated with the date selected.
However, the timepicker field does not work. 09:00 AM appears in the form, but when the user clicks in the field, no drop down appears in order to allow for selection of a different time.
Where have I gone wrong?
Thanks for any assistance.
Anna
Based on your comment above, I would guess your code is not executing because you have not included jquery.timePicker.js in your code. Download the file and include it like this:
<script src="path/to/your/js/file/jquery.timePicker.js"></script>
You don't need to include datePicker.js because datepicker is a plugin included with the jquery-ui library. (So really you do have datepicker included!)
Also, looking at your comment, you do not need to have a ; after declaring a <script> tag
Like this:
<script></script>
Not like this:
<script></script>;
EDIT
I found the issue, it appears the jquery.timepicker.js library is quite old (2009). It was developed with a much older jquery version. When I run jquery.timepicker.js with a newer version of jquery, I get this error in the console:
Uncaught TypeError: Cannot read property 'opera' of undefined on jquery.timePicker.js line 130
When I checked line 130 in jquery.timepicker.js, the error was complaining about $.browser being undefined. You are using jquery 1.9.1, and as of jquery 1.9 the jquery website states this about the $.browser object:
This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.
See this page for more information on the jquery browser element: http://api.jquery.com/jQuery.browser/
It looks like you would have to try and use the jquery.migrate plugin if you want to get $.browser and jquery.timepicker.js to work. I'm not sure how difficult this will be as I've never used the jquery.migrate plugin before.
As another a solution, it looks like jquery 1.8.3 plays nicely with both jquery.timepicker.js and jquery-ui 1.10.3 (which is what you are also using). You can either use jquery 1.8.3 instead of 1.9.1:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Or you should use the latest version of jquery, jquery-ui and a newer jquery timepicker plugin. On google search, the first entry for jquery timepicker is this one http://trentrichardson.com/examples/timepicker/ dated May 5th, 2013 which is quite recent. That might work better for you.
Good luck!