Problems with button focus

I’m working on the calculator project.

https://marcnshapiro.github.io/calculator/index.html

When the mouse hovers over a button the background and borders changes as they should, but the text color ALSO changes from white to black. The text color change seems to be due to ‘focus’. At first I did not even notice the text color change since it was not an issue for visibility. If I move the mouse off of the button then the color returns to white. So far, so good. If I click on the button, however, then when I move off of the button, the focus state remains until I click somewhere else, and the text color is wrong (now it IS a visibility issue)! How do I get the button focus to NOT change the color of the text? (NOTE: the ‘Shift’ button starts out with black text, so I can not simply set the color to white for the focus state.)

I think that all of this started when I changed from button styled links (which I copied from a previous project) to actual buttons. Links and buttons probably treat focus differently.

First of all, your scientific calculator makes me scientifically giddy. I like very much.

The easiest way to fix your problem will probably be to set the focus state. Just like with :hover, we have the :focus pseudo-selector. Cram that in your stylesheet to define your text color on focus. A less attractive, and arguably less accessible, method would be to set the focus state in your click handlers.

var numberButtons = document.getElementsByClassName('number-buttons');
numberButtons.addEventListener('click', function(event) {
   //do scientific things
   this.blur(); // .blur() means "unfocus"... get it?
})

At least, I think that’s how it goes in vanilla JS. In jQuery, it’s simply

$('.number-button').click(function(event) {
   //handle scientifically
   $(this).blur();
});

The problem with doing this is that you could be interfering with the way some assistive technologies work.

I’m glad you like the calculator. It has been a lot of fun to work on. I would like to add multiple memories and the ability to fix the number of decimal places. I also still need to set a maximum number of digits and a few other tweaks.

Is there a way, using the :focus pseudo-selector to say “don’t change the text color at all”? That is what I have been looking for. The issue is the ‘SHIFT’ key that has black text to begin with (because of the yellow background". If I set the color to ‘white’ in .btn-custom:focus, then the text on the shift key will switch to white when in focus and will have the same visibility issues when it is in focus (but not hover, or active).

Because focus is something that each browser handles differently (I don’t actually see the problem you describe in Safari), it’s best to define the focus state. What you could do is just set :focus to be the same as the default state

.btn-custom,
.btn-custom:focus {
  /* Same rules you already use here */
}

The default state, however, is different for the “SHIFT” key than for the others. It has an additional class that changes its’ background and text colors. I found the solution, however. For both :hover and :focus I also added an additional block using .color-yellow as shown below. This forces it to the correct color in all situations.

.btn-custom:hover {
  background: #3f6fff !important;
  border: solid 1px #2A4E77;
  text-decoration: none;
  color: white;
}

.btn-custom:hover.color-yellow {
  background: #3f6fff !important;
  border: solid 1px #2A4E77;
  text-decoration: none;
  color: black;
}

.btn-custom:focus {
  color: white;
}

.btn-custom:focus.color-yellow {
  color: black;
}
1 Like