@zylem/ui 0.8.14 → 0.9.0

package/src/components/WindowControls/WindowControls.tsx

@@ -23,7 +23,7 @@ export interface WindowControlsProps {
 export function WindowControls(props: WindowControlsProps) {
   return (
     <Show when={props.onClose || props.onCollapse}>
-      <div class="zylem-window-controls" aria-label="Window controls">
+      <div class="zylem-window-controls" role="group" aria-label="Window controls">
         <Show when={props.onCollapse}>
           <button
             type="button"
@@ -33,9 +33,9 @@ export function WindowControls(props: WindowControlsProps) {
             onClick={() => props.onCollapse?.()}
           >
             {props.collapsed ? (
-              <ChevronUp size={11} strokeWidth={2.5} />
+              <ChevronUp size={11} strokeWidth={2.5} aria-hidden="true" />
             ) : (
-              <ChevronDown size={11} strokeWidth={2.5} />
+              <ChevronDown size={11} strokeWidth={2.5} aria-hidden="true" />
             )}
           </button>
         </Show>
@@ -48,7 +48,7 @@ export function WindowControls(props: WindowControlsProps) {
             data-testid={props.closeTestId}
             onClick={() => props.onClose?.()}
           >
-            <X size={11} strokeWidth={2.5} />
+            <X size={11} strokeWidth={2.5} aria-hidden="true" />
           </button>
         </Show>
       </div>

package/src/components/index.ts

@@ -24,6 +24,7 @@ export {
 } from '../layers';
 
 // Primitives
+export { type HeadingLevel } from './shared/Heading';
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button/Button';
 export { ToolbarButton, type ToolbarButtonProps } from './ToolbarButton/ToolbarButton';
 export { TextField, type TextFieldProps } from './TextField/TextField';

package/src/components/shared/Heading.tsx

@@ -0,0 +1,30 @@
+import type { JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+
+/** Outline level of a component's title: `2` renders an `<h2>`. */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** The element name for a level, for primitives that take an `as` tag. */
+export function headingTag(level: HeadingLevel) {
+  return `h${level}` as const;
+}
+
+export interface HeadingProps {
+  level: HeadingLevel;
+  id?: string | undefined;
+  class?: string | undefined;
+  title?: string | undefined;
+  children: JSX.Element;
+}
+
+/**
+ * An `<h1>`…`<h6>` chosen at runtime, for titles whose place in the page
+ * outline is the host's call.
+ */
+export function Heading(props: HeadingProps) {
+  return (
+    <Dynamic component={headingTag(props.level)} id={props.id} class={props.class} title={props.title}>
+      {props.children}
+    </Dynamic>
+  );
+}

package/src/global/accordion.css.ts

@@ -14,11 +14,14 @@ globalStyle('.zylem-accordion', {
   minHeight: 0,
 });
 
+// The header is a heading element; its UA margins would open gaps around the
+// trigger, and differ by heading level.
 globalStyle('.accordion-header', {
   position: 'sticky',
   top: 0,
   zIndex: 1,
   display: 'flex',
+  margin: 0,
 });
 
 globalStyle('.accordion-item', {
@@ -105,7 +108,9 @@ globalStyle('.zylem-accordion--stack .accordion-content', {
 });
 
 globalStyle('.accordion-trigger::after', {
-  content: "'\\25BC'",
+  // The empty alternative text keeps the chevron out of the trigger's
+  // accessible name; the first value is for browsers without that syntax.
+  content: ["'\\25BC'", "'\\25BC' / ''"],
   position: 'relative',
   color: vars.colors.textSecondary,
   fontSize: '10px',

package/src/global/common.css.ts

@@ -13,6 +13,19 @@ globalStyle('.overlay', {
   pointerEvents: 'none',
 });
 
+// Text for assistive tech only: off screen, still in the accessibility tree.
+globalStyle('.zylem-visually-hidden', {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});
+
 // Default scrollbars: slim glass rail (use `.zylem-scroll` for the full
 // 13px HyperGlass treatment defined in hyperglass-base.css.ts).
 globalStyle('::-webkit-scrollbar', {

package/src/layers/LayerContext.tsx

@@ -60,8 +60,8 @@ export interface LayerScopeProps {
  * them can paint above anything outside; and the scope owns the portal container
  * its descendants mount into, so overlays opened inside it stay inside it.
  *
- * A dialog wraps its content in one, so a tooltip opened within the dialog floats
- * over the dialog body without also floating over a menu belonging to the page.
+ * A dialog puts its card in one, so a menu opened within the dialog mounts
+ * inside the `<dialog>`, floats over the card, and is not clipped by it.
  */
 export function LayerScope(props: LayerScopeProps) {
 	const [container, setContainer] = createSignal<HTMLElement>();