I am facing issues using Web Accessibility (using ARIA) with Backbone. When a view is getting rendered, automatically focus is going to that view and screen reader is reading that section in the order views are getting rendered. Is this the right behavior? I want to control this as I want screen reader to read the content the order I want. Please let me know your suggestions.
If you are using templates for your views you can put your ARIA attributes in the HTML tag.
<ul role="tablist">
<li id="ch1Tab" role="tab">
{{data}}
</li>
</ul>
as far as screen readers it reads it from top to bottom but it doesn't trigger it to read the page again.
here is a discussion on the approach Accessibility and all these JavaScript frameworks
Javascript is not an issue its the foundation of the markup that is rendered in the browser. w
Related
Onsen UI: v2.0.1
AngularJS: 1.5.9
I am building an Android and IOS application that requires dynamic tabs (ons-tab) like in native applications. The content in each tabs can be up to a hundred items. So I want to use ons-lazy-repeat for the ons-tab content to minimize memory consumptions. How do I go about achieving this (dynamic tabs and ons-lazy-repeat ) with Onsen UI. I have searched online and I couldn’t see any solution.
Thank you!
The ons-lazy-repeat component is described in detail in the documentation.
Dynamic tabs can easily be achieved by using the ng-repeat clause of AngularJS. If you don't want to load the content of each tab right at the beginning, you have multiple options like ng-if or ng-include to make sure that only the content of the current visible tab is loaded. You may access and check the visibility of the $index variable that is available in the ng-repeats scope to do so.
See this post how this may be done. Onsen offers a tabbar and tab components which will work the same way as the tab div's in the questions answer.
I'd like to know whether it is possible with angular 1.x or not.
The constraint is to have an application compatible with mobile and desktop. On each page of the application, there is a ui-view that displays the usual content, eg.
<div ui-view flex></div>
But for desktop only browsers, there is another ui-view with additional content (it benefits from a larger width), eg.
<div ui-view="desktop-only" hide show-gt-sm></div>
My question is: when a URL is entered, is it possible to open a different state in each ui-view? (currently, the desktop ui-view is fixed) Maybe be defining specific routes for this ui-view?
I finally made it work using:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
For each state, you can handle multiple named views, each view being related to a controller.
Currently I'm developing a phonegap application using onsen ui and angularJS. I'm trying to pop a page using
<ons-back-button onclick="myNavigator.popPage()">Back</ons-back-button>
I've used same code for "Back" button on every page. But the problem is when I push multiple pages using
<ons-button modifier="large" onclick="myNavigator.pushPage('in_menu.html', { animation : 'slide' } )" style="margin: 220px auto;">
Next
</ons-button>
and when I use "Back" button, it Pops two pages instead of only one page. Some please help me to solve this issue.
I seem to be unable to reproduce the issue only with the information provided unfortunately. Here's a working Demo.
Maybe you could provide a codepen, so that we can see it. Sorry if I'm not being of much use.
On a side-note - if you just have a backbutton in your page it should be able to have the same functionality by default. Maybe somehow in your case the default wasn't prevented but yours is also executed.
Another very important note here is the version of onsen since there were some changes regarding this behaviour.
If you're using the a recent version you could try to use onClick property instead (however you need to do it in javascript, not in the html).
I can update my answer if you provide some more info :)
I have some basic A tags in a menu, I have used UI routers ui-sref="" to add the href attribute.
The HTML generated:
<a target="_self" ui-sref="news" href="/news">News</a>
When clicking this link on a desktop it works every time, but for mobile, it is largely hit and miss, although the tags css hover state does get activated on tap.
I have HTML5 mode enabled, and read that adding target="_self" to the link would fix the issue for this setup, with no luck.
Does anyone know of any reason this would happen?
In some browsers (ex ie7) where angular is not working I want to display a message telling the user to have his browser updated or use another one.
The way I am doing this is
<div ng-if="false">Browser not supported</div>
If the angular cannot render then the ng-if will not be processed so the div is displayed.
This is also causing a flicker when testing for pages with protractor because the protractor is going from page to page very fast.
My question is: Does anyone have a better solution of treating this kind of situation?