Systems and methods of implementing extensible browser executable components
View Patent ↗The technology disclosed describes systems and methods for implementing extensible browser executable components, such as popup controls for action, checkbox and radio button dropdown menus, modals, dialogs, date pickers and autocompletes. The disclosed technology systems and methods can also be used for rendering executable components for mobile application interfaces. The technology further discloses systems and methods for providing support for developers whose goal is to render specific implementations of browser executable components. The technology disclosed also describes systems and methods for bypassing suppression of DOM click event bubbling for a popup controls for action, checkbox and radio button dropdown menus, modals, dialogs, date pickers and autocompletes; and discloses systems and methods for implementing modal interaction between an iframe and a popup control.
1. A popup control development subsystem, including:
a hardware processor connected to memory;
a code generator running on the processor that generates code which when executed interacts with a controller-and-view interface and that implements menu, auto complete, date picker, and dialog popup controls, the generated code including:
a popup control implemented by a base popup container that contains at least a trigger component and a target component that interact with the controller-and-view interface to respond to transition events, wherein the transition events cause the popup control
to collapse, expand, show and hide the popup control, and
to recognize a trigger-select;
generation of the trigger component by the code generator includes generation of markup that causes a browser to use supplemental accessibility information in the markup to enable people with a visual impairment to perceive web content,
wherein the supplemental accessibility information includes a text alternative for non-text content;
the trigger component, when invoked, causes the controller-and-view interface to invoke the target component; and
the target component, when invoked, reveals and enumerates selectable target actions; and
a code editor that interacts with a user to:
accept a user selection among the menu, auto complete, date picker, and dialog popup controls and invokes the code generator to generate code for the base popup container, which contains code that extends base popup code to implement the selected popup control, including code that implements the trigger component and the target component corresponding to the user selection;
accept user inputs to complete the base popup container, the trigger component and the target component and implement a completed popup control corresponding to the user selection; and
store the completed popup control for later use.
2. The development subsystem of claim 1 , wherein the trigger component further includes:
code with an HTML anchor tag, which is an actionable semantic;
an HTML span container that holds assistive text; and
a role attribute that identifies to accessibility technologies how to handle the trigger component.
3. The development subsystem of claim 1 , wherein the target component further includes a positioning attribute that selects between automatic and manual positioning of the target component and enables reporting to accessibility technologies of a position at which the target component will be displayed.
4. The development subsystem of claim 1 , wherein the target component further includes a pre-transition attribute that enables pre-selection emphasis of a section of the target component, responsive to a user input.
5. A method of popup control development including:
receiving an input selecting among at least menu, auto complete, date picker, and dialog popup controls to generate code for the selected popup control;
generating code for completion of the selected menu, auto complete, date picker, and dialog popup control, wherein the generated code extends base popup code to implement the selected popup control, interacts with a controller-and-view interface and further includes:
at least one popup control implemented by a base popup container that includes a trigger component and a target component that interact with a controller-and-view interface to respond to transition events that cause the popup control
to collapse, expand, show, and hide the popup control, and
to recognize a trigger-select;
wherein generating code for the dialog popup control includes generating markup that causes a browser to use supplemental accessibility information in the markup to enable people with a visual impairment to perceive web content,
wherein the supplemental accessibility information includes a text alternative for non-text content;
the trigger component, when invoked, causes the controller-and-view interface to invoke the target component; and
the target component, when invoked, reveals and enumerates selectable target actions; and
interacting with a user to edit the generated code, including accepting user inputs to complete the base popup container, the trigger component and the target component and implement a completed popup control corresponding to the user selection; and
storing the completed popup control for later use.
6. The method of claim 5 , wherein generating the trigger component further includes generating:
code with an HTML anchor tag, which is an actionable semantic;
an HTML span container that holds assistive text; and
a role attribute that identifies to assistive technologies how to handle the trigger component.
7. The method of claim 5 , wherein generating the target component further includes generating a positioning attribute that selects between automatic and manual positioning of the target component and enables reporting to accessibility technologies of a position at which the target component will be displayed.
8. The method of claim 5 , wherein generating the target component further includes generating a pre-transition attribute that enables pre-selection emphasis of a section of the target component, responsive to a user input.
9. A tangible non-transitory computer readable storage medium holding code that, when executed, causes a computer system to:
receive an input selecting among at least menu, auto complete, date picker, and dialog popup controls to generate code for the selected popup control;
generate code for completion of the selected menu, auto complete, date picker, and dialog popup control, wherein the generated code extends base popup code to implement the selected popup control, interacts with a controller-and-view interface and further includes:
at least one popup control implemented by a base popup container that includes a trigger component and a target component that interact with a controller-and-view interface to respond to transition events that cause the popup control
to collapse, expand, show, and hide the popup control, and
to recognize a trigger-select;
wherein generating code for the dialog popup control includes generating markup that causes a browser to use supplemental accessibility information in the markup to enable people with a visual impairment to perceive web content,
wherein the supplemental accessibility information includes a text alternative for non-text content;
the trigger component, when invoked, causes the controller-and-view interface to invoke the target component; and
the target component, when invoked, reveals and enumerates selectable target actions; and
interact with a user to edit the generated code, including accepting user inputs to complete the base popup container, the trigger component and the target component and implement a completed popup control corresponding to the user selection; and
store the completed popup control for later use.
10. The tangible non-transitory computer readable storage medium of claim 9 wherein the trigger component further includes:
code with an HTML anchor tag, which is an actionable semantic;
an HTML span container that holds assistive text; and
a role attribute that identifies to accessibility technologies how to handle the trigger component.
11. The tangible non-transitory computer readable storage medium of claim 9 , wherein generating the target component further includes generating a positioning attribute that selects between automatic and manual positioning of the target component and enables reporting to accessibility technologies of a position at which the target component will be displayed.
12. The tangible non-transitory computer readable storage medium of claim 9 , wherein generating the target component further includes generating a pre-transition attribute that enables pre-selection emphasis of a section of the target component, responsive to a user input.