I have two array and I want to display them in a
conversation manner using ng-repeat
assume two array are defined like this
messages_send = ["hi","good, How about you?","cool","LOL","NFW"]
messages_received = ["hey, How are you?","good, Thanks","hmmm","asdfsda"]
<ul>
<span ng-repeat="i in [0,1,2,3,4]">
<li>
messages_send[i]
</li>
<li>
messages_received[i]
</li>
</span>
</ul>
I did it that way and it wroked only problem is it messed up the conversation layout I had. Is there another way to do this I mean iterating through two arrays using ng-reapet without messing up the layout ?
Thanks
You could do some variation of this but you'll need to error check the array to make sure it has the same number of elements. I'm just using an ng-show for that error check but something like this:
<ul>
<span ng-repeat="msg in messages_send track by $index>
<li>
{{msg}}
</li>
<li>
<span ng-show='messages_received.length>=$index'>
{{messages_received[$index]}}
</span>
</li>
</span>
</ul>
Related
I'm trying to make a project fully accessible, but the screenreader reads some elements from my list multiple times.
Edit: It seems this issue only happens in google chrome
this is the source code:
<ul class="o-contact__list">
<li *ngIf="page?.result?.fields?.contactAddress">
{{ page?.result?.fields?.contactAddress }}
</li>
<li *ngIf="page?.result?.fields?.contactEmail">
{{ page?.result?.fields?.contactEmail }}
</li>
<li *ngIf="page?.result?.fields?.contactTel">
{{ page?.result?.fields?.contactTel }}
</li>
<li *ngIf="page?.result?.fields?.contactPrice">
{{ page?.result?.fields?.contactPrice }}
</li>
</ul>
And this is the HTML output:
<ul class="o-contact__list">
<!--bindings={"ng-reflect-ng-if": "mainstreet 123"}--><li>
mainstreet 123
</li>
<!--bindings={"ng-reflect-ng-if": "info#email.com"}--><li>
info#email.com
</li>
<!--bindings={"ng-reflect-ng-if": "tel.: 555 7125"}--><li>
tel.: 555 7125
</li>
<!--bindings={"ng-reflect-ng-if": "free"}--><li>
free
</li>
</ul>
For some reason the first item gets read 3 times. The 2 following items get read twice, and the last item only gets read 1 time.
I have found the problem lay in the styling.
The list-items had a ::before which cause the issue with the multiple readings. I changed it to ::after which solved the problem .
I don't know exactly why this is tho so if someone still know the answer to this I would love to hear!
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I want to find every Child-node of an element thats in the n-th position, eg. in:
<span class="passive match" id="1"></span>
<ul>
<li>
<span class="active match"></span>
<ul>
<li>
<span class="active match"></span>
</li>
</ul>
</li>
</ul>
<span class="passive match" id="2"></span>
<ul>
<li>
<span class="passive match"></span>
<ul>
<li>
<span class="active"></span>
</li>
</ul>
</li>
</ul>
I want to find both "active match" li Child of the ul next to the span "passive match"
Something like:
span.passive.match + ul:'has-Child'(span.active.match) {CSS here}
But the corresponding span.active.match can be a 3rd/6th/9th/12th etc. child-element from "passive match". Is there a CSS-Selector that can handle this or do I need to write a jQuery-Script that does it (which would be inefficient I'd say as I would need a recursive function that may run across 10k+ elements)?
Basically i have a tree filled with folders (.passive) and data (.active) and i want to display every data thats matched with a given filter (.match) and its path but want to hide every folder that has no child thats matching the filter. So the span with id="2" should be hidden, while the id="1" should show up in my dom structure. As the tree is generated by a plugin with private function and is used in multiple situation i cant just edit/ overwrite it but have to either use the CSS-Selectors to hide the unnecessary objects or use a javascript-script to do so. Maybe you'll have a better idea.
For this you need the :has() pseudo-class…
span.passive.match + ul:has(span.active.match)
… but it is not a standard (it is in draft status) and no browser currently supports it.
In the meantime, alter your HTML so there is a class on the ul.
Ideally, do this when you generate the HTML, but you could modify it after the fact with JavaScript.
$(".active.match").parents("ul").addClass("contains-active-match");
span.passive.match + ul.contains-active-match {
background: pink
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="passive match" id="1">a</span>
<ul>
<li>
<span class="active match">b</span>
<ul>
<li>
<span class="active match">c</span>
</li>
</ul>
</li>
</ul>
<span class="passive match" id="2">d</span>
<ul>
<li>
<span class="passive match">e</span>
<ul>
<li>
<span class="active">f</span>
</li>
</ul>
</li>
</ul>
I often need to use a step indication to display the step the user is on, or the progress of a package in transit, etc.
Like this:
This is made up of an unordered HTML list.
<ul class="progress-tracker progress-tracker--text progress-tracker--center">
<li class="progress-step is-complete">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 1</h4>
Summary text explaining this step to the user
</span>
</li>
<li class="progress-step is-complete">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 2</h4>
Summary text explaining this step to the user
</span>
</li>
<li class="progress-step is-active">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 3</h4>
Summary text explaining this step to the user
</span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 4</h4>
Shorter summary text
</span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 5</h4>
Shorter summary text
</span>
</li>
</ul>
Assuming a new list is loaded on each page (i.e. "step"), is there a way to adapt this for screen readers/assistive technology?
It would be nice to have the reader read the current step to the user, at least.
Are the steps static or can the user click on a previous step to go back?
If the progress indicator is interactive, then enclose the whole thing in a <nav> element. Your progress indicator would be similar to a breadcrumb trail. The <nav> should also have an aria-label and the current step in the process should have aria-current. So it might look something like:
<nav aria-label="progress">
<ul class="progress-tracker progress-tracker--text progress-tracker--center">
<li class="progress-step is-complete">
...
</li>
<li class="progress-step is-complete">
...
</li>
<li class="progress-step is-active" aria-current="true">
...
</li>
...
</ul>
</nav>
However, your code snippet didn't include any links so I'm guessing your progress indicator is static and not interactive. In that case, don't use a <nav>, because you can't navigate with your indicator, but you could still group the elements together. Having an unordered list is a type of grouping, but sometimes a screen reader will not read the aria-label on a list.
<ul aria-label="progress">
You could work around the issue by having:
<div role="group" aria-label="progress">
<ul>
<li>
...
</li>
</ul>
</div>
(essentially replacing the <nav> in the first example with <div role="group">.
Since your progress indicator is a series of steps, using an ordered list <ol> would have better semantic information. You can style the list so the default numbers of a <ol> are not displayed (similar to how you're not showing bullet points with the <ul>).
And finally, I would add some "hidden" text for the screen reader to say if the step is completed or not. Visually, you have blue circles for completed steps, an open circle for the active step, and gray circles for not completed. That's all done with CSS (your "is-complete" and "is-active" classes). That same context should be conveyed to screen readers. The open circle ("is-active") is conveyed with the aria-current attribute. Use a "sr-only" type class to add text for a screen reader. (See What is sr-only in Bootstrap 3?)
<div role="group" aria-label="progress">
<ol class="progress-tracker progress-tracker--text progress-tracker--center">
<li class="progress-step is-complete">
<span class="sr-only">completed</span>
...
</li>
<li class="progress-step is-complete">
<span class="sr-only">completed</span>
...
</li>
<li class="progress-step is-active" aria-current="true">
...
</li>
<li class="progress-step">
<span class="sr-only">not completed</span>
...
</li>
...
</ol>
</div>
In summary, the minimal changes you need are to:
maybe switch from <ul> to <ol>
add "sr-only" text to the "completed" and "not completed" items
add aria-current to the current step
I disagree with the answers that were previously added to this question.
The correct way of identifying the current step is with aria-current="step".
While aria-current="page" is valid, is meant to be used in a set of links (for exemple, a breadcrumbs widget or a pagination widget).I highly recommend reading more about the aria-current attribute, including its possible values and when to use it. Your example would then look like follows:
<ol>
<li>Step 1 ... </li>
<li>Step 2 ... </li>
<li aria-current="step">Step 3...</li>
<li>Step 4 ... </li>
<li>Step 5 ... </li>
</ol>
Note: I also recommend you use an <ol> instead of an <ul> as this list of steps has an order.
It doesn't look like any of your content is focusable. I had a similar situation that I've shipped in our angular app that works great with JAWS, NVDA, and VoiceOver. What you can do is wrap your markup in a 'div' container and screen reader specific content like this.
<div>
<span class="sr-only">Step 3 of 5: Summary text explaining this step to the user</span>
...
</div>
The 'sr-only' class hides the copy from the visual UI but allows for screen readers to "see" it in the accessible tree.
.sr-only {
border: none;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
It's important to only make the content available for the step that is currently active.
Hope this helps.
I have an eBay shop and when I make a listing I have a pre made template and I just import information to this template.
I have a short description, features, and specifications. And I need to add automatically <li></li> to every line and a pre made HTML table with custom style, Which will know how to separate with "/" symbol like I have in my private listing tool.
Is this even possible? And if it is any idea how?
I do not believe Magento works in that manner however there is an easy efficient way to accomplish this manually.
Try putting the code in Sumblime text 3 with teh Emmet plugin.
From there you can type a command like ul>li*8 (the 8 is the # of items or <li></li> tags) and then press the tab key.
the results will be
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
From there you can fill in the blanks between the <li></li>.
I am trying to develop/design a main menu/site map for our website.
The brief is that the menu should look like a directory tree and each item on the menu should either expand to reveal more menu items or link to another page on the site.
On top of this, every item should have the functionality to be added to the sites "Favourites" application, so that every user can more quickly find items that are buried deep within the menu structure.
Because of my insane OCD to make sure that everything is done correctly and to the best possible standards, I am having issues getting my markup to be semantically correct and accessible.
Here's what I've got so far:
<ul>
<li>
<ul>
<li>
Collapse "Menu Item 1"
</li>
<li>
Add "Menu Item 1" to Favourites
</li>
<li>
Menu Item 1
<ul>
<li>
<ul>
<li>
<a href="example3.html">Open "Menu Item 1's
First Child"</a>
</li>
<li>
<a href="example4.html">Add "Menu Item 1's
First Child" to Favourites</a>
</li>
<li>
<a href="example3.html">Menu Item 1's First
Child</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="example5.html">Open "Menu Item 1's
Second Child"</a>
</li>
<li>
<a href="example6.html">Add "Menu Item 1's
Second Child" to Favourites</a>
</li>
<li>
<a href="example5.html">Menu Item 1's Second
Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
Expand "Menu Item 2"
</li>
<li>
Add "Menu Item 2" to Favourites
</li>
<li>
Menu Item 2
</li>
</ul>
</li>
<li>
<ul>
<li>
Open "Menu Item 3"
</li>
<li>
Add "Menu Item 3" to Favourites
</li>
<li>
Menu Item 3
</li>
</ul>
</li>
</ul>
As you can see, things start to get very complicated very quickly.
Is this the best way to convey this information or am I over complicating the matter?
Can you think of a better way for me to do this?
IMO you're using this list wrong. Collapse/Open/Add to favs... these elements don't belong to the tree, but you treat them as if they were part of it.
Your tree should has following structure:
<ul>
<li>
<span>menu item 1<span>
<ul>
<li>
<span>child node 1</span>
</li>
<li>
<span>child node 2</span>
</li>
</ul>
</li>
...
</ul>
That's the base of the tree. Now you should add actions (open/add... etc.). They might by placed as another, independent list after span element. Then just use class to separate childNodes list from actions list:
...
<li>
<div>
<span>menu item 1</span>
<ul class="actions"> ... </ul>
</div>
<ul class="childNodes"> ... </ul>
</li>
...
Well... in theory classes aren't required but it's much easier to handle with classes rather ... ul > li > div > ul selectors etc.
According to first comment
Base functionality of the website shouldn't rely on JavaScript. That's why I thing addition of whole tree using JS is bad idea. Actions like add to favs should be available without JS, but you may feel free to take control over that action, and overwrite it's functionality. So in HTML you have:
Add to favs
But using JS you do something like this (pseudo-code):
actionLink.addEventListener("click", function...
var id = take id: 123
do ajax request here
return false;
});
It's the best way to provide good availability and functionality at the same time.
About open/collapse actions. These requires JS by their nature so they can be added to actions list by JS. But once again... remember about "non-JS users". HTML/CSS should display a whole tree - JS should collapse its branches.
Sometimes I do as per Crozin's answer above but on a large site it can be impossible to load such a large tree (I have built systems for sites with over 100k pages).
A hybrid solution is to load in the tree so that the path down to the parent page only contains the current path and then display all the children of the parent. Then add JavaScript behaviour to add additinal parts of the tree.
Doing things this way means that non JS browsing can completely navigate the site but JS browsing gets the enhance functionality, all without the performance hit of building the entire tree.