Currently I have a list like so:
<div class="list">
<div class="padding">
<div class="clickable-item">item 1</div>
</div>
<div class="padding">
<div class="clickable-item">item 2</div>
</div>
</div>
With the keyboard I would like to tab to the clickable-items one after another.
Currently it's tabbing through the 'padding' elements instead.
Is there any way I can tell the browser to ignore the padded parent and tab straight to the child?
Here's a few things to think about:
<div class="clickable-item" /> isn't indicating that it's a clickable item. See: Making a clickable <div> accessible through tab structure? on why using a div isn't always the best solution and using a button or a tag is better for accessibility.
Unlike what Anis R. said, if you want to keep the logical flow for tabbing based on the ordre of the page, you want to use tabindex="0" on the elements.
If you must use a div, think about using <div class"clickable-item" role="button" /> on your div in order to indicate that it is indeed something clickable.
You can set the tabindex attribute on the desired elements. The tab index number determines the order in which the elements are visited.
Edit: As FullOnFlatWhite and Graham Ritchie mentioned, it's generally better to use tab indices of zero (not positive), or use role="button" on your div.
<div class="list">
<div class="padding">
<div class="clickable-item" tabindex="0">item 1</div>
</div>
<div class="padding">
<div class="clickable-item" tabindex="0">item 2</div>
</div>
</div>
Related
I'm trying to locate and then read the list of text 1-5. All divs with class="col-md-6" have the same structure, so I'm trying to use the text from:
<h5>Header Unique Text</h5>
as it is the only unique element and then proceed to extract the texts but without using /div[x]/div[y] type xpath, as it won't be reliable in my case. I'm searching for a css selector(or even xpath) which uses sibling relations, maybe nth-child, related to the header tag or its parent div. However, I'm not sure you are even able to move backward in the DOM with css selectors.
Any help would be greatly appreciated.
<div class="row dashboard-admin-widgets">
<div class="col-md-6">...</div>
<div class="col-md-6">...</div>
<div class="col-md-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Header Unique Text</h5>
</div>
<div class="ibox-content">
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
<div>Text 5</div>
</div>
</div>
</div>
</div>
If it is the last child as shown you can use a last-child selector
.col-md-6:last-child .ibox-content div
You could also use nth-of-type
.col-md-6:nth-of-type(n) .ibox-content div
Or even last-of-type
.col-md-6:last-of-type .ibox-content div
You can use xpath to get the ancestor of <h5>Header Unique text</h5> like this:
//h5[normalize-space(.)='Header Unique Text']/ancestor::div[#class='ibox float-e-margins']/div[#class='ibox-content']/div
Let me break it down for you so you can adjust the xpath to your needs.
First, we look for <h5>Header Unique text</h5> and then we get its ancestor which is div[#class='ibox float-e-margins']. You can use any attribute, tag, just like you would write your xpath.
Now we are looking for elements in context of div[#class='ibox float-e-margins']. Then, use we look for all div elements with the text you desired.
Also, instead of using /ancestor::div, you can get first parent and look for it's sibling like this:
//h5[contains(text(), 'Header Unique Text')]/parent::div[#class='ibox-title']/following-sibling::div[#class='ibox-content']/div
I would like to know if, according to BEM methodology, I can have the following structure:
.block1
.block1__element1
.block2
.block1__element2 <-- ??
Am I allowed to use an element from a parent block, inside a children block?
Thanks.
UPDATE:
This is the actual DOM structure:
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
// <-- ???
</div>
</div>
</div>
According to best practices of BEM methodology: am I allowed to move the element with head__user inside the menu block? Or all elements inside the menu block need to start with the menu__ prefix?
I hope this clears out the problem.
I been using BEM for sometime and from what I got it's not recommended nor intended to be used like that. You can nest different BEM elements to each other like menu-blockintohead-block, but menu-block items should not go outside its parent menu-block, like you should not put menu-block__item at the top of head-block. Does it makes sense? :)
To illustrate there are two ways to go. What should be noted here is that depending on the scale of your project and how you build things (component based?). If you don't have a large project and are not doing or reusing the menu else where you can do it both ways. Lets say your menu is huge amount of html/css I would do it like #1
This is not correct
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="head__something"></div>
</div>
</div>
</div>
Recommended solution
Based on this part of the documentation. Now you can chop your own header design into blocks, does this below match?
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="menu__something"><img src="" class="menu__image" /></div>
</div>
</div>
</div>
I think this variant is allowed:
<div class="head">
<div class="head__nav">
<div class="menu">
<div class="head__user"></div>
</div>
</div>
</div>
I haven't found the current part in the official BEM documentation, but I've found this part:
The block name defines the namespace, which guarantees that the elements are dependent on the block (block__elem).
A block can have a nested structure of elements in the DOM tree:
Example
<div class="block">
<div class="block__elem1">
<div class="block__elem2">
<div class="block__elem3"></div>
</div>
</div>
</div>
However, this block structure is always represented as a flat list of elements in the BEM methodology:
Example
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
This allows you to change a block's DOM structure without making changes in the code for each separate element:
Example
<div class="block">
<div class="block__elem1">
<div class="block__elem2"></div>
</div>
<div class="block__elem3"></div>
</div>
The block's structure changes, but the rules for the elements and their names remain the same.
I understand it as there is only one rule about HTML structure for elements in BEM: an element has to be inside its block (it doesn't matter how deep).
One possible problem that I can imagine for this case is using some of BEM tree formats. But if you don't need it, I think there's no problem.
I would consider making the potential head__something into simply something, and then to provide multiple modifications of it. e.g. something--head and something--menu.
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="something--menu" />
</div>
</div>
<div class="something--head" />
</div>
Also, refactoring further, I would consider getting rid of head__nav as it probably does not add any richer semantics than menu.
<div class="head">
<div class="head__user"></div>
<div class="menu">
<div class="something--menu" />
</div>
<div class="something--head">for those cases where you want <code>something</code> directly descending from <code>head</code></div>
</div>
Let's say I have a product within a collection. Is it appropriate to call the product "feature-collection__product" so it's still an element within the block of "feature-collection" or call it "feature-collection-product" so it becomes it's own block, as it has other elements within it, or something different.
<div class="feature-collection">
<div class="feature-collection__product">
<h2 class="feature-collection__product-title"></h2>
<h2 class="feature-collection__product-price"></h2>
</div>
</div>
OR
<div class="feature-collection">
<div class="feature-collection-product">
<h2 class="feature-collection-product__title"></h2>
<h2 class="feature-collection-product__price"></h2>
</div>
</div>
Most likely the correct answer is both:
<div class="feature-collection">
<div class="feature-collection__product product">
<h2 class="product__title"></h2>
<h2 class="product__price"></h2>
</div>
</div>
The situation when you have different entities on the same DOM node is called mix. In this case it's reasonable to have independent block product and also an element of feature-collection to set some styling for production inside feature-collection.
For more info about mixes please take a look at https://en.bem.info/methodology/key-concepts/#mix and https://en.bem.info/methodology/faq/#mixes
it seems to be simple , our designer made the a design of 3 different forms in one like page
as you may see in this snippet
I don't think we can do this design with valid html in twitter bootstrap grids ?
where you would get the form opening and closing tags and keep it valid
<div class="container">
<div class="col-md-4">
<div class="row"><div class="form1">form1</div></div>
<div class="row"><div class="form2">form2</div></div>
<div class="row"><div class="form3">form3 </div></div>
</div>
<div class="col-md-4">
<div class="row"><div class="form3">continue of form3 </div></div>
</div>
<div class="col-md-4">
<div class="row">
<div class="form3">
continue of form3
</div>
</div>
</div>
</div><!-- /.container -->
You cannot split a form element so that one part is inside one element and another part is inside another element. HTML syntax prevents that.
You can, however, have input elements and other controls outside a form element and associate them functionally with it using form attributes. Browser support is still too limited to make this a feasible option in normal situations.
Please review the Fiddle Here...
I am trying to separate some elements here and I'm having a tough time. All my div tags appear correctly separated, but I'm not getting the separation.
For example, I've got a button, then a clear, then a paragraph.
But, the paragraph is actually showing up inside the button, after the clear.
<div id="container">
<div id="header">Transfer of Credit Estimator</div>
<div id="content">
<div id="classes">Enter total number of classes estimated for transfer, then click <strong>Estimate</strong>.
</div>
<input type="text" class="" placeholder="#">
<div id="btn">Estimate<div> <!-- Button -->
</div>
<div class="clear"></div>
<p>Hi</p>
<div id="footer">**The Estimator is based on classes that would transfer in as 4-credit courses that cost $1,608 each ($402/credit hour) here at University. The Estimator assumes that each class would be a 5-week class.</div> <!-- Footer -->
</div> <!-- Close Container -->
</div>
On top of that, the footer is taking on attributes from the '.btn' class, such as the font-family and font-weight.
Thoughts on what I'm doing wrong here?
The button div is not closed. It should be:
<div class="btn">Estimate</div>
The button div is not closed
<div id="btn">Estimate<div>
instead it should be
<div id="btn">Estimate</div>
Your browser tries to correct you missing closing tag and that creates the attributes to shift