Expose isPressed on useLink hook (#1767)

Author: hyanmandian

packages/@react-aria/link/docs/useLink.mdx

@@ -94,17 +94,22 @@ This example shows a client handled link using press events. It sets `elementTyp
 so that `useLink` returns the proper ARIA attributes to expose the element as a link to
 assistive technology.
 
+In addition, this example shows usage of the `isPressed` value returned by `useLink` to properly
+style the links's active state. You could use the CSS `:active` pseudo class for this, but `isPressed`
+properly handles when the user drags their pointer off of the link, along with keyboard support and better
+touch screen support.
+
 ```tsx example
 function Link(props) {
   let ref = React.useRef();
-  let {linkProps} = useLink({...props, elementType: 'span'}, ref);
+  let {linkProps, isPressed} = useLink({...props, elementType: 'span'}, ref);
 
   return (
     <span
       {...linkProps}
       ref={ref}
       style={{
-        color: 'var(--blue)',
+        color: isPressed ? 'var(--blue)' : 'var(--spectrum-global-color-blue-700)',
         textDecoration: 'underline',
         cursor: 'pointer'
       }}>

packages/@react-aria/link/src/useLink.ts

@@ -27,7 +27,9 @@ export interface AriaLinkOptions extends AriaLinkProps {
 
 export interface LinkAria {
   /** Props for the link element. */
-  linkProps: HTMLAttributes<HTMLElement>
+  linkProps: HTMLAttributes<HTMLElement>,
+  /** Whether the link is currently pressed. */
+  isPressed: boolean
 }
 
 /**
@@ -55,10 +57,11 @@ export function useLink(props: AriaLinkOptions, ref: RefObject<HTMLElement>): Li
     };
   }
 
-  let {pressProps} = usePress({onPress, onPressStart, onPressEnd, isDisabled, ref});
+  let {pressProps, isPressed} = usePress({onPress, onPressStart, onPressEnd, isDisabled, ref});
   let domProps = filterDOMProps(otherProps, {labelable: true});
 
   return {
+    isPressed, // Used to indicate press state for visual
     linkProps: mergeProps(domProps, {
       ...pressProps,
       ...linkProps,