<aside> 🚧 Work in progress
</aside>
When using modal boxes or other kind of pop up in your ui, you may feel like it is a part of a logical block reachable by anyone, the visible screen. It is not.
Browser use a technology called DOM, that has the responsibility for organizing, observing and rendering the interface. When you see the ui, you most probably have an actually fake idea of the way it has been organized if you are not a developer, especially when it comes to pop up content.
The DOM actually organise a web application as a tree, let say the first branche is a title, the second a button and the third is a fancy image, when you will click the button to open a pop up, the DOM may actually create a forth branch to this tree, when your visual logic will represent it as just another block, on top of all the other and easily readable.
But what if you are blind ? Then you will probably not notice the forth branch, you will keep clicking a button that may even not exist anymore as the DOM not only create branches but also remove them. You will use the Tab key, which is set on your browser to go to the next focusable element of the DOM and will have to go trough the whole interface before you are able to, maybe, focus the pop up.
Why maybe ? Because this forth branch may actually not exist in you current context and you have no way to navigate to the new context, so the whole pop-up is missing in your UI.
The good thing is you may actually use the DOM to move the focus to this new branch and make it not only readable, but clickable, as well as giving options to the user to leave it with is not possible if you only close it with an unfocusable background.
Why the GOV.UK Design System team changed the input type for numbers
<aside> 🚧 There is more to say - Work in progress
</aside>