If the totalPageCount is greater than 11, i want to show the next button.
I gave the condition as thymeleaf expression but it does not work properly.
here is example.
ex ) totalPageCount =7
<span th:if="${11 > totalPageCount}"></span>
--> 11 < 7 .
Because it is false, the button should not appear. but button is visible.
What can i do?
Related
in my rspec feature I try to check a checkbox with it related label because the input is hidden. My label contains link (<a> tag), so every time I use check('user[agree_terms]', allow_label_click: true) it never checks the box but instead open the link contains in the label.
Here's my view generated from ERB
<p class="col boolean required user_agree_terms">
<input name="user[agree_terms]" type="hidden" value="0">
<input class="boolean required" required="required" aria-required="true" type="checkbox" value="1" name="user[agree_terms]" id="user_agree_terms">
<label class="boolean required" for="user_agree_terms">
<abbr title="required">*</abbr>
J'ai accepté les <a target="_blank" href="https://somelink">Conditions Générales d'Utilisation</a> et la <a target="_blank" href="https://somelink">Politique de Confidentialité</a>
</label>
</p>
Here's my spec
# I tried both but its behave the same way : open the <a> tag
find('label[for="influencer_agree_terms"]').click
check('influencer[agree_terms]', allow_label_click: true)
Do you know another way to check that box ?
By the way the UI on browser work correctly when I click the label.
When you tell Capybara to click on an element it clicks in the middle of that element which in this case is where you have the conditions link, so that takes the click before the label element. One option would be to specifically click on the abbr element, which is in the label but away from the link
find('label[for="influencer_agree_terms"] abbr').click
Another option would be to take advantage of the fact that allow_label_click supports specifying offsets for the click location
check('influencer[agree_terms]', allow_label_click: { x: 10, y: 10 })
Depending on the setting of Capybara.w3c_click_offset that offset could be from the center or from the top left corner of the label element so adjust the values as necessary. Technically you can do the same thing when calling click
find('label[for="influencer_agree_terms"]').click(x: 10, y: 10)
but it's generally better to use check when dealing with a checkbox
By default capybara #click method will click in the middle of the element, right where my link is located.
Fortunately #click has offset option as follow #click(x: 0, y: 0).
So to check a box with the help of its label containing link :
find('label[for="influencer_agree_terms"]').click(x: 0, y: 0)
How to hide the X button present at the top from the ant d modal, also how can I disable the behavior of closing the modal using ESC key
return (
<Modal
title={modalHeader}
okText="EXIT"
cancelText="CONTINUE"
visible={visible}
onCancel={onCancelHandler}
onOk={exitUser}
width={600}
cancelButtonProps={{hidden:isExFlag}}
>
<DescriptionParagraph>
{modalBodyText}
</DescriptionParagraph>
</Modal>
);
Based on the documentation version 4.6.6
to hide the X button present at the top from the ant d modal, use the prop closable
<Modal closable={false}>...</Modal>
to disable the behavior of closing the modal using esc key, use the prop keyboard
<Modal keyboard={false}>...</Modal>
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 have a button, upon clicking it will change the display of a div from none to block. I wanted to click on the button, have the div displayed as 'block', click "Done" and then the div's display become 'none'. Capybara was able to click on the 1st button but it couldn't seem to find the 2nd button "Done". I tried several ways:
click_on("Done")
find_button("Done").trigger('click')
find_button("Done").trigger('click')
find_link("Done").trigger('click')
I even tried to use javascript:
page.execute_script("document.getElementById('button_done').click()")
but nothing happens. I printed out the display property of the pop-up div prior to the clicking "Done" and after the clicking to check if the button was click but both statements gave me the div's property as 'block' (expected 'block' before clicking "Done" and changed to "none" after the clicking).
I allowed it to sleep(10) but doesn't seem to help.
I used the same javascript on the page console and it worked as it should be.
Any inputs?
Thanks
EDIT:
feature:
Given I click on "Create an item"
And I chose an option
Then I should be able to create an item
steps:
step "I chose an option" do
within ('#web') do
click_on "On"
end
sleep 3
#Here is where the div gets displayed with the 'Done' button
find('#button_done').click #(doesn't work though)
sleep 3
click('Create')
end
try find('selector', :visible=>false)
I'm starting with jQuery mobile and have some problems with my buttons.
The web application is a shopping list. It displays a list of items to shop and in the footer buttons on actions I can perform on the items.
The actions are:
increment number of items to buy
decrements number of items to buy
move item up in list
move item down in list
add new item
delete item
modify item text description
The actions are implemented in javascript and works fine. The problems I have is with controlling the buttons and the associated actions.
By experience, I have see that for the increment and decrement it is more convenient to have a button with an active state, for the other operations it is preferable to have a selected item and apply the action on the selected item when the button is pressed. When adding an item, the item would be inserted before the selected item, and if pressed when no item is selected, the new item is appended to the list.
I would also like to have 2 modes. In one mode, only the increment and decrement buttons are shown and the user can update the number of items in its list. In the other mode the user is modifying its list. It is in the second mode that the selected item is required.
I managed to associate a default action my item lists by using the .on() method as a delegate.
$('#itemList').on( "click", ".item", function(evt)
{ ctrl.doAction($(evt.currentTarget)); });
Here is the html code I use to test the first mode.
<!-- footer -->
<div data-role="footer" data-position="fixed" class="ui-bar" id="btnBar" >
Plus
Minus
</div>
<!-- /footer -->
What should I put as href value ? I don't want the page to be reloaded. In some examples I see "#".
This is how I associate the action to the button:
$('#btnPlus').on( "tap", function(evt)
{ ctrl.doAction = ctrl.increment; });
Another problem I have is that there is no feedback on the button click action. When I click a button I would expect to have it highlighted for a short time. This doesn't happen.
The browsers have also different behaviors. In firefox, the clicked button gets a blue halo apparently showing that it has the focus. But the button isn't displayed as active.
If I put "#!" as href (don't know what it means) on Android, the clicked button is shown active.
Should I use click or tap as event type ? How could I write click or tap ?
How could I implement a two state button displayed as active and inactive ?
How is an action button used : always displayed inactive and feedback when pressed ?
I solved the problem my self.
to switch between sets of buttons in the footer, I create multiple footers in my HTML document with style="display:none" in the hidden footers. The one without this will be shown. I assigned a specific id to each footer so that I can write $("#footer1").hide(); $("#footer2").show();
I have buttons to switch between footers. The footer switching event handler must be called with the "mouseup" event. This is required for it to work on the iPad and Android phones.
To change appearance, don't use .button() as suggested here. Use:
$("#myButton")
.removeClass( "ui-btn-up-a ui-btn-down-a ui-btn-hover-a" )
.addClass("ui-btn-up-b")
.attr( "data-theme", "b" );
Note: There was a bug in my code which caused desperate hair pulling