Skip to content

Feature request: Support standard rendering and interaction of checkbox/radio. #306

@EndlessJour9527

Description

@EndlessJour9527
  1. 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.).

  2. 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.

  3. 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.

  4. 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.

  5. 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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions