fix: adjust active element visibility in nclistitem

[szaimen]

Before	After

todo:

problem1	problem2

[marcoambrosini]

We also need to take care of the counter and the unread dot for mail

[szaimen]

@marcoambrosini can you help me to get an active element as example into the docs? This would make testing this a bit easier :)

[nimishavijay]

Looks good in the screenshot, but as Marco said the dot needs to be adjusted, it can be changed to white :)

[jancborchardt]

Looks good, and yep as @nimishavijay said switching the dot to white on the active element is good, so it’s symmetric to the "message for you" counter bubble color.

[JuliaKirschenheuter]

looks good, thank you!

contrast of "talk icon" should't be increased because it is only a decorative icon

Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative)
from https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

[marcoambrosini]

@szaimen just add the .active class to the outer element :)

[szaimen]

@szaimen just add the .active class to the outer element :)

thanks for the pointer! Works great! :)

[JuliaKirschenheuter]

Probably i haven't understood a problem, but why we could't add an .active class to three dots icons if an element is active one?

[szaimen]

Probably i haven't understood a problem, but why we could't add an .active class to three dots icons if an element is active one?

I fear the problem is that this should probably be done automatically for embedded components? Also there is not active state for nccounterbubble for example afaik...

[szaimen]

@JuliaKirschenheuter would you mind taking this over? I am unfortunatley techincally stuck on how to proceed here.

[marcoambrosini]

I can take over :)

[szaimen]

I can take over :)

Thanks a lot Marco! 💙🙏

[marcoambrosini]

I just reworked a bit. @skjnldsv @raimund-schluessler @susnux do you think this would cover all the use cases? Maybe we should also include a prop to force-primary style in the cases where the element is not a router link?

[szaimen]

I just reworked a bit. @skjnldsv @raimund-schluessler @susnux do you think this would cover all the use cases?

The screenshot looks good to me :)

Can you commit your changes? They arent yet afaics

[jancborchardt]

Looks good design-wise! :)

[skjnldsv]

we should also include a prop to force-primary style

an active prop would be nice sure :)

[szaimen]

Tested in the docs and on hover the 3-dots button looks like it does not fit the contrast requirements:

[jancborchardt]

@szaimen yeah, the icon needs to invert then to the same as text color (white in the case of default blue primary color).

[marcoambrosini]

That is because the element is not activated unless the route is matched. I'm adding a "forceactive" prop now

[szaimen]

Tested and seem to work however the nclistitem compact mode looks a bit strange now. Not sure though if this is caused by this change:

This PR:

master:

[marcoambrosini]

Should be fixed now @szaimen!

[szaimen]

LGTM! :)