Research window splitter accessibility

[nakayan5]

Description

read this article and research windowsplitter accessibility

modify component if necessary

Problem Statement/Justification

none

Proposed Solution or API

No response

Alternatives

• [x] #1633

Are you willing to participate in implementing this feature and create a pull request include the implementation?

None

Additional Information

No response

[nakayan5]

@yamada-ui/resizable is applicable to this issue

Keyboard Interaction

• [x] Left Arrow: Moves a vertical splitter to the left.
• [x] Right Arrow: Moves a vertical splitter to the right.
• [x] Up Arrow: Moves a horizontal splitter up.
• [x] Down Arrow: Moves a horizontal splitter down.
• [x] Enter: If the primary pane is not collapsed, collapses the pane. If the pane is collapsed, restores the splitter to its previous position.
• [x] Home (Optional): Moves splitter to the position that gives the primary pane its smallest allowed size. This may completely collapse the primary pane.
• [x] End (Optional): Moves splitter to the position that gives the primary pane its largest allowed size. This may completely collapse the secondary pane.
• [ ] F6 (Optional): Cycle through window panes.

WAI-ARIA Roles, States, and Properties

• [x] The element that serves as the focusable splitter has role separator.
• [x] The separator element has the aria-valuenow property set to a decimal value representing the current position of the separator.
• [x] The separator element has the aria-valuemin property set to a decimal value that represents the position where the primary pane has its minimum size. This is typically 0.
• [x] The separator element has the aria-valuemax property set to a decimal value that represents the position where the primary pane has its maximum size. This is typically 100.
• [ ] If the primary pane has a visible label, it is referenced by aria-labelledby on the separator element. Otherwise, the separator element has a label provided by aria-label.
• [x] The separator element has aria-controls referring to the primary pane.

[nakayan5]

@illionillion please double check

[illionillion]

@nakayan5 Checked. The same item applied. Do you want to correct the items whose checkboxes are not checked?

[nakayan5]

@illionillion

F6 (Optional): Cycle through window panes.

This is optional, so I don't think it's necessary. I think aria-label or aria-labelledby is necessary.

@hirotomoyamada What do you think ?

[hirotomoyamada]

@nakayan5

F6 (Optional): Cycle through window panes.

This does not correspond

[nakayan5]

created issue https://github.com/yamada-ui/yamada-ui/issues/1633