Prevent breadcrumb separators from being announced by screen readers

[alexisreytech]

Remove default breadcrumb pseudo-element and replace it with a span that uses "aria-hidden" for slash character. Fixes #405

[netlify]

✅ Deploy Preview for accessiblecommunity canceled.

Name	Link
🔨 Latest commit	afd1057
🔍 Latest deploy log	https://app.netlify.com/projects/accessiblecommunity/deploys/69c3fa57635d3f0008dec838

[brian-montgomery]

Thank you, Alexis. This works.

However, with this solution, the dividers are selectable and highlightable by the cursor, because they are standard text. We could add some CSS/JS to handle that, but that seems a little messy.

I did a little research to figure out if there is a different way to handle this: a content alt separator. Apparently, you can add an alt text to the CSS content property.

To implement this, all we should need to do is define the alt text with the content property:

$breadcrumb-divider:                "/" / "";

The part after the slash is the alt text. It looks a little confusing, but it does make sense. I did a quick test and it seemed to work with VoiceOver.

Tagging @racecn, @courtneylinder and @rachaelbradley to get their thoughts on this. Can anyone test to see if it works in JAWS or other assistive technologies?

(Note: I'm going to post a similar comment on the issue).