slab-elements@0.2.0

Minor Changes

• #63 95ef80a Thanks @ynotdraw! - Color Picker's thumbs each hold a visually hidden range input, which is what's focused and what screenreaders read, so screenreaders on phones can adjust them with a swipe up or down. The area has a second one for its brightness, "Brightness" after label, left out of the tab order. The thumbs are no longer [role=slider]s themselves, and since they aren't focused, they don't match :focus-visible: style a thumb's focus ring through its new focus-visible part, as in ::part(hue-thumb focus-visible).

• #62 ac4b5b8 Thanks @ynotdraw! - Range Slider's thumbs each hold a visually hidden range input, which is what's focused and what screenreaders read, so screenreaders on phones can adjust them with a swipe up or down. The thumbs are no longer [role=slider]s themselves, and since they aren't focused, they don't match :focus-visible: style a thumb's focus ring through its new focus-visible part, as in ::part(start focus-visible).

Patch Changes

• #61 62c9ae5 Thanks @ynotdraw! - Combobox now tells screenreaders how many Options are left once typing pauses ("No results", "1 result", "3 results"), and which tag was removed when multiple is set. Before, filtering and removing a tag happened silently. Both messages can be replaced, through resultsLabel and removedLabel.

• #52 03477ce Thanks @ynotdraw! - aria-* attributes on a component's host now reach the element a screenreader reads, such as Text Field's <input> or Disclosure's <summary>, in Checkbox, Color Picker, Combobox, Date Field, Disclosure, File Drop, Number, Pin Input, Range Slider, Slider, Switch, Text Field, Textarea and Time Field. Before, an aria-label or aria-describedby you put on the host went unread, and so did the description Tooltip gives its anchor and the aria-expanded Popover and Menu give theirs when the anchor was one of these. ID references, such as aria-describedby, are resolved where the host is and kept in step as they change.

• #53 e959074 Thanks @ynotdraw! - Carousel's autoplay no longer rotates when the user prefers reduced motion, and it stops for good once focus moves into the carousel, as the APG's carousel does, rather than starting again when focus leaves. The rotation button starts it in either case.

• #45 956ac66 Thanks @ynotdraw! - Adds Command Palette, slab-command-palette: a modal search for commands. It's Dialog, with a Combobox's <input role="combobox"> and a listbox of slotted Options inside, so it has Dialog's open, show(), close(), closedby, label, focus trap and "cancel" and "close". Opening it empties the input and focuses it. Typing filters the Options by filter, a case-insensitive substring of their text by default, and makes the first match active, so Enter runs the best one. Up and Down move the active Option. Enter or a click closes the palette with the chosen Option's value as returnValue. A Close button beside the input closes it without choosing, which matters on phones where closedby="any" isn't supported, and the close slot changes what it says. Closing it any way other than choosing leaves returnValue empty. query is what's been typed, and the input's "input" leaves the host, for fetching results as the user types. When nothing matches, the listbox is hidden, the host matches :state(empty), and the empty slot is shown in a status region. Style it through ::part(dialog), ::part(label), ::part(input), ::part(close), ::part(listbox) and ::part(empty).

• #42 79651cb Thanks @ynotdraw! - Adds Copy Button, slab-copy-button: a native <button> that writes text to the clipboard when it's pressed. It copies value, or, with from, the value or rendered text of the element with that id at the moment it's pressed, so a code block or an input can be copied without keeping value in step. Once copied, copied-label ("Copied") is announced from a status beside the button, the host matches :state(copied) for feedback-duration (2000ms by default), and "copied" is dispatched. When the clipboard refuses, as it does in a page that isn't served securely, failed-label is announced, the host matches :state(failed), and "copy-error" is dispatched instead. Style it through ::part(button), :state(copied) and :state(failed).

• #36 837aa4e Thanks @ynotdraw! - Adds Date Range Field, slab-date-range-field: two native date inputs, a start and an end, for picking the first and last days of a range. Each input's bound is the other's value, so a browser's picker won't offer an end before the start, and an end typed before it is rangeUnderflow and rangeOverflow, as a date outside min and max is on a single input. start-value and end-value are ISO "yyyy-mm-dd" strings, and the form gets both under name, the start and then the end. The group is named by label, and each input by it and start-label or end-label, "Start" and "End" unless you set them. Style it through its parts and :state(disabled), :state(error), :state(readonly) and :state(required).

• #41 d257c59 Thanks @ynotdraw! - Adds Editable, slab-editable: text that's edited in place, such as a title or a name. It's a native button showing the value, named by label and then the value, that becomes a native input when it's pressed, with the text selected. Enter commits what's typed and Escape discards it, and both put focus back on the button. Moving focus away commits it too. value is the last committed value, and it's what the form gets under name. "change" is dispatched when an edit is committed with a different value. edit(), commit() and cancel() do what the keys do, and editing says which is showing. While it's empty, the button shows placeholder. Style it through ::part(preview), ::part(input), ::part(label) and ::part(description), and :state(disabled), :state(editing) and :state(empty).

• #40 5b24c72 Thanks @ynotdraw! - Adds Feed, slab-feed: the APG's feed, a [role=feed] of articles that grows as the user scrolls, like a timeline. Each slotted element is an article, put in the tab sequence and given aria-posinset and aria-setsize, so a screenreader says where it is. It's a [role=article] unless it's an <article> or has a role, and it's named by its first heading unless it has a name. Page Down and Page Up move focus to the next and previous article from anywhere in one, and Control+End and Control+Home move focus to what's after and before the feed. Loading is yours: add articles and set busy while you do. total is how many articles there are in all, or -1 when that's unknown, and the number there are now when unset. The feed is named by label. Style it through ::part(feed).

• #54 b03c6ab Thanks @ynotdraw! - Field now describes its control by what's slotted into description, through the control's aria-describedby, after any IDs it already has, and sets the control's aria-invalid while error is set. Before, a screenreader read neither the hint nor the error, nor that the control was invalid.

• #51 57f1c76 Thanks @ynotdraw! - Color Picker keeps the colors being picked from in forced colors, such as Windows' contrast themes. Before, the browser painted the area, the hue and alpha sliders and every swatch in the user's background color, so there was nothing to pick from.

• #56 e61e570 Thanks @ynotdraw! - Checkbox Group and Radio Group now tell screenreaders when they're invalid. Radio Group sets aria-invalid on its radiogroup. A group role can't take aria-invalid, so Checkbox Group sets it on each of its Checkboxes instead. Both follow the Group's validity feedback, so they're marked once its validity is reported and cleared once it's valid.

• #35 7faf8ca Thanks @ynotdraw! - Adds Hover Card, slab-hover-card: a preview of what a link leads to, slotted beside its anchor in a native [popover] in the top layer. It opens when the anchor is hovered or focused by keyboard, after open-delay (700ms by default), and closes when the pointer leaves, after close-delay (300ms), when focus leaves it, and on Escape. Unlike Tooltip's, its content can hold links and buttons, which follow the anchor in the focus order, so Tab moves into the card. A touch doesn't open it. placement picks the side it opens on, and it flips when there's no room. Style it through ::part(card) and :state(open).

• #48 8d51eea Thanks @ynotdraw! - Text Field, Number, Pin Input and Combobox now leave Enter to an input method while it's composing, such as one for Japanese or Chinese. Before, the Enter that confirms a conversion submitted the form, or chose the active Option in Combobox. Safari's composition-ending Enter, which doesn't set isComposing, is recognized too.

• #58 cf80b53 Thanks @ynotdraw! - Menu Item has a type of checkbox or radio, which makes it a menuitemcheckbox or menuitemradio with aria-checked, checked, and :state(checked). A click checks it before any "click" listener hears it. The new Menu Group, slab-menu-group, is a named [role=group] for a set of radio Menu Items in a Menu or Context Menu. Its Menu Items are still the Menu's, so the arrow keys and typeahead move through them as through the rest.

• #38 10d2892 Thanks @ynotdraw! - Adds Navigation Menu, slab-navigation-menu, and Navigation Menu Item, slab-navigation-menu-item, for a site's navigation. It's the APG's disclosure navigation rather than a [role=menu]: a <nav> named by label, around a <ul> with an <li> for each link and Item. Each Item is a <button> with aria-expanded, named by its label, that shows and hides a list of links of its own. Opening one Item closes the others, and Escape, a click outside an Item, or focus leaving it closes it. Tab goes through every link and button. Left and Right move along the row, Down on an Item's button opens it at its first link, and Up and Down move between its links. An Item's content is in the flow below its button, and display: none while closed, so a design positions it. Items have open, show(), hide(), toggle() and a "toggle" event. Style them through ::part(nav), ::part(list), ::part(item), ::part(trigger) and ::part(content).

• #59 bdeed2a Thanks @ynotdraw! - The new Option Group, slab-option-group, is a named [role=group] of Options for Listbox, Select and Combobox. Its Options are still the Listbox's, Select's or Combobox's, so the arrow keys, typeahead and selection work across groups as across the rest. Combobox hides an Option Group while its filter hides every Option in it.

• #44 8352c2a Thanks @ynotdraw! - Adds Password Field, slab-password-field: a native password input with a button that shows and hides the password. The button is a toggle button named by toggle-label ("Show password" by default) whose aria-pressed follows revealed, and it fires "toggle" when pressed. While the password shows the input is a text input, with spellcheck, autocorrect and autocapitalize off. revealed works like value, so the attribute is the default and a form reset hides the password again. It's form-associated with Text Field's API: required, minlength, maxlength, pattern, autocomplete, setCustomValidity(), setValidity() and a validity message. Style it through ::part(control), ::part(input), ::part(toggle-button) and :state(disabled), :state(error), :state(readonly), :state(required) and :state(revealed).

• #49 94b23a4 Thanks @ynotdraw! - Left and Right now follow the reading direction in Tabs, Toolbar, Toggle Group, Radio Group, Menubar, Tree, Calendar, Color Picker's swatches and Combobox's tags. In a right-to-left page, Left moves to the next item, as it does for native radios, Tree expands with Left and collapses with Right, Calendar moves forward a day with Left, and Combobox moves from the start of its input to its tags with Right.

• #60 4614a25 Thanks @ynotdraw! - A click on Select's or Listbox's label now focuses it, as a click on a native select's label does. Nothing happens while it's disabled.

• #43 7d5e115 Thanks @ynotdraw! - Adds Steps, slab-steps, and Step, slab-steps-step, for showing where the user is in a task of several steps, such as a checkout or a setup wizard. It's an <ol> named by label, with an <li> for each Step. The Steps before step are complete, the one at it is current and has aria-current="step", and the rest are upcoming. Past the last Step, every one is complete. Each Step shows its number, its label from the default slot, and a description slot, and a complete one has complete-label ("Completed" by default) after its label, hidden visually, for screenreaders. With navigable, each Step is a <button>, and clicking one sets step and dispatches "change"; disabled keeps the user off Steps they can't go to yet. next() and previous() move it along from your own buttons. Style it through ::part(list) and ::part(item), and each Step through ::part(step), ::part(indicator), ::part(label), ::part(status), ::part(description) and :state(complete), :state(current), :state(upcoming) and :state(navigable).

• #64 8b513a6 Thanks @ynotdraw! - Adds registerStrings(), from slab-elements/strings.js, for translating the words Slab's elements say on their own, such as Alert's "Dismiss", Pagination's "Page 3" or Carousel's "Next slide". An element uses the strings registered for its nearest lang, then for that language without its region, and then English. An attribute or property set on the element still wins. Calendar also numbers its days in its language's digits, such as Arabic-Indic ones under lang="ar-EG".

• #55 0b5d55b Thanks @ynotdraw! - Switch now shows when it's invalid, the way Checkbox does. Before, a required Switch left off blocked submission without saying why. Once its validity is reported it sets aria-invalid and :state(error) and shows a validity-message part, worded by the browser unless you give it one. It also has validationMessage, willValidate, setCustomValidity(), setValidity(), and resetValidityFeedback().

• #37 09721c6 Thanks @ynotdraw! - Adds Tags Input, slab-tags-input: a native text input that turns what's typed into tags, for values with no list to pick from. Enter adds what's typed as a tag, and so does typing delimiter (a comma by default), so a pasted list becomes several tags. Tags are trimmed and not repeated, max caps how many the user can add, and what's typed is added when focus leaves. Each tag is a <button> that removes it, named by removeLabel, and the keyboard is Combobox's with multiple: Backspace in an empty input removes the last tag, and Left moves to the tags. values lists the tags, each submitted as its own entry, and the value attribute is the starting tags separated by commas. It's form-associated, with required, setCustomValidity(), setValidity() and a validity message. Style it through ::part(tag), ::part(tags), ::part(input) and :state(disabled), :state(empty), :state(error), :state(full) and :state(required).

• #57 d31553c Thanks @ynotdraw! - Toast no longer dismisses itself on a timer when it has something to act on, such as an Undo button or a link, whatever duration says (WCAG 2.2.1). F6 now moves focus to the open toast shown most recently, and F6 from inside it moves focus back, as react-aria's toasts do. Dismissing a toast with focus in it moves focus back too.

• #50 5173ac2 Thanks @ynotdraw! - Text Field, Textarea, Number, Date Field, Time Field, File Drop, Checkbox, Checkbox Group, Radio Group, Listbox, Select, Combobox, Rating and Pin Input now show the browser's own validity message, in the browser's language, when one fails a built-in constraint and you haven't given it a validity-message. Before, a required field left empty was invalid but said nothing, so a screenreader user wasn't told why the form wouldn't submit. Each also has validationMessage and willValidate, as a native control does.