We Keep Coding

How Do I Modify an EXTjs app to be 508 Compliant?

I have recently inherited a web app using the EXTjs framework. I'm not really that familiar with it, but I have been learning it the best I can over the last few months. I have recently been given an assignment to update the entire application to comply with 508 Compliance, that is to say, make the application accessible for those with vision issues. I was given a deficiency list that gives examples where the software doesn't comply for various reasons. I guess I need a little help in understanding how this works. I've looked at the EXTjs documentation and it does say that it has accessibility features available in it, but I haven't really been successful in finding what to do. Those using the application are using the JAWS screen reader if that makes any difference.
A few of the things I know that I need to fix are:
Some elements need to be tagged as a heading so the screen reader can read it programmatically an to give the web page some structure.
When tabbing around a table/grid the data is read without any context/header information.
Color is used as a visual cue to indicate action(ie required field). I'm supposing this is for color blindness and some other visual cue needs to be added.
Modal windows can't be resized or moved by the keyboard.
Needs a mechanism to bypass blocks of content that are repeated on multiple pages.
Pages do not have titles(this is a single page app).
Keyboard operable UI elements do not have a visible indication of focus(radio button group doesn't show focus, even if selected one does).
Name/State of UI elements in the product can't be understood(ie the name of expand and collapse buttons are read as expand panel or collapse panel by assistive tech without context to what is being expanded or collapsed).
There are many other issues, but this gives some idea of the scope of the changes required. As I have stated above, I've done a lot of examination of the EXTjs documentation at their site as well as google searches on how to make applications more accessible. But I'm not really seeing what I need. Much of this application is just configuring EXTjs templates and then loading them with much of the meat of the application being handled by the EXTjs built in js code.
I would appreciate any help, useful sites with examples, or code snippets on how to accomplish some of this. I'm hoping that once I get started with some examples, I can just go on from there.
Thanks.

Most items come with aria support. Personally I would add look into each component and add an automated aria support. E.g. button ==> aria.label = button.text
Take a look at ariaAttributes, ariaDescribedBy, ariaLabel and ariaLabelledBy. Some have ariaErrorText, ariaHelp.
Next take a look at tabIndex. You want to ensure that you can use TAB to jump through the fields, buttons, ...

Code to Drag web page/Window by its title bar in angularJS

I am trying to find library/module which can be used to create draggable web page in angular JS. Currently there are modules in angular which does that for drag and drop boxes within the list. Please do share if anyone had caught into similar problem and has found solution.

I'm not sure exactly what you are looking for, but it kind of reads like you're looking for a library that will help you with drag and drop in Angular.
There was a great post on the this topic before on stackoverflow: How to Create simple drag and Drop in angularjs

Use AngularJS to integrate with DOJO styleseet whithout widget function.

Does anyone knows about a practical way to integrate AngularJS with DOJO stylesheet but DOJO widget function? Currently I'm trying to code with AngularJS but the page will be passed by DOJO web site. So that I need to make my web page looks like the previous one to keep its own consistency CSS. Hope someone is going give me a great tip.

jQuery, jQueryUI (and plugins) and AngularJS - how do they all fit together?

I have this website (in Hebrew): http://www.iping.co.il (if you could have a look at it maybe with google translate and see what it does it could be great but not a must).
It basically a website that shows your IP, and gives you a set of tools (like ping, whois check, open port checks...).
I've built it a while back and I was using jQuery and jQuery UI to do all the work (like opening dialogs, call the server, change the DOM, show a progress bar...).
Now I'm working on rebuilding it - I'm rebuilding using ASP.NET MVC 5, HTML5 and Bootstrap3. I figured it's a great little website to test new things I've been reading about lately. And one of those things I would like to try and implement (after reading much about) is AngularJS.
As far as I know, AngularJS is not meant to change the DOM directly, but use directives and 2 way bindings to do so.
I have a lot of code, and plugins that I use that uses jQuery and jQuery UI to (for example the dialogs, the progress bar and so on... things that I haven't figured out how to do with AngularJS). It seems that if I use the jQueryUI progress bar and update it from from AngularJS that I'm breaking some rules here and that it's probably dirty and not the way it should be written.
So my question is, what is the correct way to work when and build a rich UI when using AngularJS? is jQuery and jQueryUI even still relevant? if so, is there a correct way to use them (maybe DI somehow?)?
I've searched and found something called AngularJS UI - but it's not as rich as jQueryUI.
Thank you

Using plugins within directives is fairly simple in concept.
<div my-directive></div>
Following is a very minimialistic directive with just enough code to initialize a plugin. The returned function is equivalent to link in a more defined directive
angular.module('myApp').directive('myDirective',function(/* dependencies*/){
/* element is a jQuery object when jQuery is included in page before angular.js*/
return function(scope,element,attrs){
/* can use attributes or scope to pass options to plugin if needed*/
element.someJqueryPlugin();
}
});
This would be equivalent to writing in jQuery only:
$(function(){
$('[my-directive]').someJqueryPlugin();
});

If you want to use AngularJS and Bootstrap I suggest you take a look at these directives:
http://angular-ui.github.io/bootstrap/
Once you load the modules, you can set up say a progress bar this way:
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>
You shouldn't even need to include JQuery if you only need the Bootstrap components.

How to get UI designer window for AJAX

I want to start AJAX coding but also want to be able to design user interface in a designer window (like in MS Visual Studio) by dragging widgets onto the work area. Is there any tool that would let me do that easily?
Right now I'm using Aptana 3. I've installed jQuery but got lost trying to get jQuery UI. Is there any other way to get what I need?

There are no ajax/widget/js libraries out there that will have their own component designer, and you can stop searching for free ones, there are none.
There is one that most people know about, and it's called Sencha Architect, for the super awesome Sencha ExtJS library. Beautiful widgets, outstanding designer app, brilliant documentation. And such things of course come with a price tag.
If you are willing to make an investment:
Sencha ExtJS: http://www.sencha.com/products/extjs/
Store for ExtJS: http://www.sencha.com/store/architect/
Sencha Architect: http://www.sencha.com/products/architect/
Store for Architect: http://www.sencha.com/store/architect/
Other than this one, I've not seen any component/UI designer application for any js/ajax library.