Add breadcrumbs pattern

[bjacobel]

Refs TNL-4599

Adds breadcrumb styling and pattern example. Uses JS components added to the UITK in #72.

http://ux-test.edx.org/bjacobel/breadcrumbs/

Testing Checklist

• Manually test responsive behavior.
• Manually test right-to-left behavior.
• Manually test a11y support.

Non-testing Checklist

• Consider any documentation your change might need, and which users will be affected by this change.

Post-review

• Squash commits into discrete sets of changes with descriptive commit messages.

Reviewers

• @andy-armstrong
• @AlasdairSwan
• @clrux
• @chris-mike

If you've been tagged for review, please check your corresponding box once you've given the 👍.

TODO before merge

• Merge UITK PR first
• release UITK to NPM
• update the UXPL package.json git uri to point to npm UITK v 1.2.0.

[mention-bot]

By analyzing the blame information on this pull request, we identified @andy-armstrong, @talbs and @clrux to be potential reviewers

[andy-armstrong]

Note: don't merge until this can be changed to an actual release number.

[andy-armstrong]

👍 Awesome stuff, @bjacobel. If it is straightforward I'd like to see a server-side rendered example, but if you prefer that can come in a follow-on PR.

[downzer0]

The last page in the breadcrumb shouldn't be a link. Maybe include a heading (it can be sr-only) for even more context.

The W3 breadcrumb "spec"
An example from the W3

[downzer0]

Oh, also, if you use a list for the breadcrumb links, screenreaders announce the number of items, which could add additional clarity to how "deep" in they are.

[bjacobel]

@clrux Updated with some accessibility improvements.

[downzer0]

@bjacobel Sorry man, after doing some additional testing, the nav only has one child (ul) and so doesn't properly announce the correct number of children. It'll always be one.

Check out this example, which I tested, and does work. https://codepen.io/jonneal/pen/ianKu

Turns out we don't really need a list if we're using the nav element.

[bjacobel]

@clrux no worries! I've updated to remove the ul / li structure.

[bjacobel]

Example of pre-rendered breadcrumbs is live on doc site @andy-armstrong.

Checking Chris off for review as he's already done the a11y review when the components went into the toolkit.

[andy-armstrong]

👍 looks awesome. Thanks for the pre-rendered version.

I recommend having @AlasdairSwan do the second review instead of @dianakhuang (Alasdair, is that okay with you?)

[AlasdairSwan]

Does this need both selectors?

[bjacobel]

Probably doesn't need the .fa selector, I will remove.

[bjacobel]

@AlasdairSwan Pushed an update that bumps the UITK dependency to 1.4.1, removing that unnecessary sr-is-focusable.

[AlasdairSwan]

Looks good @bjacobel 👍