BreadCrumb skin object to render semantic, accessible breadcrumb markup#6898
BreadCrumb skin object to render semantic, accessible breadcrumb markup#6898mitchelsellers merged 11 commits intodnnsoftware:developfrom
Conversation
Replaced asp:label with nav and ol structure for better semantic markup.
mitchelsellers
left a comment
There was a problem hiding this comment.
One note/request included on a change to localization.
Additionally however I do believe this would be a substantially breaking change to introduce, so the planning of how this would be released is something we have to take into consideration. @dnnsoftware/approvers anyone else with thoughts on this?
bdukes
left a comment
There was a problem hiding this comment.
I like adding this markup as an option, however I don't think we can change the markup by default, I think it needs to be opt-in (e.g. add a new property for display mode or DisplayAsList or something).
Removed nav and ol tags from breadcrumb control.
Updated the BreadCrumb class to enhance functionality and maintain compatibility with legacy systems. Introduced new properties for cleaner markup and list-based semantic rendering.
Totally agree on the breaking-change risk. I’ve updated the implementation so the new semantic/list markup is opt-in via a new property (UseListMarkup, default false). |
Agreed — I changed this to opt-in. Added UseListMarkup (default false) so legacy markup remains the default behavior. Setting |
|
@bdukes and @mitchelsellers Thanks for the feedback! I’ve updated the PR to minimize breaking changes and address review notes: Added UseListMarkup (default false) so legacy output remains the default, and semantic markup is opt-in. Kept legacy wrapper Switched the control output to Localized the aria-label via resx with fallback. Restored |
DNN Platform/Dnn.ClientSide/src/styles/default-css/10.0.0/base/_type.scss
Outdated
Show resolved
Hide resolved
mitchelsellers
left a comment
There was a problem hiding this comment.
Sorry upon further review one small changes suggested.
Avoid intermediate string allocation when initializing breadcrumb StringBuilder
uzmannazari
left a comment
There was a problem hiding this comment.
thanks for commit @bdukes
|
@mitchelsellers are you good with this? |
Summary
This PR refactors the BreadCrumb skin object to render semantic, list-based markup using
<nav>,<ol>, and<li>elements instead of inline spans and separators.The updated output improves accessibility and aligns breadcrumb rendering with common WCAG and ARIA breadcrumb patterns, while preserving existing behavior and customization options.
Fixes #6609
Details
<nav aria-label="Breadcrumb">) and an ordered list (<ol itemscope itemtype="https://schema.org/BreadcrumbList">).Labelwith aLiteralto avoid injecting wrapper markup inside the list container (ensuring valid list structure).<li>per breadcrumb item with Schema.orgBreadcrumbList/ListItemmicrodata andpositionmeta.aria-current="page"to the<li>representing the current page (instead of the<a>), matching common ARIA breadcrumb patterns.<li>(only when another crumb follows) and marked them decorative viaaria-hidden="true", avoiding extra list items while preserving the existingSeparatorcustomization and path resolution.type.scssfornav.dnnBreadcrumb olto prevent list items stacking vertically after switching to list markup, and to ensure the ordered list does not display numeric markers while keeping the visual breadcrumb layout consistent:list-style: none;(prevents numbering/markers)display: flex; align-items: center; gap: 0.5rem;(keeps crumbs inline and spaced)nav.dnnBreadcrumb ol li span { margin-inline-start: 0.5rem; display: inline-block; }(consistent spacing for the separator/content)Impact
Testing
HideWithNoBreadCrumbbehavior.BreadcrumbList.