search

w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.18k stars 313 forks source link

Add keyboard guidance for expandable textarea input control #1925

Open philljenkins opened 3 years ago

philljenkins commented 3 years ago

Design systems and developers are starting to use expandable textarea components/widgets with mouse control in bottom right of textarea (see image) for expanding the textarea. Need best practice for a keyboard way to expand area that is equivalent to mouse operation. Would Alt+DownArrow work to incrementally expand the textarea? See similar to how there is a discussion on dropdowns:

Collapsible Dropdown Listbox Example: Single-select collapsible listbox that expands when activated, similar to HTML select with the attribute size="1".

maybe related to https://github.com/w3c/aria-practices/pull/1277 but keyboard way to expand textarea is not addressed in the commits / PR. Only labeling considerations seem to be discussed in best practices.

Screen shot of two expandable textarea components: image See live demo of textarea here: https://www.carbondesignsystem.com/components/text-input/usage#live-demo

Benefit Keyboard way to expand textarea would benefit low-vision magnifier user and cognitive user so scroll bars are not present and hiding information. May not impact screen reader users because info is usually read regardless of content displayed in textarea.

JAWS-test commented 3 years ago

Mostly a textarea can be scaled in 2 directions (bottom, right). Thus we would need 2 keyboard shortcuts as alternative

JAWS-test commented 3 years ago

We should also note that the resize property often occurs with textarea, but can be used with many HTML elements. Thus, a keyboard alternative should not be limited to textarea, but should apply generally. However, this would be the responsibility of the browsers, not ARIA. Thus, the ticket should perhaps rather be opened with the browser manufacturers.

JAWS-test commented 3 years ago

The resize problem would be much greater for other elements than textarea. A textarea gets the focus and can be scrolled with the keyboard, i.e. resizing is not essential. A div with resize does not get focus and thus cannot be scaled or scrolled. This is a bug of the browsers in my eyes, as this violates WCAG 2.1.1. However, the problem also occurs without resize, because scrollable div elements never get focus except in Firefox