Assistive HTML: consider annotating currently-inactive UI HTML elements as 'inert'

[jayaddison]

Is your feature request related to a problem? Please describe.
The HTML in the application's singleton index.html page contains HTML elements to describe multiple views within the application - e.g. the search panel, the meal-planner panel, shopping list panel, and so on.

Only a single view is active at any given time, and so the content of the other views should not be navigable.

The HTMLWG spec defines an inert attribute that can be used to indicate that certain HTML element trees are currently not intended to be part of of the navigable webpage as presented to the user. It is possible that these attributes can be updated by dynamic code (e.g. scripts) in the HTML page.

I haven't yet encountered any problems in web browser user agents as a result of the application's inactive HTML elements lacking the inert property. But now that we're aware of it, it may be worth adding since it could help other user agents and/or assistive technology.

Describe the solution you'd like

• Add the inert property to all of the non-default application views (the default is the search view -- we should not add inert to that, because users opening the application for the first time will be displayed the search UI and it will be navigable/usable and thus not inert).
• Update the view-change logic in the application to:
  • Remove the inert property from the HTML elements related to the view that has been selected.
  • Add the inert property to the HTML elements related to the view that was previously selected.

Describe alternatives you've considered
N/A

Additional context
N/A