Skip to content

feat(btn): keyboard focus styles added via focus-visible #53

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

Merged
merged 3 commits into from
Nov 2, 2022

Conversation

ManUtopiK
Copy link
Contributor

@ManUtopiK ManUtopiK commented Oct 24, 2022

I would like to work on focus in all element. I've started with the button component.
The focus follow the color of the button.
Here is a screenshot of the concept :

2022-10-23-18.16.47.474471455.mp4

Just for this screenshot, I added this css in anu-vue/src/presets/theme-default/scss/index.scss to get a ring with 2px :

.a-btn:focus {
  --un-ring-width: 2px !important;
}

Note that we have to add !important mark.

It looks nice, but we cannot use it with css hex color or named color.
So I didn't change the style in lines 61 and 67.

We could use the opacity with the new css feature relative colors, but I don't know when it will be supported by major browsers...

In the meantime, I don't know what to do.
What do you think about ?

@netlify
Copy link

netlify bot commented Oct 24, 2022

Deploy Preview for anu-vue ready!

Name Link
🔨 Latest commit bcae2df
🔍 Latest deploy log https://app.netlify.com/sites/anu-vue/deploys/6362a285bca9f500081e544c
😎 Deploy Preview https://deploy-preview-53--anu-vue.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@jd-solanki
Copy link
Owner

It looks great

@jd-solanki jd-solanki closed this Oct 24, 2022
@jd-solanki jd-solanki reopened this Oct 24, 2022
@jd-solanki
Copy link
Owner

Sorry, I accidentally closed the PR 🙏🏻

Thanks for considering a11y. I just want to update the style here. I will let you know my updates and review the PR soon.

@jd-solanki
Copy link
Owner

Hi,

I have made a few changes.

  • Updated ring styles
  • Removed ring opacity. I think devs don't customization with ring opacity. Moreover, we have to also handle the hex color if we consider the ring opacity.
  • as per your comment I have added support for hex colors

I hope you will like this.

@jd-solanki jd-solanki changed the title feat(ABtn): focus with themeColor feat(btn): keyboard focus styles added via focus-visible Nov 2, 2022
@jd-solanki jd-solanki merged commit a91805b into jd-solanki:main Nov 2, 2022
@jd-solanki
Copy link
Owner

Hi @ManUtopiK

I found that in dark mode we get some unwanted styles.
image

If possible, can you please take a look? I have a really busy schedule these days.

Thanks.

jd-solanki added a commit to brojor/anu that referenced this pull request Nov 27, 2022
Co-authored-by: JD Solanki <jdsolanki0001@gmail.com>
Co-authored-by: JD Solanki <47495003+jd-solanki@users.noreply.github.com>
@ManUtopiK ManUtopiK deleted the feat/focus branch December 1, 2022 00:38
@ManUtopiK ManUtopiK restored the feat/focus branch December 1, 2022 00:41
@ManUtopiK ManUtopiK deleted the feat/focus branch December 1, 2022 00:41
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.

2 participants