-
Notifications
You must be signed in to change notification settings - Fork 3
Description
-
Description
Added standard visual rendering and interaction support for and to the JSAR runtime, covering common states in major browsers (unchecked, selected, disabled, focused, etc.). -
Background
Currently, JSAR only sets the width and height for checkbox/radio, without any visual rendering logic, resulting in the inability to display checkboxes/radio boxes correctly, and does not support visual feedback and interaction of checkbox/radio status. Mainstream browsers draw borders, backgrounds, checkbox/dot markers for these controls, and support click-to-to-state status, disable state graying, focus highlighting, etc. -
Expected behavior & requirements
Checkboxes/radioboxes should have a standard visual representation: border, background, check mark (tick/dot), disabled state, focus state.
Supports rendering of states such as checked/unchecked/disabled/focus/indeterminate.
You can click to toggle the checked state to trigger the onchange event.
Supports keyboard/mouse focusing and interaction.
The visual style can refer to mainstream browsers (Chrome/Firefox/Safari) to ensure basic consistency.
Properties and events that are compatible with existing input elements. -
Implementation proposal
Investigate mainstream performance: Gather visual details and interaction specifications of mainstream browsers checkbox/radio to determine the state and style that needs to be supported.
Rendering scheme design: Design the visual representation of checkboxes/radio boxes in the JSAR rendering layer, including borders, backgrounds, checks/dots, disabled states, focus states, etc.
Layout layer support: In [LayoutHTMLInput] and assign a dedicated rendering entrance to it.
Drawing logic implementation: Implement the specific drawing of checkbox/radio at the rendering layer, including:
Unchecked: Border + Background
Check: Border + Background + Tick/Dot
Disabled: Grey Display
Focus: Highlight the border
indeterminate: bar mark
Interaction support: Implement click/keyboard switching checked state, support disabled state is not interactive, focus state is highlighted, and onchange event is triggered.
Testing and validation: Write/refine test cases that cover various states and interactions, ensuring rendering and behavior as expected. -
Points to consider
Visual representations need to be compatible with different platforms/resolutions to ensure accessibility (e.g., high contrast mode).
Performance should be considered to avoid complex drawing affecting rendering efficiency.
The interaction logic needs to be compatible with standard DOM events to ensure that events such as onchange, focus, blur, etc. are distributed properly.
Extend custom styles (like CSS overlays) in the future.
Layout and event handling frameworks that need to be consistent with other input types (e.g., text, button).
This solution will significantly improve JSAR's compatibility and user experience with standard form controls, meeting the rendering and interaction needs of mainstream web content.