Add accordion style #138
Add accordion style #138
Conversation
| } | ||
|
|
||
| .os-raise-accordion { |
There was a problem hiding this comment.
Wasn't sure where to put this comment, but I thought I'd flag something I noticed when navigating via keyboard: I see red bottom borders on FF (I would screenshot, but when I go to do it they go away 🙃 ). On Chrome they seem to be black. Maybe those are defaults and there is some styling we need to specify?
There was a problem hiding this comment.
When navigating the accordion by keyboard on firefox I was unable to reproduce the red bottom border. I am using tab and enter to navigate the accordion. Are you using a different method?
There was a problem hiding this comment.
🤔 -- No, that's what I'm doing. Maybe I can screen share when we chat later today. Perhaps it is specific to my environment / build of FF.
There was a problem hiding this comment.
@P-Gill97 : Just as a follow up from our live convo, I confirmed that on my Mac I see the blue vs red when tabbing across the accordion sections.
There was a problem hiding this comment.
@rnathuji
If we add this CSS below it should fix this problem. Although, should we be enforcing what the user's accessibility preferences are on their browser? I am thinking about a scenario where the user may want the tab focus border to be red or any other color. 🤔
.os-raise-accordion-header:focus {
outline: 1px solid blue;
}There was a problem hiding this comment.
Interesting article, I did not expect the focus lore to be this complex 😆. I think I'll ask @madisonschear for her preference when shes back.
There was a problem hiding this comment.
🤔 -- I see. Playing around a bit, I notice that in general the focus colors when navigating via keyboard vary across my systems (Linux vs Mac) on other items like math, interactives, etc. Given that, I think if we want to tweak these for consistency, it's probably something we need to look into holistically. I vote we leave this alone so we're consistently inconsistent for the time being 😅 .
There was a problem hiding this comment.
@P-Gill97 - Yeah, good call as far as getting input from UX. I do think that if we want to create CSS to make things consistent, it's probably a separate issue we need to spin up so we can identify / address multiple items that I'm finding can vary.
|
I got a final UX review on the accordion styles. Maddy pointed out some CSS things she wanted changed.
I fixed these things and will merge into main tomorrow. |
No description provided.