theme_breadcrumb() should be converted to HTML5.

1. replace div with nav
2. Add role="nav"
3. move invisible heading inside of the div
4. remove breadcrumb wrapper in page.tpl.php

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Everett Zufelt’s picture

Status: Active » Needs review
FileSize
1.35 KB

- Removes breadcrumb wrapper from page.tpl.php
- Replaces wrapper with nav instead of div
- Moves invisible heading inside of nav
- Uses ul for breadcrumbs

Everett Zufelt’s picture

I don't like where I've added the ul to the end of the heading string. Will re-roll along with any additional feedback.

Status: Needs review » Needs work

The last submitted patch, 1347266-theme_breadcrumb-1.patch, failed testing.

pcambra’s picture

Task: Tests need to be modified to match the new html structure of the breadcrumb.

Everett Zufelt’s picture

Status: Needs work » Needs review
FileSize
1.93 KB

Modified menu.test, this should fix most tests.

Status: Needs review » Needs work

The last submitted patch, 1347266-theme_breadcrumb-5.patch, failed testing.

Everett Zufelt’s picture

Status: Needs work » Needs review
FileSize
3.04 KB

- Fixed the node and book test.
- Ajax multiform tests were failing because id="breadcrumb" is being generated by theme_breadcrumb in the patch from #5. Removed id from <nav>. If this is really required as a theme hook, or for some other reason, we'll need to leave the div wrapper for breadcrumb in page.tpl.php

Status: Needs review » Needs work

The last submitted patch, 1347266-theme_breadcrumb-7.patch, failed testing.

Everett Zufelt’s picture

Updated tests to use class="breadcrumb" and not id="breadcrumb"

Everett Zufelt’s picture

Status: Needs work » Needs review
pcambra’s picture

Status: Needs review » Needs work

This is going to fail again for node title, attaching a new patch

pcambra’s picture

Status: Needs work » Needs review
FileSize
3.05 KB

Another try :)

Jacine’s picture

Status: Needs review » Needs work
+++ b/core/includes/theme.incundefined
@@ -1679,13 +1679,16 @@ function theme_image($variables) {
+    $output = '<nav role="nav" class="breadcrumb">';

You mean role="navigation" :)

pcambra’s picture

Status: Needs work » Needs review
FileSize
3.06 KB

Fixed the "navigation" thing

dcrocks’s picture

Assigned: Unassigned » Everett Zufelt
Status: Needs work » Needs review

I had a question about using nav for breadcrumbs, as they aren't 'major', but the W3C seems to support it here: dev.w3.org/html5/spec/Overview, section 4.13.2.

Everett Zufelt’s picture

Thanks all for the help. Looks like we might just need some CSS tweaks and we're done (I won't be doing those).

@dcrocks

Please don't post references to the single page HTML5 spec, it crashes some people's computers (like mine). :)

dcrocks’s picture

really?

pcambra’s picture

Assigned: Everett Zufelt » Unassigned
Status: Needs review » Needs work

Looking at #16 comment, let's mark this as needs work then and unassign it.

JohnAlbin’s picture

Assigned: Everett Zufelt » Unassigned
FileSize
5.28 KB

Here's some CSS cleanup.

Also the ' » ' shouldn't be added to the last breadcrumb.

And theme_breadcrumb() should still return a string even if its empty; conditionally returning VOID is bad form.

Lastly, we shouldn't have any <?php if ($breadcrumb): ?> in any page.tpl.php files.

JohnAlbin’s picture

In IRC, people were asking (rightly) about whether » was good for RTL languages. It is. See http://drupal.org/node/179781#comment-610051

Jacine’s picture

Issue tags: +sprint

Tagging for the next sprint.

maartenverbaarschot’s picture

The list containing the breadcrumbs should really be an <ol> instead of an <ul>.
The order of the breadcrumbs matters.

aspilicious’s picture

I thought the only difference between ol and ul was that ol contains number and ul conains shapes. And we hide those anyway.
So I don't know why <ol> should be better than <ul> ?

Jacine’s picture

Status: Needs review » Needs work

@aspilicious it's not about the bullet style, and technically @maartenverbaarschot is correct, IMO. Here's a little about the difference:

OL spec definition:

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

UL spec definition:

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

So... gonna mark needs work unless anyone else has something to say about it. :)

tim.plunkett’s picture

Status: Needs work » Needs review
FileSize
4.52 KB

That's a really interesting semantic difference, and I kinda like it :)

Changed the ul to ol in the theme function, the CSS, and the tests.

Jacine’s picture

Status: Needs review » Reviewed & tested by the community

Thank you @tim.plunkett! Looks good to me. :)

catch’s picture

Status: Reviewed & tested by the community » Fixed

Looks good to me, and I think the <ol> is a nice touch here. Committed/pushed to 8.x.

AlexBorsody’s picture

$this->assertEqual(current($this->xpath($xpath)), $node->title, 'Node breadcrumb is equal to node title.', 'Node');

should maybe be changed to use t() for the title text.

aspilicious’s picture

I don't think it's advised to use t() in tests

oriol_e9g’s picture

We don't need t() function in assertions, discussed here: #500866: [META] remove t() from assert message

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

changing bradcrumb to breadcrumb, just in case someone is searching