Focus Visible Issues with Button

[stevegreco]

I am aware from other discussions that the fact that the Button is focuses programmatically causes the :focus-visible styles to be applied onPress. My issue is that the examples in the documentation seem to not have this behavior, so I am curious how that is being accomplished.

We have a global fallback to ensure consistency, but even if I remove that, we just get the browser defaults for the :focus-visible on the Button.

I am curious what is being done in the documentation to prevent this on the Button, but when I use the Button I am getting different behavior. How are people addressing this?

This seems to work, but I do not see anything close to this in the CSS as part of the docs examples.

[data-focused]:not([data-focus-visible]) {
  outline: none;
}

[reidbarber]

All the docs examples should have outline: none on the default styles to prevent this. Doesn't necessarily need to have [data-focused]:not([data-focus-visible]).

Here are a few examples:

Button:

.react-aria-Button {
  color: var(--text-color);
  background: var(--button-background);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  appearance: none;
  vertical-align: middle;
  font-size: 1rem;
  text-align: center;
  margin: 0;
  outline: none;  /* <---------- */
  padding: 6px 10px;
  text-decoration: none;

  &[data-pressed] {
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
    background: var(--button-background-pressed);
    border-color: var(--border-color-pressed);
  }

  &[data-focus-visible] {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: -1px;
  }
}

ListBoxItem:

.react-aria-ListBoxItem {
  margin: 2px;
  padding: 0.286rem 0.571rem;
  border-radius: 6px;
  outline: none;  /* <---------- */
  cursor: default;
  color: var(--text-color);
  font-size: 1.072rem;
  position: relative;
  display: flex;
  flex-direction: column;

  &[data-focus-visible] {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: -2px;
  }

  &[data-selected] {
    background: var(--highlight-background);
    color: var(--highlight-foreground);

    &[data-focus-visible] {
      outline-color: var(--highlight-foreground);
      outline-offset: -4px;
    }
  }
}