vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 42 forks source link

cds-navigation: nav items added after initial render are visually hidden #155

Closed ashleyryan closed 2 years ago

ashleyryan commented 2 years ago

Describe the bug

When a nav item is added to the Navigation component after it's initial render, the text is visually hidden with the screen reader class and not visible.

The repro is in react, but I don't think this is react specific.

How to reproduce

https://stackblitz.com/edit/clarity-react-demo-bxd4di?file=src%2Findex.html,src%2FApp.tsx

Steps to reproduce the behavior:

  1. Notice that the nav items are created in the useEffect after the initial render
  2. The text isn't visible in the left nav, almost as if it's considering the nav is collapsed

Expected behavior

The nav text is visible

Versions

Clarity version:

Framework:

Framework version: ie: Angular 11

Device:

Additional notes

Add any other notes about the problem here.

bbogdanov commented 2 years ago

https://github.com/vmware-clarity/core/issues/82 I believe it is the same issue

ashleyryan commented 2 years ago

Oh good catch @bbogdanov. I briefly looked at the once but didn't dig in because of my lack of angular experience.

github-actions[bot] commented 2 years ago

:tada: This issue has been resolved in version 5.8.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 2 years ago

:tada: This issue has been resolved in version 6.1.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 2 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.