Multiple tabs and accessibility - tabs

If I want to use more than one tab-system in the same page, or even something more complex - two or more tab-systems one inside the other. How in cases like this I can ensure the user with AT for example, will understand which link belong to which tab-system.
For example:
system01_link01; > system01_tab01;
system01_link02; > system01_tab02;
system01_link03; > system01_tab03;
Inside of the system01_tab02, for example, we have another tab-system:
system02_link01; > system02_tab01;
system02_link02; > system02_tab02;
system02_link03; > system02_tab03;
I know how to mark properly this(or at least I think so :) ) - with role="tablist", role="tab" etc, but is there anything I can use to mark specific relation between tab-links and tabs, so it will help the user in the more complex tab-systems?

Related

how do i create multiple nesting levels with ngx-datatable and ngx-datatable-row-detail

so that when you click on the value in the first column of the main table, an additional one opens, which would also have an additional table.
I'm trying to do something like this in general
<ngx-datatable>
<ngx-datatable-row-detail>
<ngx-datatable>
<ngx-datatable-row-detail>
</ngx-datatable-row-detail>
</ngx-datatable>
</ngx-datatable-row-detail>
</ngx-datatable>
but I have not been able to make a working version. I would like to see an example
perhaps it will be easier to solve this problem using a simple < table >

Thymeleaf conditional with two variables

I am currently trying to hide specific elements, if the creditUser in my app has credit less than the costs of a specific dish. (It's kind of a dish ordering system, just for training purposes) And I cannot figure out how to set up the thymeleaf condition, to make it work...
I've tried all kinds of solutions, but all I can find on the internet is something like this: th:if="*{ score < 20 and score >= 0}"
my current version looks like this:
<td ><a th:if="${creditUser.credit} > ${dish.small}" class="btn btn-success" th:href="#{/order/orderDish/(creditUserId=${creditUser.id},dishId=${dish.dishId},delId=${dish.delId},dishName=${dish.name},price=${dish.small})}" th:text="${dish.small}">Bestellen</a></td>
Now I don't get any error messages, but the element is also not showing up. Any suggestions on how to compare a value in thymeleaf to another value? (The creditUser is passed it is just not shown in the code part and the solution works with fixed values like creditUser.credit > 1)
Everything should be inside the same braces:
th:if="${creditUser.credit > dish.small}"

Multiple form labels - Lightbox

I am editing html codes for web accessibility but I faced one problem about Multiple form labels. I am using Wave plugin to check web accessibility.
Errors is
Multiple form labels
What It Means
A form control has more than one label associated with it.
The problem is that there is a page user can input user info, and a button to call pop up then the pop up has all same fields again to register if user did not input the field.
Instead of changing ID of the field in popup, is there any quick and easy way to remove the error?
From W3Schools:
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
So yes, you need to define a unique ID for each and every component. This is the only clean way to solve your problem, otherwise a screenreader could read the wrong label when you focus one of your input fields.
One way to fix this other than changing IDs is to wrap the input in the label.
<label>
First Name
<input />
</label>
This is semantically correct and avoids the labels needing for and associated input id attributes.
You obviously might need to refactor some stuff and it seems like more hard work than just changing some IDs but that is an option (I know you will have probably fixed this by now, this is more for reference if someone else comes to this question.)
See: https://stackoverflow.com/a/774065/2702894

How to select from a selection box with a variable in the name?

I am having trouble using selecting from this select element.
<select name="vehicle_attrs[position_count]" class="mb1"><option>Position / Quantity</option><option>Front</option><option>Rear</option></select>
I have tried
select('Front', :from=>'mb1')
select('Front', :from=>'vehicle_attrs[position_count]')
select('Front', :from=>'vehicle_attrs[1]')
All of them result in a can not find selection box error
I've never liked how restrictive Capybara's concept of a 'locator' is (i.e. must have a name/id/label), but if you dig into the source code, those helpful methods like select, click_on, and fill_in are just wrappers for find and some native method of Element, which takes arbitrary CSS, and works in almost all situations. In this case, you could use:
find('[name="vehicle_attrs[position_count]"]').find('option', text: 'Front').select_option
Since dropdowns often have multiple similar options, where one is a substring of the other, you might consider using an exact string match, like
find('[name="vehicle_attrs[position_count]"]').find('option', text: /\AFront\z/).select_option
From the docs for select - https://www.rubydoc.info/github/teamcapybara/capybara/Capybara/Node/Actions#select-instance_method - we can see that the from option takes "The id, Capybara.test_id atrtribute, name or label of the select box".
Neither 'mb1' or 'vehicle_attrs[1]' are any of those so they would be expected to fail.
'vehicle_attrs[position_count]' is the name so assuming the box is actually visible on the page (not replaced with a JS driven select widget, etc), that should work. If it doesn't, then edit your question and add the full exact error message you get when trying to use it. Of course if there is only one select box on the page with an option of 'Front' then you don't need to specify the from option at all and can just do
select 'Front'

Xpath not getting content

I've tried looking through a bunch of answers already related to this, but I'm very unfamiliar with xpath and I'm a bit stuck.
I'm trying to just grab some information from a website, but I keep getting "imported content is empty" when i try to use importxml in excel.
Here's an example of the page I'm trying to read from (it's a college football simulator for running games. This call is Alabama vs Oklahoma using the 2019 teams):
http://www.ncaagamesim.com/FB_GameSimulator.asp?HomeTeam=Alabama&HomeYear=2019&AwayTeam=Oklahoma&AwayYear=2019&hs=1&hSchedule=0
I'm trying to grab the two teams' scores from the above link.
The first team's score's xpath is supposedly /html/body/div[3]/div/div/div[2]/div/div[1]/center/div[3]/div[1]/table/tbody/tr[1]/td[2]
but I keep getting an empty response.
I'm trying to use importxml in google sheets to get the data.
This returns quite a bit, but it doesn't appear to have the info I need. =importxml("http://www.ncaagamesim.com/FB_GameSimulator.asp?HomeTeam=Alabama&HomeYear=2019&AwayTeam=Oklahoma&AwayYear=2019&hs=1&hSchedule=0", "//div[contains(#class,gs_score)]")
If I quote the gs_score, it doesn't return anything.
Would appreciate any help with this. Thanks!
Edit: The xpath fails with /html/body/div[3]. If I change this to div[2], it returns some of the page data, but not the part I'm looking for.
According to an article I found -
Unfortunately, ImportXML doesn’t load JavaScript, so you won’t be able
to use this function if the content of the document is generated by
JavaScript (jQuery, etc.)
Not sure if this is relevant...
Edit 2:
I noticed the values I need are in an html table, so I tried using this
=IMPORTHTML("http://www.ncaagamesim.com/FB_GameSimulator.asp?HomeTeam=Alabama&HomeYear=2019&AwayTeam=Oklahoma&AwayYear=2019&hs=1&hSchedule=0", "table",1)
I'm still getting no content, no matter what table number I put in that formula.
If I copy the selector in the inspector, we get:
body > div.container > div > div > div.container > div > div.col-lg-9 > center > div:nth-child(3) > div.col-sm-6.col-xs-12.gs_score.gs_borderright.rightalign > table > tbody > tr:nth-child(1) > td:nth-child(2)
Which seems to be the same as the xpath.
Part of the answer: 'gs_score' needs to be in quotes - it's a string literal, not an element name. As an element name, it selects nothing, and everything contains nothing, so the predicate is always true.