search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.62k stars 6.95k forks source link

[Bug Report][3.6.13] Menu popup focusing issue #20225

Open Muthukumaran-G opened 1 month ago

Muthukumaran-G commented 1 month ago

Environment

Vuetify Version: 3.6.13 Vue Version: 3.4.34 Browsers: Edge 126.0.0.0 OS: Windows 10

Steps to reproduce

  1. Expand the rail.
  2. Tab navigate and go to 'Activator Slot' button.
  3. Press enter to open the menu dropdown.
  4. Now in the expanded state, click anywhere outside the browser page like in the taskbar.
  5. Now click the browser tab.

Expected Behavior

When v-menu button is focused, the focus should stay until tab pressed to navigate to dropdown elements. If Shift+Tab pressed the focus should go back to the button from dropdown elements.

Actual Behavior

Note that the first dropdown element is focused and not the menu button. Also when pressing Shift+Tab after step 3, the focus goes to first dropdown element and not to the previous list-item. Pressing Shift+Tab again moves the focus to rail button and not to the list-item. Seems like inconsistent behavior.

Reproduction Link

https://play.vuetifyjs.com/#...

KaelWD commented 1 month ago

It isn't clear what you're actually reporting here, is this something to do with browser window focus or just tab order? How is the rail drawer relevant?

Muthukumaran-G commented 1 month ago

Ignore the rail. Check with below demo. Its related to tab order.

https://play.vuetifyjs.com/#eNrdV19r2zAQ/yrCL2khtreWjmGystI9jLG+bPSp6YNqXxK1siRk2WsI+e47yVH8N2mhjMLyEPtOP9397o+Uy90mKHQaXykVVSUESTAzkCtODVzOBSGzKkypzty7kzhdy9LsZKcRtGJLapgUYabpH9CkCnOZAf8yD2rFPCAKdE4FiGZnbY0VJmTosdESojQoEFlIK2qoRisrY1SRxLGmIpN5WYCOcoipYrGS2mjKTBHnIOLPF9GjWs6DtjHDDAe08UOuBPkJLLN02gCk34gtdsjPZwIDKrg0CVWWVwfjongwgrBUCnSTZyxMV1BpzAaHhcHQK6oZFQYXDTyj4nIWuy1dX3En7V7ZyhDqO6nLWGWDcdb8ew9i9/piJBK5Q4Ys7Auy6Hhv+dmnvxXRSuaAkfhcfnei8zxOr7G41LJUmAJe2o23WLqi53ssz6lhWHtpa79BPlIVZDvYdriB6g8mmQkbsDPQLXq30VqR0jSVpTBhynTKMcjhJp+EXSx9wJBkL0uDELBzy4H+DVlpNWUquYMrzXKq17YZe0m5JFfeLLFeHN1+cx5p0V4pDpE5Uqa6VAvH88RCpgQZwvMpPoiVR0tnP8kTrHGTQx/E+NY7ghol3aUduqpfbjaOUeQkst12arvDjGbgaA8066PNM9IfnVIMrqORg3eV5ax/6N/YZJ07o99W+1PiHb9wCg7H8/Ip37XOnXOJzYOH+R4frn+odT/aQL55Rtd6F4N9jOJ8lO45ivAFOIA4mpf9mqvlayuNBZQ25Heo9d71O1U71WX23xT7FUuDa8MqBuNYe1bLKaapMGsXyArYcmUScnbxQeHV6OhZgB/2rPVm2rPibhTsFXBWpJqpGgXPdiQjGSxoyQ3Z1KYyHOROTr1EiAZTatHIiHBUE2J0CdNGjbMdHyjtAJOQu4n7BZ7ct1bczwUutbO3qfszIZNrztIncgMTsm3t+VcIctbFtHnW11KP6N3khgq6BLzvzWRKJu1xJMdkMsUhxGpwJqATtd36G4xhYln4jalcjmLb7+64DEhca8DCejuKl8VBp7+AZh64YEfY3SrsgL3Nspb6oG/AoQHhyGqlce7b+qVOLwqzeN+CwTRACk9F9FhIgX9nXI/Ng7TAi8HGuv8zkWYCMeiGVToSYGKh8hj/Ahm2WH89jz5FH8/jDA+X1+FZeCgiZ+d+LtBpsJ2KknP3df8XWAu/gQ==