Don
September 30, 2022, 6:31am
1
Hello,
I noticed on the recent update when I open a user card on a plugin or theme component which I think use the user card template than the avatar has an outline.
Possibly related commit: A11Y: Improve user card accessibility (#18348) · discourse/discourse@ca10381 · GitHub
I tested with Who’s Online plugin and Top Contributors Sidebar theme component but probably there are more.
Thanks
3 Likes
khenmu
(John Sweeney)
September 30, 2022, 7:37am
2
I’ve seen this sporadically here on Meta over the last few days on my iPad.
I haven’t yet been able to find any rhyme or reason for when it will happen and when it won’t.
edit: An example of where it happened;
https://meta.discourse.org/t/replacing-google-search-with-framasoft/118037/
5 Likes
keegan
(Keegan George)
September 30, 2022, 3:52pm
3
Hey @Don , thanks for sharing. The outline is intended to only appear on focus by keyboard, so this shouldn’t be happening on click like this.
Is this also occurring in when clicking the avatars in the topic list? Or is this just contained to clicking on avatars generated by plugins/themes?
Also, may I know what browser + version you are using? Thanks
3 Likes
Don
September 30, 2022, 6:52pm
4
Hello Keegan, For me, it is only happen on plugin, theme components. When I click the topic list avatar than click the other (plugin and TC) avatars the outline disappear.
I tried it several browsers and same result.
Android 12
Chrome 106.0.5249.65
Firefox 105.1.0
MacOS 12.4
Chrome 105.0.5195.125
Firefox 105.0.1
Thank you
2 Likes
renato
(Renato Atilio)
October 5, 2022, 4:20pm
6
I’m also facing this issue when clicking on avatars from the “who’s online” plugin and this behavior is the same here:
Don:
it is only happen on plugin, theme components. When I click the topic list avatar than click the other (plugin and TC) avatars the outline dissappier.
I tried it several browsers and same result.
2 Likes
keegan
(Keegan George)
October 18, 2022, 6:16pm
7
Thanks @Don , this should now be resolved
discourse:main
← discourse:a11y-fix-user-card-focus
opened 06:05PM - 18 Oct 22 UTC
This PR fixes an issue that was brought up on [Meta](https://meta.discourse.org/… t/user-card-huge-avatar-outline-appears-on-plugins-and-components/240454/4) where a focus ring appears on the user card (for themes/plugins) when clicking. This PR ensures the focus ring only appears when the user card is selected via <kbd>Tab</kbd> only rather than by click.
**After clicking on avatar:**
|Before|After|
|---|---
|<img width="707" alt="Screen Shot 2022-10-18 at 11 03 47 AM" src="https://user-images.githubusercontent.com/30090424/196509502-69c8b086-8b76-4267-ae5c-14fa5e2c065c.png">|<img width="706" alt="Screen Shot 2022-10-18 at 11 03 40 AM" src="https://user-images.githubusercontent.com/30090424/196509591-183cfb91-1729-4d41-8535-8b890e74da30.png">|
5 Likes
keegan
(Keegan George)
Closed
October 19, 2022, 3:00pm
8
This topic was automatically closed after 20 hours. New replies are no longer allowed.
Don
October 20, 2022, 7:12am
10
Hello Keegan,
Sorry for the late reply but I only can test it now. I checked it on Safari Version 15.5 and still see the outline when I open user card. Seems to on the other browsers are good.
It appears on every avatar except topic avatars for me.
Thank you
4 Likes
keegan
(Keegan George)
October 20, 2022, 3:24pm
11
Ah interesting, thanks for letting me know I’ll take a look into it
3 Likes
keegan
(Keegan George)
November 10, 2022, 6:14pm
18
This should now be resolved with:
discourse:main
← discourse:fix-user-card-focus-ring
opened 05:39PM - 09 Nov 22 UTC
This PR adds a check to ensure that the focus of the first item of the user card… is only present when the click was not by a mouse (i.e. a keyboard). This helps prevent the focus ring from appearing when simply clicking a user card.
5 Likes