highlighting button when clicked

[aratn]

if you click on the primary button on below link, it will get highlighted. I have seen it in the Twilio console as well. I was curious to know what’s the thought process behind it. I felt tab focus would be a good candidate to highlight while navigation rather than on click. Also, the Aria functionality and tab order navigation between the components are not consistent.

https://paste.twilio.design/patterns/button-vs-anchor/#buttons

[gloriliale]

Hi @aratn! The Button component has a focused state after being clicked in the example since the onClick for the example doesn't have any other functionality (in a product experience, that wouldn't be the case). (Edited: wanted to clarify here that clicking a button puts it in focus in every case). Button has the same focused state when it is tabbed into as well (darker background and focus ring). Could you specify where this behavior is not the case? You mentioned Console, but where specifically in Console?

For the the Aria functionality and tab order- could you be more specific about where this is the case (is it in a product experience, our docs, the components themselves?) and what the inconsistency is?

All these details will be really helpful to make sure we're addressing your concern. Feel free to include screenshots or other visuals if they're relevant!

[aratn]

Thank you @gloriliale for your prompt response. Below are my observation, I tried to capture most of the details. I use keyboard more frequently as compare to mouse/touch which made me to put the questions out here.

1. When I click the Add button it showed me few options, I didn't select and went back ( pressed escape button on keyboard ) the button was in focus with blue highlighted border. My concern was specific to the blue border coming while performing the click. I think It should appear when a tab is pressed on keyboard. Focus will always be there when a button is clicked which is right.
   

2. While navigating through console there are list of products on the left. In a tree like navigation the Arrow key takes place to navigate the option (enter button to expand/collapse the option which can be managed with arrow keys as well). I could only navigate by pressing tab even if the item is expanded and it has list of child elements to navigate.
   

3. In below scenario, I clicked on button "Create Service" which open a modal and has focus in the text box. when I closed the modal pop up, the focus gets lost. Pressing the tab takes me back to start ( above Create Service button there is a hyperlink "CLI" ). Ideally it should be back on the same button ( "Create Service" ). It seems it's more like a bug but correct me if I'm wrong.

[gloriliale]

Hi @aratn! Thanks so much for including so much detail and visuals- super helpful!

1. For our buttons, we apply focus styling on :focus as opposed to :focus-visible, which is why there's a blue focus ring around it on click and on keyboard press. Though it could work differently, we think the current functionality looks and works better (especially given this cognition caveat for :focus-visible), and haven't received any strong signals to indicate a switch is needed.

2. Right now, we don't have a tree component in our system, which is why Console's nav is built using a series of disclosures. This is why the arrow key navigation for a tree isn't available. While the nav is still accessible, a tree would definitely be a more ideal experience. Once we do have a tree component (it's currently in our backlog), the Console team would have the option to rebuild the nav using it.

3. Agreed that this is a bug! Our Modal is built in a way that restores focus when closed, so this is an implementation issue for this console product. I'd reach out to them directly to let them know.