Is there a way to exclude one of the type of contextMenu if they overlapping?
example:
I have two context items, editable and selection.
In situation when both of those types match, (selection inside editable)
Chrome gives sub-menu for both actions.
I would like to have only one.
How can I prioritize or exclude one of those types in this specific situation?
If the menu item types are identical (i.e. same type, type, etc.), then you can declare the context menu and specify multiple contexts. Then the menu item will show up if any of the contexts match.
You've however stated that you really need separate context menu declarations:
Menu item with title "Make note" for the "selection" context.
Menu item with title "Insert note" for the "editable" context.
Menu item with title "Make note" when both contexts apply, e.g. when text is selected in an input field (so without the "Insert note" menu item).
The contextMenus API does not directly support this use case. So the next best alternative is to remove the context menu for the "editable" before the context menu appears in the third situation (and restore the context menu when the third situation is no longer relevant).
In your situation, I would use selectionchange to detect when the user (de)selects text. Upon selecting text, check whether an input field is in the selection (to do so you can combine the Selection, Range and/or DOM (traversal) APIs). If you find an input field, remove your desired context menu item.
Regardless of whether you find a menu item, add listeners for key and/or mouse events to detect whether the user's pointer is on an input field.
Here is an example that uses selectionchange (https://stackoverflow.com/a/13673942/938089) and another one for Showing context menu buttons only when right-clicked on classes that start with “Story”.
Related
I have a 20-25 names coming from API where I'll need to show them in a drop down box (requirement). I'm using Vue v-autocomplete here to display the selected names on the field. I've used custom item called Select All where the user can select all the names in the drop down list, but what I also need to do when the user clicks on Select All is that I don't want to show all the names in the Autocomplete field including Select All Chip. Only items that are selected individually without Select All should show as Chips.
Here is my code sandbox I've attempted so far. I'm new to Vue js, so I'm hoping to get some thoughts on controlling the chips on v-autocomplete.
v-autocomplete sandbox
Instead of including "Select All" in the array of names, you can use the prepend-item slot to include a separate Select All checkbox.
If you need to differentiate between names selected via individual click and those selected via the Select All checkbox you will probably need a new property in the names array to track that, say a boolean that is true if selected one way and false the other.
You'll also need a slot like selection to customize the display of your chips where you can use v-if to conditionally render a chip based on that new boolean property.
This codesandbox I believe is pretty close to what you're after
I have a expandable div element which is expanded when user clicks.
How can i make it accessible through screen readers.
Below is my code
HTML
<div class="expandable" (click)="expandItem()" attr.aria-expanded="isCollapsed">
Some content to show on expand
</div>
JS:
expandItem() {
this.isCollapsed = true
}
variable isCollapsed is set to false initially.
I might be showing my javascript ignorance but I haven't seen (click)="expandItem()" or attr.aria-expanded="isCollapsed" before. I have seen onclick="expandeItem()" and aria-expanded="false". But I'll ignore that aspect for now.
First off, your <div> has no semantic meaning so you'll need several ARIA attributes to fix that. But before you do that, consider the "First Rule of ARIA Use", which is essentially to not use ARIA. Use native semantic HTML elements as your first choice if possible.
I'd need more information on your scenario but consider using a real <button> instead of a <div>. It sounds like you might have a "disclosure widget".
If a real <button> is not used, then your <div> will need:
tabindex="0" (to allow keyboard focus to move to it)
a click handler (for mouse users)
a keyboard handler (for keyboard users to use space and enter to select it)
a role="button" so a screen reader announces the proper semantics
(I'm assuming your <div> has a label)
In addition to that, then you need to resolve your aria-expanded issue. In the onclick of the button (or div), just toggle the value of aria-expanded. Since that attribute is a "state" (instead of a "property"), changing its value will be announced automatically by screen readers.
I am implementing accessibility for dropdown component, the special feature of my dropdown is it populates values in options menu only while opening dropdown,meaning it on the fly compiles the template and attaches to the dropdown box.
Dropdown HTML:
<div id="dropdown" ng-click="openDropdown()">
<div id="selectedValue" role="listbox" tabindex="0" aria-label="{{selectedVal}}" aria-owns="dropDownMenu">{{selectedVal}}</div>
</div>
DropDown Menu template(which gets compiled and polpulated after clicking dropdown above) :
<div id="dropDownMenu">
<li ng-click="selectItem()" role="option">item1</li>
<li ng-click="selectItem()" role="option">item2</li>
</div>
I am facing two problems
As my #dropdownMenu gets generated on click of #dropdown(dynamic template generation) jaws do not have access to #dropdownMenu when focus comes to #selectedValue so it doesn't announce the number of options etc as in case of a typical selectbox.
I am giving aria-label="{{selectedVal}}" for #selectedValue so on click of arrow keys javascript takes care of updating selectedVal even though #dropdownMenu is not open ,but changed value of selectedVal is not announced by jaws 16.0 ,it only announces it only first time as user tabs into it .Noted that this works fine in jaws 14.0 .
Looking forward for some solutions....
Adding aria-live=polite should fix this.
Is there a reason you're not using a standard select box and populating the option elements with your dynamic content? That would remove the need to update an aria property with the current option, as screenreaders will find it themselves. Also aria-label should be the name of the selectbox (or its purpose) not its selected option. If you were using a HTML select with options you could then remove the tabindex and aria-live as well, since native form inputs have full keyboard and screenreader support by default.
You should probably wait until the element is rendered and appeared in the DOM and only then set the focus to the first submenu item by using a native function .focus(). That will do the job.
But... Make sure that if the request takes too long and the user has already left somewhere else doing something else on the page, that in this case you don't steal his focus to get him back to the dropdown menu otherwise he might be annoyed.
Also instead of tabindex=0 for interactive elements (wherever you use ng-click) I would recommend that you use the actual native elements such as <a> or <button>. That way you ensure that the elements will be focusable both by keyboard but also visually, and react to ALL keyboard keys which the users are used to use and thus expect it to react such as SPACE or ENTER without needing you to implement it manually.
I have a Dojo Tree and a related Dojo Menu. I want this context menu popup for certain types of nodes and not for the others. The Tree is not static and items are added at runtime.
Is there an Event (onBefore) of Menu that is fired before popping up and behaves according to your return value ?
Is there a Property of Menu that keeps it silent for some time ? Like I have this Tree.onMouseDown handler and if the item right-clicked should not show a context menu, then I untrigger the Menu or it ignores the RightClick so that it does not popup ?
dijit/Menu has a property called "targetNodeIds". It's an array of target node IDs that you can populate at startup.
Subsequent nodes can be attached through dijit/Menu's "bindDomNode(node)" method.
There is also a "selector" property for dijit/Menu, that allows you to specify a class on the nodes you want to use as a target. Just create your tree nodes with a particular class and set this class name to be the "selector" property.
See http://livedocs.dojotoolkit.org/dijit/Menu#attaching-to-multiple-nodes
I have two drop down menus that I want populated with identical data depending on what is selected on the parent drop down menu. Right now, I am using a javascript library that populates one child drop down menu based on a parent, but I need to have two drop down menus populated simultaneously.
This javascript library contains a function called PrintOptions that is supposed to populate the dropdown menu when something is selected from the parent menu. I have tried calling the same function twice one for each drop down menu, but it doesn't seem to be working.
This is where I got the library: http://www.javascripttoolbox.com/lib/dynamicoptionlist/documentation.php
Reading the document you list, it seems there's a section that allows you to specify multiple child components from the parent:
To create the DynamicOptionList object, pass the names of the fields that are dependent on each other, with the parent field first.
Create the object by passing field names
var dol = new DynamicOptionList("Field1","Child1","Child2");
Or create an empty object and then pass the field names
var dol = new DynamicOptionList();
dol.addDependentFields("Field1","Child1","Child2");
Instead of trying to call the function more than once, just add the 2nd child component's name to the DynamicOptionList constructor, as in the first example above. As I read the docs that means whatever happens to Child1 will also happen to Child2 when Field1 is selected.
In the event handler you have for your parent drop down, you are probably having some other code populate that child drop down. Simply add the code again, but instead reference the second drop down. That's the rough approach. There are some details and style guidance I'm leaving out, but that'll get the job done.