I have an input field where a typeahead popup comes on searching for something. The screen reader is unable to read the values of suggestions in the popup.
I am maintaining the focus using $ActiveIndex variable. I am able to navigate the list using only the arrow keys, the screen reader just reads the input text when navigating the popup list and not the actual values in the suggestions
The HTML code is something like this:
<input type="text"
class="search"
title="Search User"
ng-model="vm.SearchText"
ng-model-options="{ debounce: 300 }"
aria-label="{{ placeholder }}"
ng-required="requiredattr" />
<ul class="ui list menu typeahead popup-layer vertical" ng-show="vm.MenuShown" ng-mousedown="vm.RetainFocus()">
<li class="item"
ng-class="{ active: $index == vm.ActiveIndex }"
ng-click="vm.Add(match)"
ng-repeat="match in vm.Matches track by $index">
<div class="header">
<i class="ban icon" ng-if="match.Deleted"></i>
<span ng-bind-html="match.DisplayName"></span> <!-- I want this DisplayName to be read -->
</div>
</li>
</ul>
The UI looks like this
The screen reader is just reading "suh" everytime I navigate the results with arrow keys.
Things I have tried:
Adding aria-label attribute to list item - Didn't work, I guess the element should be tab focusable for the aria label to be read out.
Adding tabindex = -1 to the list item to make it focusable but not navigable. Didn't work either.
You can use aria-active-descendant attribute and set it to the list options IDs and also use aria-owns property from the input box to refer the list items.
Related
I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been able to get my code to work.
Controller code:
function Ctrl($scope) {
$scope.lines = [{text: 'res1'}, {text:'res2'}];
}
View:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="line in lines">
<div class="preview">{{text}}{{$index}}</div>
</div>
<div ng-repeat="line in lines">
<-- typing here should auto update it's preview above -->
<input value="{{line.text}}" ng-model="text{{$index}}"/>
<!-- many other fields here that will also affect the preview -->
</div>
</div>
</div>
Here's a fiddle: http://jsfiddle.net/cyberwombat/zqTah/
Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls.
I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?
For each iteration of the ng-repeat loop, line is a reference to an object in your array. Therefore, to preview the value, use {{line.text}}.
Similarly, to databind to the text, databind to the same: ng-model="line.text". You don't need to use value when using ng-model (actually you shouldn't).
Fiddle.
For a more in-depth look at scopes and ng-repeat, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section ng-repeat.
<h4>Order List</h4>
<ul>
<li ng-repeat="val in filter_option.order">
<span>
<input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
{{filter_option.order_name[$index]}}
</span>
<select title="" ng-model="filter_param[val]">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
</li>
</ul>
I am making a angularjs app and in this I have a list of users coming fromng-repeat. Now whenever I click on any user a new div box opens. But the problem is that there are multiple boxes opening for the same user and I want only one box for one user.
I tried using ng-if but failed.
I am sharing my code, please check it and provide solutions, thanks in advance.
Code from List of user are coming :
<div class="people">
<div ng-repeat="user in vm.otherUsers | filter : vm.search">
<div directive class="person" ng-click="vm.activateChat(user);bubble=true;" id="chat_{{user.id}}" ng-disabled="true">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble && user.counter>0" class="noti_bubble">{{user.counter}}</span>
</span>
</div>
</div>
</div>
and on click activateChat opens the new box for that user.
Code for the box is:
<div ng-repeat="chatUser in vm.multipleUsers">
<div class="msg_box" id="d_{{chatUser.id}}">
--box content--
</div>
</div>
Note: Only one box should open for a single user
You could keep a list of opened boxes per userId in your controller. Then add a function to your controller that you can use in an ng-if or ng-class to show a non-clickable version of your div. Use the same list to check if you should open a new modal in vm.activateChat()
So, I'm actually new to angularJS and I've been searching for a while and trying different ways to achieve something, but it seems impossible, to me.
I have this ng-repeat that should show only one of my 6 position array. When I click in "Change", than I should load the second and then the third and so on, until all my data have been accessed and changed by the user, that's why I limited it to 1.
The Professor's select should load according to a parameter from the current ng-repeat class. I have no idea how to solve this problem. I'm trying right now to use a service to load the professor's dropdown, but with no success.
<div class="row" **ng-repeat="class in classes | offset:currentPage | limitTo: 1"** on-finish-render="ngRepeatFinished">
<div style="display: block;">
<div>
<p><label for="">Change:</label> {{ class.professorName }}</p>
</div>
<div>
<p><label for="">By:</label>
<select id="professor" name="professor" class="form-control">
<option ng-repeat="professor in professors" value="{{professor.id}}">{{ professor.name }}</option>
</select>
</p>
</div>
</div>
</div>
<hr>
<center><button type="button" ng-click="change(class.classId)" class="btn btn-primary">Change</button></center>
</div>
What's the best way to achieve something like this (Show only one item each time and after user submits the form, go to the next position... and for each ng-repeat item, I have to reload the professors dropdown)?
Thank you!
Am I understanding you correctly, you want
ng-repeat class in classes //limit 1 //index i.e. [0] +1 change index after button click so you move to the next class index location?
If your setting a value of professor.id in the class or a property that isn't set or is null/undefined before the button, then just add this to your parent div with the loop of class in classes.
ng-if="!class.propName" //if property/dropdown not set
If this isn't what your looking for please expand on your question.
I'm a noob to AngularJS. As a learning exercise I am creating a typeahead control.
The typeahead is comprised of a text box for filtering the options, an unordered list for displaying the menu of short-listed options, and a Show/Hide button for manually toggling the list.
The text box filters the li elements using ng-repeat. When selecting an li item from the list, I populate the text box with the selected value, and then hide the list.
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="hideMenu(); query.id = item.id">
{{item.id}}
</li>
</ul>
</div>
My issue is that when the value is assigned to the text box, the list is momentarily filtered to the one option selected (because the text box is also the source of the ng-repeat filter), before hiding the menu. What I want id for the menu to be hidden without being refreshed with the filter first.
It should be noted that this only occurs when using CSS transitions which I am using to fade the menu out.
Here is a plnkr to illustrate.
Here's a working Plnkr. I basically gave your menu time to finish its animation before setting the value. Relevant code is as follows:
$scope.selectItem = function(id){
$scope.isActive = false;
$timeout(function(){
$scope.query.id = id;
}, 250);
}
...and the HTML using the newly created selectItem method:
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="selectItem(item.id)">
{{item.id}}
</li>
</ul>
</div>
i repeat things in ng repeat like so
<div class="" ng-repeat="deutscheBankEvent in deutscheBankEvents">
<div class="schrottler-opened schrottler" title="">
<span class="presse_ueber" style="font-size:22px;margin-left:10px;font-weight: normal;margin-top:5px">{{deutscheBankEvent.name}}</span>
</div>
<!-- data-ng-repeat also possible-->
<div class="">
<div class="presse_content">
<Div style="color:white">{{deutscheBankEvent.name}}</div>
<ul class="liste_k">
<li ng-repeat="list in deutscheBankEvent.list">
{{list}}
</li>
</ul>
</div>
</div>
later down the code comes up a form to register to events. the form is hidden until user selects a place and date via select. this is triggered like so:
<span ng-show="myForm.locationDate.$valid">
my issue now is: this shows up all hidden form elements when one select is valid.
how can i set the scope to only this one changed?
Since ng-repeat creates a new scope, changing ng-show/ng-hide conditions to scope bound properties will work perfectly (example).