[joy-ui][Select] No focus-outline if focused by label

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/joy-ui/react-select/#accessibility

Steps:

1. Scroll to accessibility demo
2. Click on Label
3. No focus outline

Current behavior 😯

"button" of Select does not have a focus outline if it is focused by a label.

The element is in focus though, So it's just an a11y cosmetic issue.

Expected behavior 🤔

Here's a demo of the desired behavior and also a workaround:

https://codesandbox.io/s/upbeat-haze-qvxzk7?file=/Demo.tsx

Context 🔦

I want consistent a11y and cosmetic appearance of my form fields

Your environment 🌎

  System:
    @emotion/react: 11.11.1 => 11.11.1
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.17
    @mui/core-downloads-tracker:  5.14.11
    @mui/icons-material: 5.14.11 => 5.14.11
    @mui/joy: 5.0.0-beta.8 => 5.0.0-beta.8
    @mui/material: ^5.14.11 => 5.14.11
    @mui/private-theming:  5.14.11
    @mui/styled-engine:  5.14.11
    @mui/system:  5.14.11
    @mui/types:  7.2.4
    @mui/utils:  5.14.11
    @types/react: ^18.2.23 => 18.2.23
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.2.2

Start with the Joy UI Select accessibility demo linked in the issue and reproduce the problem by clicking its label. Compare the current focus behavior with the linked CodeSandbox workaround; done means the Select button visibly shows its focus outline when focused through the label.