@atlaskit/pragmatic-drag-and-drop-react-accessibility
Version:
An optional package for Pragmatic drag and drop containing react components to assist with setting up accessible experiences
25 lines (24 loc) • 1.11 kB
TypeScript
import React from 'react';
import type { DragHandleButtonAppearance } from './types';
/**
* A button with pre-configured styling to look like a drag handle.
*
* This component uses a native button because the `@atlaskit/button`
* cancels `mouseDown` events, which prevents dragging.
*
* @deprecated Please use `DragHandleButton`.
*
* Rationale:
*
* - `DragHandleButtonSmall` uses a tiny icon size that is no longer supported by our icon system
* (the smallest icon size is now `12px` x `12px`)
* - Icons smaller than `12px` x `12px` are not good for visibility and accessibility
* - The small hitbox of `DragHandleButtonSmall` (`8px` x `16px`) is below our `24px` x `24px`
* minimum hit target size for accessibility. [More details](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
*/
export declare const DragHandleButtonSmall: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
appearance?: DragHandleButtonAppearance;
label: string;
isSelected?: boolean;
testId?: string;
} & React.RefAttributes<HTMLButtonElement>>;