How can you add a border to buttons when a keyboard is focused on that button? In order to make my app accessible I need to add a border to the focused element. Currently it looks like the first picture: the button itself becomes a bit grey. But I need to add a border around it for it to be more clear. I would like to achieve something like in the second picture.

It's important that I can add this in the compose theme, as I have a lot of buttons. I'd rather not change them 1 by 1. I've tried several things, without success.

How can you add a border to buttons when a keyboard is focused on that button? In order to make my app accessible I need to add a border to the focused element. Currently it looks like the first picture: the button itself becomes a bit grey. But I need to add a border around it for it to be more clear. I would like to achieve something like in the second picture.

It's important that I can add this in the compose theme, as I have a lot of buttons. I'd rather not change them 1 by 1. I've tried several things, without success.

• android
• android-jetpack-compose
• accessibility
• android-theme

Share Improve this question Follow asked Mar 11 at 18:41 MayaMaya 57955 silver badges1313 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

If buttons are navigated using the keyboard, they trigger :focus and :focus-visible. Adding styles for :focus-visible or :focus directly to the button element may work in your case.

 button:focus-visible {   outline: 2px solid green; }

You are going to want to use both the :focus pseudo-class in addition to the CSS box-shadow declaration. You will not be able to use "border" or "outline".

First, the pseudo-class can be targeted globally, which would meet your requirement. For example you can set:

button:focus {}

If you want to only target a set of buttons, you can use the pseudo-class along with other selectors, for example:

button.menu-buttons:focus {}

The reason you need to use box-shadow is you have the ability to place the outline inside the button or div. Simply adding a border on focus will cause the UI to shift because the border is adding height.

Your final product will look something like this:

button.menu-buttons:focus {
    box-shadow: 0 0 0 2px green inset;
}

Working codepen showing the difference between box-shadow and border:
https://codepen.io/jgoncalves/pen/LEYJEdj