navbar inconsistent behaviour

[tassoman]

Describe the bug

Navbar representation is inconsistent between components, hovering them, they produce three different reactions

Hovering a nav menu link, produces fade to brand color (with no underline for accessibility)

Hovering socialLinks components produces more contrast, but it's an outgoing link.

Hovering the title, produce a less contrast. Again, here it's a link should have brand color and underline for accessibility. Lower contrast is not WCAG Level 2 compliant. It happens also for dropdown menu anchors.

Reproduction

Build basic website having this attributes

        socialLinks: [
            { icon: 'github', link: 'https://github.com/'},
        ],
        nav: [
            {
                text: 'dropdown menu',
                items: [
                    {
                        text: 'one', 
                        link: 'https://bing.it/',
                        target: '_blank',
                    },{ 
                        text: 'two',
                        link: 'https://google.it/',
                    },
                ]
            },
            { 
                text: 'internal link', 
                link: 'mypage',
            },
      ],

Expected behavior

I expect every link turning into brand color, with no accessibility issues, no matter the component is.

System Info

System:
    OS: Linux 5.10 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 11.40 GB / 12.31 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.15.1/bin/npm
  npmPackages:
    vitepress: ^1.0.0-alpha.56 => 1.0.0-alpha.56

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[MarkusKeck]

@tassoman The only behavoir which I would rate as inconsistent is the hovering of a dropdown menu item, where the item gets less contrast while other menu options are highlighted with the brand color

Most websites don't use an underscore to highlight your menu items when hovering, nor do I think increasing the contrast of the socialLinks is a problem. What do you think should happen here, should the icons also be highlighted in the brand color?

About the brand icon issue, many websites also use a slight increase/decrease in contrast or even no change at all but just changing the cursor to a pointer.

[yyx990803]

• The title is different from normal links. It serves as a logotype and doesn't necessarily need to behave like normal links. Even in WCAG, logotype is explicitly exempt from contrast requirements.

• The dropdown itself is not a link. The actual links under the dropdown are consistent with brand color. I also don't see where WCAG mandates links cannot decrease contrast on hover (as long as the hover state still meets minimum contrast requirement)

[tassoman]

• I expected social links were hovered with brand color, such as other links.
• I'm doubtful about the logo image fading when hovered, should gain power, not lose it. (the same happens when siteTitle is text). I suggest to remove fading animation, or substitute with an outline evidence.
• I surfed by keyboard, image links (logo+social) got fancy outlined. Is not happening to nav-items without link attribute (such as dropdown) maybe you can converge its behavior to outlined too.
• keyboard accessibility is flowing well, I haven't tested already by using screen reader software (NVDA)

So, in the end, I suggest

• fade social-link to brand color
• outline navi items without link (instead of ugly focucs ring)
• remove logo fading or ease out animation

[tassoman]

In general, actually, dark and light mode contrast between background and text isn't at 100% ratio.
So maybe there's room to fade to higher contrast (0% vs 100%) when item is focused/hovered and when editor wants to give it importance with strong / enphasis.

The logo hover animation, I'd prefer can ease out abt 10% instead of fading.

[yyx990803]

IMO these are mostly your personal preferences. We will try our best to adhere to WCAG standards where things are clearly defined, but I'm afraid we don't have the responsibility to tweak everything to make you happy.

[tassoman]

Except two small accessibility issues I'm going to file, the project, overall is pretty planned for inclusion and it's resources efficient. About Logotype, WCAG2AA says it's an essential part of content, but nothing more about animation. As you noted, personal tweaks can be extended into a customized personal theme.

Thank you for the effort, although my third notation maybe is unwanted, the first twos, about socialink and dropdown navi-items, I feel can improve the default theme layout.