feat: Aria compliant breadcrumb component

[jelmerveen]

Implemented now with feedback and according to the aria specification:

https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html

[lucaslarroche]

Closes #144

[lucaslarroche]

@jelmerveen, Thanks for this new PR, and sorry for the delay. I didn't have time to review the PRs.

aria-label="breadcrumb"

Nice find. You're right aria-label="Breadcrumb" seems to be the proper practice. Weirdly the documentation uses Pascalcase ("Breadcrumb") when we would expect a lowercase first letter "breadcrumb".

The example in the accessible breadcrumb pattern referenced on the w3c page however uses lower case 🤔. Bootstrap also recommends the lowercase version.

I'd instead use the lowercase version if you're ok with it.

!important

We can avoid !important as it is unnecessary (tested). And when necessary, Pico uses the flag $enable-important to enable/disable !important in the output - Example.

a::after {
- color: var(--muted-color) !important;
+ color: var(--muted-color);
}
a[aria-current="page"] {
-  color: inherit !important;
+  color: inherit;
}

RTL (right-to-left)

Using padding-inline-start instead of padding-left would allow this feature to support RTL automatically.

ul li {
- padding-left: 0;
+ padding-inline-start: 0;
  
  &:not(:last-child) {
    a::after {
-     padding-left: 0.5rem;
+     padding-inline-start: 0.5rem;
    }
  }
}

Let me know if you want to make the changes.

[jelmerveen]

@lucaslarroche thanks for the great feedback!

I have made the changes, and updated with the dev branch, since it was already a long time. Can you please verify that the merge with dev is ok? I had to rework some conflicts.

Else please feel free to update it accordingly!

[lucaslarroche]

Hi @jelmerveen, Thank you for the changes, and thank you for your patience. I don't have the time I'd like to update Pico.

I rebased the branch, rebuild the CSS, and changed the style of code snippets. LGTM.

I will merge into dev, and then in the next release quickly.