Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix($theme-default): make dropdown-title's UI consistent with nav-link #1890

Merged
merged 3 commits into from
Oct 5, 2019
Merged

fix($theme-default): make dropdown-title's UI consistent with nav-link #1890

merged 3 commits into from
Oct 5, 2019

Conversation

haoranpb
Copy link
Contributor

@haoranpb haoranpb commented Sep 25, 2019

Summary

#1837 convert dropdown-title from a to button, which brings inconsistent ui between nav-link and dropdown-title.(Especially on the phone)

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Docs
  • Build-related changes
  • Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Capture

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

  • When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE

If adding a new feature, the PR's description includes:

  • A convincing reason for adding this feature
  • Related documents have been updated
  • Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

@haoranpb
Copy link
Contributor Author

haoranpb commented Sep 26, 2019

Hi,

While testing on Firefox, I just realize that I break the accessibility by adding outline none. The blue outline can not be shown while focusing on the dropdown-link now.

However, I think it's kind ugly without it. What do you think?

Capture3

There are solutions like: remove focus immediately after click on the button. But I don't think it's very great.

I have an idea but don't have time to try it out yet:

Use color instead of the outline to indicate which title you are selecting. I mean, when you use tab to nav to a title, instead of showing an outline, change the title's color somehow.

Do you think it's practical?

Copy link
Collaborator

@kefranabg kefranabg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @ludanxer ,

Thanks for this PR, outline is important for accessibility, we have to keep it ;)

@ulivz ulivz merged commit 757e880 into vuejs:master Oct 5, 2019
@vue-bot
Copy link

vue-bot commented Oct 5, 2019

Hey @ludanxer, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚

@haoranpb haoranpb deleted the fix/dropdown-link-inconsistent branch October 5, 2019 05:55
@haoranpb haoranpb restored the fix/dropdown-link-inconsistent branch October 14, 2019 03:04
@haoranpb haoranpb deleted the fix/dropdown-link-inconsistent branch October 14, 2019 06:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants