search

microbit-foundation / python-editor-v3

Micro:bit Educational Foundation Python Editor V3
https://python.microbit.org
MIT License
57 stars 37 forks source link

Inconsistent tab order / initial focus #973

Closed kmcnaught closed 2 years ago

kmcnaught commented 2 years ago

Bug Description

I have been reviewing the tab order for keyboard/screen-reader users, and it appears that sometimes focus starts in the top left and follows a logical order top-to-bottom and left-to-right and other times it jumps straight into the simulator pane. Once underway the tab order is consistent, it's just like we've short-circuited it by focussing the simulator at an inopportune moment.

How To Reproduce

Sometimes I can reproduce this consistently by using a screen reader, or not. But I imagine this is purely coincidentally, since the page should not know whether a screen reader is being used. And it doesn't always occur consistently.

Steps to reproduce the behavior:

  1. Load https://python.microbit.org/v/beta
  2. Hit F5 to refresh to get consistent starting state
  3. When page is loaded, press tab a few times and observe focussed elements

On several occasions I have seen the correct behaviour occurring when either Narrator or NVDA are running, and the incorrect behaviour occurring when they are not. As I started writing this issue I was observing the bug on the live editor, but right now I can only trigger it on a local version (2fd2bfd).

Expected behaviour

Tab order should start from top left like in screenshot below

Screenshots

Correct tab order

Note that there may be a separate discussion to be had about the best tab order, depending on whether the left hand pane is collapsed or expanded, but this certainly seems to be the intended behaviour.

screenshot showing tab order starting at top left of web page

Incorrect tab order

screenshot showing tab order starting on right-hand simulator pane

Environment

microbit-matt-hillsdon commented 2 years ago

It is likely that this issue was fixed by https://github.com/microbit-foundation/python-editor-v3/pull/900 merged as ac0a9ec963090f3e236ea50e2b88651fd2502c84 on September 8th vs your local commit from end of August. Failing that it's definitely the code to review as it's the only focus call that affects the simulator.

microbit-robert commented 2 years ago

NVDA definitely changes the behaviour. Without NVDA, tabbing order is as expected.

With NVDA, on first load, tabbing order is as expected. However, if you interact with the code area, and then refresh, the tabbing order changes unpredictably. If the left hand sidebar is open, it will tab to an entry inside Reference/API etc. If the left hand sidebar is closed, it will tab the "Send to micro:bit" button. I've just seen it jump to the simulator, I think it depends on where the cursor was last positioned in the code area.

Note, a hard refresh CTRL - F5 / CMD - R results in normal tab behaviour.

With or without NVDA, on first load or a subsequent refresh on screen widths of <1366px, it is not possible to tab to "Reference", "Ideas", etc. The sidebar must be opened before these become accessible. Once opened, the sidebar can be closed again and these items remain accessible.

kmcnaught commented 2 years ago

@microbit-robert good spot that a soft/hard refresh may give different behaviour with NVDA - presumably it maintains some state on a soft refresh. The issues you describe are separate to the very specific behaviour I described above (but am struggling to replicate now, so could have been fixed by ac0a9ec). I'll open a separate issue to discuss the overall tab order concerns.

microbit-robert commented 2 years ago

Reading around this, NVDA by design remembers where the user's last position when returning to a previously visited web page. This isn't working quite as expected with the Python Editor.

microbit-robert commented 2 years ago

Somewhat more inexplicably, running the Editor locally yields different behaviour to the beta. Locally, I always start focussed in the simulator.

kmcnaught commented 2 years ago

Somewhat more inexplicably, running the Editor locally yields different behaviour to the beta. Locally, I always start focussed in the simulator.

Does this occur with and without NVDA running?

microbit-robert commented 2 years ago

Somewhat more inexplicably, running the Editor locally yields different behaviour to the beta. Locally, I always start focussed in the simulator.

Does this occur with and without NVDA running?

This is without NVDA, but I suspect introduced by https://github.com/microbit-foundation/python-editor-v3/commit/ac0a9ec963090f3e236ea50e2b88651fd2502c84.

kmcnaught commented 2 years ago

I suspect if you run NVDA you will "fix" it, could you please test?

microbit-robert commented 2 years ago

982 has fixed all issues relating to focus and tab order with and without NVDA when the project is run locally (not inside an iFrame). When using the beta deployment (inside an iFrame), NVDA is causing the focus to switch to different areas of the Editor.

microbit-matt-hillsdon commented 2 years ago

All being well with some other tasks, we'll remove the iframe for the Python Editor launch. However, we still plan to embed the app in micro:bit classroom so it's worth us exploring it further in that context.

microbit-matt-hillsdon commented 2 years ago

All being well with some other tasks, we'll remove the iframe for the Python Editor launch. However, we still plan to embed the app in micro:bit classroom so it's worth us exploring it further in that context.

This issue should now be fixed for the beta deployment. The micro:bit classroom scenario is affected by this issue (as it embeds the editor in an iframe) and we've raised an internal ticket for this.