npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@solid-aria/link

v0.1.3

Published

Primitives for building accessible link component.

Downloads

4,463

Readme

@solid-aria/link

pnpm turborepo size version stage

A link allows a user to navigate to another page or resource within a web page or application.

  • createLink - Provides the behavior and accessibility implementation for a link component.

Installation

npm install @solid-aria/link
# or
yarn add @solid-aria/link
# or
pnpm add @solid-aria/link

createLink

Provides the behavior and accessibility implementation for a link component.

Features

Links can be created in HTML with the <a> element with an href attribute. However, if the link does not have an href, and is handled client side with JavaScript instead, it will not be exposed to assistive technology properly. createLink helps achieve accessible links with either native HTML elements or custom element types.

  • Support for mouse, touch, and keyboard interactions
  • Support for navigation links via <a> elements or custom element types via ARIA
  • Support for disabled links

How to use it

This example shows a basic link using a native <a> element.

import { AriaLinkProps, createLink } from "@solid-aria/link";
import { JSX } from "solid-js";

type LinkProps = AriaLinkProps & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;

function Link(props: LinkProps) {
  let ref: HTMLAnchorElement | undefined;

  const { linkProps } = createLink(props, () => ref);

  return (
    <a {...linkProps} ref={ref} href={props.href} target={props.target} style={{ color: "blue" }}>
      {props.children}
    </a>
  );
}

function App() {
  return (
    <Link href="https://www.solidjs.com" target="_blank">
      SolidJS
    </Link>
  );
}

Client handled links

This example shows a client handled link using press events. It sets elementType to span so that createLink 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 createLink 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.

import { AriaLinkProps, createLink } from "@solid-aria/link";
import { JSX, mergeProps } from "solid-js";

type LinkProps = AriaLinkProps & JSX.HTMLAttributes<HTMLSpanElement>;

function Link(props: LinkProps) {
  let ref: HTMLSpanElement | undefined;

  props = mergeProps({ elementType: "span" }, props);

  const { linkProps, isPressed } = createLink<"span", HTMLSpanElement>(props, () => ref);

  return (
    <span
      {...linkProps}
      ref={ref}
      style={{
        color: isPressed() ? "blue" : "dodgerblue",
        "text-decoration": "underline",
        cursor: "pointer"
      }}
    >
      {props.children}
    </span>
  );
}

function App() {
  return <Link onPress={() => alert("Pressed link")}>SolidJS</Link>;
}

Disabled links

A link can be disabled by passing the isDisabled property. This will work with both native link elements as well as client handled links. Native navigation will be disabled, and the onPress event will not be fired. The link will be exposed as disabled to assistive technology with ARIA.

import { AriaLinkProps, createLink } from "@solid-aria/link";
import { JSX } from "solid-js";

type LinkProps = AriaLinkProps & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;

function Link(props: LinkProps) {
  let ref: HTMLAnchorElement | undefined;

  const { linkProps } = createLink(props, () => ref);

  return (
    <a
      {...linkProps}
      ref={ref}
      href={props.href}
      target={props.target}
      style={{
        color: props.isDisabled ? "gray" : "blue",
        cursor: props.isDisabled ? "default" : "pointer"
      }}
    >
      {props.children}
    </a>
  );
}

function App() {
  return (
    <Link href="https://www.solidjs.com" target="_blank" isDisabled>
      Disabled link
    </Link>
  );
}

Changelog

All notable changes are described in the CHANGELOG.md file.