Thanks @Dogu for volunteering here. @DTorsani-WMF can do design review for this, and I can do code review. We can plan on working on this next sprint (so starting next Monday). That week is a holiday week for many of us (Thanksgiving in the USA) but we'll all be around at the start of the week anyway. On Monday we'll update this task to ensure that all the necessary info is here (or maybe someone can do that today/tomorrow if everything is ready). Let's use this task as the primary place to coordinate, but we can also set up a quick meeting at some point if it's necessary.

@egardner I'll start coding this component according to the provided design specs. Once my patch is ready for review, I'll let you know. Let me know if there's anything else I should keep in mind while working on this. Thanks!

Change #1098213 had a related patch set uploaded (by Abaris; author: Abaris):

[design/codex@main] [WIP] Breadcrumb: Add WIP component

https://gerrit.wikimedia.org/r/1098213

Change #1099078 had a related patch set uploaded (by Abaris; author: Abaris):

[design/codex@main] [WIP] Breadcrumb: Add WIP component

https://gerrit.wikimedia.org/r/1099078

Putting a 3 to represent DST reviewing @Dogu's open patch and getting it to a state where it can be merged as WIP.

Change #1163872 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Breadcrumb: Standardize and simplify code and docs

https://gerrit.wikimedia.org/r/1163872

Change #1163873 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] [proof of concept] Breadcrumb: Use CSS to truncate text

https://gerrit.wikimedia.org/r/1163873

I've added 2 new patches to try to move this WIP component forward:

• The first one updates the code to match patterns in the rest of the Codex library and refactors the docs page to match the new format.
• The second one is a proof of concept to use CSS to truncate text rather than setting a character limit, which may have been problematic across languages.

There are still a few TODOs in the code (adding a translatable message for the nav's aria-label, adding demos to the docs site page) that need to be handled before this component can be taken out of WIP.

Thanks so much @AnneT, this all looks great. I've added Breadcrumb to Figma, but will wait to publish until we publish in code. @lwatson or @Dogu would either of you be able to finish up these TODOs so we can take this out of WIP?

@DTorsani-WMF hey, sorry I missed your message. I'll get caught up on this component and work on the TODOs mentioned.

Change #1166014 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Breadcrumb, demo: add demos and i18n translatable string

https://gerrit.wikimedia.org/r/1166014

Change #1166237 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/core@master] Codex, i18n: add message keys for CdxBreadcrumb component

https://gerrit.wikimedia.org/r/1166237

Thank you @lwatson! If you can keep me updated on the progress of this and the status of the task, that would be great.

The ARIA Authoring Practices Guide example makes all the breadcrumb items focusable (including the last item). If you open the Codepen example, notice that the last item is focusable and the screen reader announces the current page (via aria-current). Was there an earlier decision to remove focus from the last breadcrumb item?

It seems that in that example, the last (current) item is also a link, but in our version it is not. @egardner or @Volker_E any thoughts on this, whether the last (current) item should be a link or not, even with the different styling from the rest of the breadcrumb links?

Additional context: In the Codex version, all breadcrumb items are links (anchor elements). The last link is not focusable using the Tab key because we don't provide the href attribute in our demos. I came across this when adding demos in this patch, and I think that the Codex demos should allow the last item to be focusable for screen readers. There are opposing arguments to this, but curious to know more about the decision here?

Thanks for the context. I can't remember a super deliberate decision around this. It seems that it is best practice and most accessible to make the last item focusable as well. I'd say let's go ahead and do so.

Change #1099078 merged by jenkins-bot:

[design/codex@main] Breadcrumb: Add WIP Breadcrumb component

https://gerrit.wikimedia.org/r/1099078

Change #1163872 merged by jenkins-bot:

[design/codex@main] Breadcrumb: Standardize and simplify code and docs

https://gerrit.wikimedia.org/r/1163872

@Catrope maybe the CSS-only component should be removed from this task and moved to a new one?

Change #1166237 merged by jenkins-bot:

[mediawiki/core@master] Codex, i18n: add message keys for CdxBreadcrumb component

https://gerrit.wikimedia.org/r/1166237

Change #1166014 merged by jenkins-bot:

[design/codex@main] Breadcrumb, demo: add demos and i18n translatable string

https://gerrit.wikimedia.org/r/1166014

Change #1171718 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1

https://gerrit.wikimedia.org/r/1171718

Change #1171718 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1

https://gerrit.wikimedia.org/r/1171718