diff options
| author | Mayank | 2023-08-10 17:12:05 -0400 |
|---|---|---|
| committer | GitHub | 2023-08-10 23:12:05 +0200 |
| commit | da35556eb95f2d397dfce03cc4acfacb0dcf1e89 (patch) | |
| tree | 1eb949e04c4d32770fa0e47171318cf3287b1f8f | |
| parent | 47dabb991a1a0816b392d96d19df5ccef9a1c434 (diff) | |
| download | IT.starlight-da35556eb95f2d397dfce03cc4acfacb0dcf1e89.tar.gz IT.starlight-da35556eb95f2d397dfce03cc4acfacb0dcf1e89.tar.bz2 IT.starlight-da35556eb95f2d397dfce03cc4acfacb0dcf1e89.zip | |
[LinkCard] use only title as the link text (#488)
| -rw-r--r-- | .changeset/clean-baboons-own.md | 5 | ||||
| -rw-r--r-- | packages/starlight/user-components/LinkCard.astro | 31 |
2 files changed, 26 insertions, 10 deletions
diff --git a/.changeset/clean-baboons-own.md b/.changeset/clean-baboons-own.md new file mode 100644 index 00000000..bb74830e --- /dev/null +++ b/.changeset/clean-baboons-own.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": patch +--- + +Improved accessibility of LinkCard by only including the title as part of the link text, and using a pseudo-element to keep the card clickable. diff --git a/packages/starlight/user-components/LinkCard.astro b/packages/starlight/user-components/LinkCard.astro index 683ac749..6dad1c22 100644 --- a/packages/starlight/user-components/LinkCard.astro +++ b/packages/starlight/user-components/LinkCard.astro @@ -11,25 +11,36 @@ const { title, description, ...attributes } = Astro.props; --- <div> - <a {...attributes}> - <span class="flex stack"> + <span class="flex stack"> + <a {...attributes}> <span class="title" set:html={title} /> - {description && <span class="description" set:html={description} />} - </span> - <Icon name="right-arrow" size="1.333em" class="icon rtl:flip" /> - </a> + </a> + {description && <span class="description" set:html={description} />} + </span> + <Icon name="right-arrow" size="1.333em" class="icon rtl:flip" /> </div> <style> - a { + div { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; border: 1px solid var(--sl-color-gray-5); border-radius: 0.5rem; padding: 1rem; - text-decoration: none; box-shadow: var(--sl-shadow-sm); + position: relative; + } + + a { + text-decoration: none; + } + + /* a11y fix for https://github.com/withastro/starlight/issues/487 */ + a::before { + content: ""; + position: absolute; + inset: 0; } .stack { @@ -54,12 +65,12 @@ const { title, description, ...attributes } = Astro.props; } /* Hover state */ - a:hover { + div:hover { background: var(--sl-color-gray-7, var(--sl-color-gray-6)); border-color: var(--sl-color-gray-2); } - a:hover .icon { + div:hover .icon { color: var(--sl-color-white); } </style> |