I have added Radio Button group by using Vaadin designer to my view :
<vaadin-radio-group value="Line" id="vaadinRadioGroup" style="margin-left: var(--lumo-space-s);">
<vaadin-radio-button name="Line" style="flex-grow: 0; align-self: stretch;" checked>
Line
</vaadin-radio-button>
<vaadin-radio-button name="Heatmap" checked>
Heatmap
</vaadin-radio-button>
<vaadin-radio-button name="Both" checked>
Both
</vaadin-radio-button>
</vaadin-radio-group>
And in my java code :
vaadinRadioGroup.addValueChangeListener(radioButtonEvent -> {
System.out.println("The event is triggered.......")
});
The change in the radio button value does not trigger the changeValueEvent. Anything I am missing here??
A bit closer look revealed the problem: with a radio button group you can't declare the data in the design itself if you want to be able to use it from the Java side as well. You should do that from the Java side using e.g. setItems() or adding a DataProvider. If you do that, the individual radio buttons won't be visible when you look at the design, but they'll be there when you run the application.
Related
I am using the mat-tab-group from https://material.angular.io/components/tabs/overview.(used complex labels approach with ng-template)
The tab contains a name of the tab and a button to close the tab.
Whenever i focus the tab, it reads both aria-labels of name and a button. When tab is focused, it should read only the name but not the close button aria label. When tab is focused currently and then clicking on tab will focus the close button, at this time it should read the close button aria label.
How to do this ?
Code:
<mat-tab-group dynamicHeight [(selectedIndex)]="activeTabIndex" (selectedTabChange)="changetab($event)">
<mat-tab *ngFor="let tab of Tabs; let i = index" [label]="tab.name" [attr.sortColumn]="tab.sortBy" [attr.sortOrder]="tab.sortOrder"
[attr.viewId]="tab.id" [attr.viewObjectID]="tab.viewObjectId" attr.aria-label="{{tab.name}}">
<ng-template mat-tab-label>
<div class="tab-container">
<div class="somestyle">
<span class="tab-name" [matTooltip]="tab.name">{{tab.name}}</span>
</div>
<button mat-icon-button tabindex="0" id="{{tab.id}}" class="close-btn" (keyup)="closeTab($event,view)" (click)="closeTab($event,view)" attr.aria-label="{{closetab}}">
<mat-icon class="material-icons">cancel</mat-icon>
</button>
</div>
</ng-template>
</mat-tab>
The output of this : I am using "jaws" for screen reading tool. When we focus on tab, it reads tab name and close button label ( attr.aria-label="{{tab.name}}" and attr.aria-label="{{closetab}}").
Do you need to use aria-label at all?
The WAI-ARIA Practices document has this at the top of its "Read Me First" section:
No ARIA is better than Bad ARIA
The mat-tab-group examples simply use a text node inside the tab (which is a button with role="tab") for the accessible name. That should be adequate. Let the visual label be the accessible name, if possible.
The only reason you should use aria-label on a button is if the accessible name should be different from the button label. e.g. in cases where only an icon or unicode glyph is used as the visual label, in place of human-readable text.
In all other cases, just put the accessible name in a text node inside the button. (You may of course wrap it in span or other inline elements - as the mat-tab-group example does, if you need more refined styling).
This is true of other GUI controls too, although the visual label mechanism differs between element types. (e.g. The <input> element needs a corresponding <label>, which is both visible and understood by screenreaders because of the for attribute.)
If you must use aria-label, make sure it is on the element that gets focus, otherwise the screen readers will each try to guess what you want the accessible name to be, with unpredictable results. I suspect this is what you are experiencing.
Also, if I am not mistaken, you are adding the 'body' of the tab (including the close box) to the focusable tab itself. This is not the correct structure. Again, let the mat-tab-group example be your guide.
You should be able to overwrite what is read on focusing the entire tab, if you add an aria-label="Your preferred text here" to the tab element.
I am trying to implement rowDetails functionality of jqxTreeGrid, my rowDetailsRenderer function returns something like :
return '<input type="radio" name="group1" checked="checked">';
Its not showing as checked. Event after the grid is loaded, I am not able to 'check' it through firebug as well. But its getting checked once I click it. Same behavior across firefox/IE/Chrome.
You have to put your checkbox inside a table
View this example: JqxTreeGrid rowdetail with checkbox
I currently have a dropbox that lets users select from several numerical values. However, I'd also like to give them the option to enter a custom numerical value, and toggling between these options with a checkbox.
In Android, you could do this with a Checkbox's onClick method, and toggle these other fields (the dropbox and the text field) to enabled or disabled. I'm a bit new at Rails development, and I was just wondering if something like this would be possible?
Here dropbox mean dropdown ?
You can do his by calling a JS function on checkbox click
You can use CSS3 to toggle between 2 different form elements.
.my-checkbox + input[type=range] {
display: none;
}
.my-checkbox:checked + input[type=range] {
display: inline;
}
The above CSS code will hide the <input type="range"> element immediately after it, if only the checkbox with the class my-checkbox is checked.
I'm having a little trouble dynamically changing a button's theme dynamically. From a different post I learned to use:
<input type="button" data-inline="true" data-mini="true" data-theme="c" id="my-button" value="Save">
<script>
$("#my-button").buttonMarkup({ theme: 'a' }).button('refresh');
</script>
Technically this works, until I mouse over - then the button falls back to data-theme "c". Is there a better way to dynamically change theme?
if you use a button as below
Save2
You can change the theme as below
$('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c");
check out a live fiddle here http://jsfiddle.net/mayooresan/jfDLU/
I tried to find the answer for this one, but came up with this solution after looking into the DOM structure. I created the below function for toggling the theme on click the button. the hover class needs to be addressed only when changing the theme of the same button you are clicking.
These seems to work for input type button element. (jqm version 1.3.2)
function changeButtonTheme(buttonSelector,toTheme){
var currentTheme = $(buttonSelector).attr('data-theme');
var parent = $(buttonSelector).parent();
$(buttonSelector).attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
parent.attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
//parent.removeClass("ui-btn-hover-"+currentTheme).addClass("ui-btn-hover-"+toTheme);
}
Im using horizontal radio buttons in jQuery mobile:
http://jquerymobile.com/test/docs/forms/radiobuttons/
When you make the fieldset horizontal the style changes and the round 'selected' bit goes away. Can this behavioral be disabled so it users the normal jQuery mobile styling?
Yes, but not in a easy way. This much I can remember. I don't have an example with myself, also don't want to rewrite it again.
First, what you need is a firebug plugin (or something similar) for Firefox or Chrome.
I. Horizontal radiobuttons have a disabled span used for round selection img. Enable it by giving it a display: block-inline (in that case give other div the same property, this will allow them to be in line, in other case they will overlap) or give both of them display: block; a float them to the left (don forget position: relative) .
I am talking about this:
<span class="ui-btn-text">List</span>
<span class="ui-icon ui-icon-radio-off ui-icon-shadow"> </span>
Top one is a text span and bottom one is an icon holder. Bottom one is disabled (display: none;) in case of horizontal group.
II. Second thing, on click/select prevent background color change. This will leave you with horizontal version of vertical radiobutton control group.
Hope this helps.