Hi,
Does anyone know of a CSS trick that I can apply so that the Course Focus Outline Color is only visible for keyboard users only?
If I can work it out I will come back here and share it.
It should be possible but as it stands I cannot work it out, yet.
I’d also like to make the outline dashed (if I can get it to work for keyboard only) to match the client’s website.
I know how to change the CSS for this already but it would be great if this was an option in Evolve already.
@BarryBPS all you need to do is wait for the next Evolve release and it should just magically change to that behaviour!
(Although do note that browsers still force a focus outline onto text input/area fields - presumably on the reasonable assumption that you will be interacting with those using the keyboard even if you used the mouse to get to them)
So far all the QA for the release is going very well - so barring any last minute disasters I would expect that to go out early afternoon on Tuesday the 24th.
I’ll have a look at what it would take to add a dashed (and dotted) option for the focus outline. That won’t be in the release next week though.
This is music to my ears Matt!
Thank you for the quick response.
I promise I’m not stalking you on here @Matt_Leathes, lol.
I’m also interested in the dashed options for the focus indicator! And being able to set two colors would be amazing! I.e. white and black dashed so that it shows up regardless of the background color. Oh, and while I’m brainstorming, being able to adjust the spacing (padding?) of the indicator would be great too.
Any updates to share on this feature?
No worries @Adam_Thiel - that was a useful reminder that I did say I’d take a look at this! So, this is what I’ve been trying out so far:
And here are some screenshots of those settings in action:
Unfortunately there doesn’t seem to be any option using the standard CSS outline properties to do that.
Initially I was a bit unsure about including the ‘double’ and ‘offset’ options - but on seeing the effects you can create I think they could actually be a worthwhile addition. What do you all think?
One thing I was a bit concerned about is that this does give you the scope to exacerbate the issue of the outline being cut off:
Partly because we recently had a customer saying they’d had that flagged as being an accessibility failure… but on reading up a bit it seems to only be a fail if you’re attempting to meet Level AAA of WCAG 2.2 - which hasn’t yet been published…
FYI the reason this happens is just because that’s the way outline is handled by the browser, as described here.
@Matt_Leathes I love it! 
I was able to find this W3C article talking about how to code the two color focus indicator. Not sure if this will work with Evolve’s infrastructure (I’m not a web developer, but I’m dangerous enough with HTML to come up with ideas, lol) but I figured it’s worth a shot!
Adding an edit here: One of my co-workers asked a good question after I posted this. Can you set the offset to be negative to be able to inset the focus to the inside of an element instead of the outside? As I’m typing this I was thinking through it and that might not be great as a global setting. It would work fine for buttons and other elements (depending on how they were designed), but it wouldn’t work great for hyperlinks since any inset would likely cover up the text. Just a thought.
Excellent! Going to get that over to QA now then - it might not make next week’s release but should be in the one following that if not.
Thanks for the article on implementing a two-focus colour indicator… that’s definitely going to be more complicated to implement - but I can certainly see the value in having the option to do that so I’ll log it as something to look at when I have a bit more time.
You’re very welcome. That’s fantastic news. You’re my favorite person this week! Ha!
This went out in today’s release…
@Matt_Leathes Just went to check this option out, and unfortunately I’m seeing this error message:
Didn’t know if this was a result of me needing to set a different option somewhere else to activate this one, or if it was a bug?
Ooh that’s odd… seeing as it definitely does exist! I wonder if maybe hitting ‘refresh’ on Evolve would help? If not then if you could DM me or @Sam_Cook_Evolve_LQA a link to your Evolve instance one of us will take a look on Monday.
Ha, wow. Yep, that fixed it. I think I need to go take a nap. 
No problem at all, TBH that may be our fault - when we release a new version of Evolve there’s a setting that determines whether the new release should force a refresh of Evolve or not, I suspect that hadn’t been enabled when it should have been. Apologies for that.
@Adam_Thiel Just to say you’ll be seeing the option have a two-color focus outline in an upcoming release of Evolve…
Reviving this old post to ask where to find the setting in Evolve to change the focus outline? I see the screenshot in this post but can’t find it in Evolve. Thanks!
Theme > Course > Accessibility
