Conversation
DavidNietoGonzalez
changed the title
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit e5246cc. |
| <a href="/" class="mistica-breadcrumb-text"> | ||
| Home | ||
| </a> | ||
| <span class="mistica-breadcrumb-separator">/</span> |
There was a problem hiding this comment.
I think we could avoid this span by adding the / with an :after pseudoelement
There was a problem hiding this comment.
removed and added the pseudo element
There was a problem hiding this comment.
WAI ARIA recommends to avoid including the element as content since the screen reader will stop at it and read it.
This is how they solve this problem
using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity
Extracted from: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
Would be also ideal to change React implementation to follow this? @atabel
There was a problem hiding this comment.
in react implementation we use separated divs for /, so we could just add aria-hidden there
| line-height: var(--mistica-line-height-1); | ||
| font-weight: var(--mistica-font-weight-1); | ||
| color: var(--vcolor-textPrimary); | ||
| margin: 0 3px; |
There was a problem hiding this comment.
there aren't uniform spacing between elements
This fix this visual
| margin: 0 3px; | |
| margin-right: 3px; |
before/after
aweell
left a comment
aweell
left a comment
There was a problem hiding this comment.
The component reflow behaviour seems odd
css:
react:
|
Change to avoid the unwrapped content on responsive. |
# [16.23.0](v16.22.0...v16.23.0) (2025-05-06) ### Features * **mistica-css:** breadcrumbs ([#1349](#1349)) ([eeb36b2](eeb36b2)) * **mistica-css:** card asset ([#1351](#1351)) ([45c275f](45c275f)) * **mistica-css:** GridLayout ([#1355](#1355)) ([da0a953](da0a953)) * **mistica-css:** Table implementation ([#1352](#1352)) ([d26129e](d26129e)) * **PinField:** wrap to next line when digits don't fit in viewport ([#1359](#1359)) ([13e13ed](13e13ed)) * **TextField:** make field error aria-live ([#1348](#1348)) ([1c45c55](1c45c55))
|
🎉 This PR is included in version 16.23.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
6 participants
WEB-2176