I am attempting to create a dropdown list in Angular containing sub-items (as in the image but with all options selectable). Does anybody please know how to achieve this in Angular using the < select > tag so that I don't have to change other code within my application, as I would if changing to an unordered list etc.
Thanks :)
dropdown list with sub-items
Consider using the groups of options provided by Angular/Material library. See the demo.
Use class= "dropdown-submenu"
<div class="btn-group dropdown">
<button class="dropdown-toggle">Toggle</button>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="dropdown-submenu">
Sub List
<ul class="dropdown-menu">
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
</ul>
</li>
</ul>
</div>
or refer this https://mdbootstrap.com/support/general/how-to-create-a-nested-dropdown/
Grouping sub-items can be achieved using angular material library.
For multi select drop down you just have to add multiple property in select tag element for selecting multiple options.
see the stackblitz demo for reference.
For more such functionality using angular material, please refer angular material
Related
I have 3 menus with subitems in my navbar, those subitems are linked to specific sections id of the main page as such:
<ul id="navbar">
<li id="idli1" class="listli">
navbar-Item1
</li>
<li id="idli2" class="listli">
navbar-Item2
<ul class="sublist">
<li id="idsubli1" class="sublistli">
sub-Item 1</li>
<li id="idsubli2" class="sublistli">
sub-Item 2</li>
<li id="idsubli3" class="sublistli">
sub-Item 3</li>
</ul>
</li>
<li id="idli3" class="listli">
navbar-Item3
</li>
</ul>
On desktop everything works fine.
On mobile the link seems to not be valid, the formula https://www.site.co/page/#id doesn't work.
Clicking on the submenu just close the submenu.
If i remove the section id from the link, the subitem works and goes to the page.
you can check the menu here
am i missing something about mobile and anchors?
i really don't understand what is the problem about those links.
on mobile your navbar collapse from what I have seen so maybe its being assigned an id that you have used in your menu already thus the link won't work - ids should be unique
I have a list of agenda items I want to display.
For that I would use a simple ul.
The thing is that within this list I have grouped the items by month. So in general they are sorted by date and now they are also grouped by month.
Example:
January 2010
- Item 1
– Item 2
February 2010
- Item 3
– Item 4
March 2010
- Item 5
– Item 6
How could I make this information more accessible.
I found this POST about role="group" which seems to be right here?!
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role
So would the following structure make sense?
<ul>
<li role="group">
<h3>January 2010</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li role="group">
<h3>February 2010</h3>
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
Or how would I make clear that the nested ul is a group.
Or would I leave away the nested uls, build everything with a single ul with equal li for every entry?
Or would I do something like:
<div role="list">
<div>
<h3 id="label-1">January 2010</h3>
<ul aria-labelledby="label-1" role="group">
<div role="listitem">Item 1</div>
<div role="listitem">Item 2</div>
</ul>
</div>
<div>
<h3 id="label-2">February 2010</h3>
<ul aria-labelledby="label-2" role="group">
<div role="listitem">Item 3</div>
<div role="listitem">Item 4</div>
</ul>
</div>
</div>
I would be very glad for some inputs.
Thank you in advance.
cheers
role="group" is not intended for use on non-interactive items. It is designed to group controls such as inputs, buttons together or for grouping elements that are related.
Your third example is closest to the way this should be structured. The headings are great for quick navigation (as heading levels are one of the primary ways screen reader users navigate a page) and the relationships are created within the HTML itself, removing the need for any extra WAI-ARIA.
Yet again there is no need for role="group".
The following example would be perfectly acceptable and accessible. I have change it to a set of listed <ul> and <li> as that is semantically correct and removes the need for any WAI-ARIA there also. (Golden rule, use semantic elements if you can as support is 100% for those, support for WAI-ARIA is a little patchy still. and so should be used for complimentary information / if there is no way to achieve the desired document structure / relationships using standard HTML5 elements.)
Obviously if the Items 1 to 4 are interactive elements and you have left that out for brevity then that is a different matter entirely and I will change this answer.
<ul>
<li>
<h3>January 2010</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
<h3>February 2010</h3>
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
I'm thinking about a navigation menu where some item are just label for the subnav. For example:
<ul>
<li>Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</ul>
</li>
...
</ul>
In this case "Item 1" is just a trigger that, on hover, shows the subnav list, but it actually does not link to any page. I see this kind of structure very often (usually with e.preventDefault() applied to click event).
Is it right to use an anchor tag here? Or would it be more correct to use another tag, like, for example, a span tag? Or something else?
An anchor tag can be focused pressing tab key, but it actually wouldn't link to a page. On the other side, a span tag is not focused on tab key, so it doesn't give context to subnav anchors.
You should note that "#" is not a valid URL: https://www.webaccessibility.com/best_practices.php?best_practice_id=946
But you can perfectly use an anchor to the submenu as it reflects your navigation
<ul>
<li>Item 1
<ul id="subnav1" tabindex="-1">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</ul>
</li>
...
</ul>
EDIT: As pointed out by a comment, the tabindex=-1 attribute should be set on an ul element in order to be keyboard accessible.
Its good practice to follow uniform html structure as you have posted in the question. In case "Item 1" is not a link, you can use tabindex=-1 attr anchor tag to avoid focus on the tab button press.
<a class="yourclassname" href="#" tabindex=-1 rel="nofollow">Item 1</a>
In javascript, you can have this small piece of code to avoid hash from appearing in the browser address bar.
addEventListener('click', function (e) {
if (e.target.classList.contains('yourclassname')) {
e.preventDefault();
}
});
I think that, in your situation, using a <button> element provides the best semantics and keyboard navigation.
However, after a lot of experimentation, I've concluded that the best screen reader support comes from the types of structures shown by the Open Ajax folks and Terril Thompson. Their examples get the best speech feedback from ARIA.
You will notice that they do not use <a> or <button> to toggle the subnav list. See Terrell's sample.
Notice the “About” <li>:
<ul id="nav" class="menubar root-level" role="menubar">
<li class="menu-parent" role="menuitem" tabindex="0" aria-haspopup="true" title="About Menu">
About
<ul id="about" role="menu" class="menu" aria-hidden="true">
<li role="menuitem" class="menu-item" tabindex="-1">
// etc. //
The <li> is made focusable and clickable with the tabindex attribute and JavaScript event listeners.
The advantage that I see is that the ARIA works best when the focus is on an element that is the parent of the sublist.
The W3 docs have a nested list example prefixed by DEPRECATED EXAMPLE:, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.
So which of these ways is the correct way to write an HTML list?
Option 1: the nested <ul> is a child of the parent <ul>
<ul>
<li>List item one</li>
<li>List item two with subitems:</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Final list item</li>
</ul>
Option 2: the nested <ul> is a child of the <li> it belongs in
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
Option 2 is correct.
The nested list should be inside a <li> element of the list in which it is nested.
Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.
Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol.
The description list (HTML5 dl) is similar,
but allows both dt and dd elements.
More Notes:
dl = definition list.
ol = ordered list (numbers).
ul = unordered list (bullets).
Official W3C link (updated).
Option 2
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
Nesting Lists - UL
Option 2 is correct: The nested <ul> is a child of the <li> it belongs in.
If you validate, option 1 comes up as an error in html 5 -- credit: user3272456
Correct: <ul> as child of <li>
The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is nested.
<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>
W3C Standard for Nesting Lists
A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article:
Chapter One
Section One
Section Two
Section Three
Chapter Two
Chapter Three
The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this:
<ol>
<li>Chapter One
<ol>
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li>
<li>Chapter Two</li>
<li>Chapter Three </li>
</ol>
Note how the nested list starts after the <li> and the text of the containing list item (“Chapter One”); then ends before the </li> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website.
Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages.
If you validate , option 1 comes up as an error in html 5, so option 2 is correct.
I prefer option two because it clearly shows the list item as the possessor of that nested list. I would always lean towards semantically sound HTML.
Have you thought about using the TAG "dt" instead of "ul" for nesting lists? It's inherit style and structure allow you to have a title per section and it automatically tabulates the content that goes inside.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
VS
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
What's not mentioned here is that option 1 allows you arbitrarily deep nesting of lists.
This shouldn't matter if you control the content/css, but if you're making a rich text editor it comes in handy.
For example, gmail, inbox, and evernote all allow creating lists like this:
With option 2 you cannot do that (you'll have an extra list item), with option 1, you can.
well, I am trying to write parallel checkbox menus in html, but somehow my logic is not helping. May be some of you experts can just help me a bit. This is how I want my menus to look
[] Menu 1 [] Menu 2
[] Item 1 [] Item 5
[] Item 2 [] Item 4
Item 1, 2 are under Menu 1 and 5,4 are under Menu 2. Square brackets indicate checkboxes.
Items under menus are actually collected dynamically and their numbers under different menus can vary.
I would suggest using lists and floated divs. Lists can make it easy to nest as many checkbox trees as you'd like.
<div style="float:left;">
Menu 1
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
</ul>
</li>
</ul>
</div>
<div style="float:left; margin-left:30px;">
Menu 2
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
</ul>
</li>
</ul>
</div>
This would have double nesting. You can make as many checkboxes as you want at a certain indent interval by just adding more list items <li> to a given unordered list <ul> tag.
If your question is only about HTML and CSS, you can use padding and margin attributes to make appropriate indent.
If yuor question about programming logic for generating such tree structure, write please what language you are using.
You might want to look at the jquery library jstree. I use that for my treeview, it's definitely the most advanced treeview available.
it is amazingly configurable, and easy to use.
it has a checkbox plugin that I use in my project. That works perfectly for me.
The development is very active, so even if you might find an issue, the developer is very reactive and will help you.
take a look here : http://jstree.com
and the checkbox demo is here
good luck :)