Card: Improve accessibility by moving overlay slot outside of <a> tag (…

…#766) * fix(documentation): move overlay slot out of the link element since it can contain a clickable element * add react story * create new changeset for patch
ithaka · Jun 17, 2024 · 21ed861 · 21ed861
1 parent 96632ee
commit 21ed861
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 1 deletion.
diff --git a/.changeset/red-parents-dream.md b/.changeset/red-parents-dream.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Fix card accessibility when using an overlay slot
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/pharos/src/components/image-card/PharosImageCard.react.stories.jsx b/packages/pharos/src/components/image-card/PharosImageCard.react.stories.jsx
@@ -440,6 +440,58 @@ export const WithActionButtonSlot = {
   ),
 };
 
+export const WithOverlayButtonSlot = {
+  render: () => (
+    <Fragment>
+      <PharosLayout style={{ margin: '1rem 0' }}>
+      <PharosImageCard
+          title="South Hall"
+          link="https://www.jstor.org/stable/10.2307/community.26220188"
+          style={{ gridColumn: 'span 3' }}
+          variant='selectable'
+        >
+          <img id="image" src={collection5} alt="south hall" slot="image" />
+          <div id="creator" slot="metadata">
+            Tubby, William Bunker (American architect,...
+          </div>
+          <div id="item-date" slot="metadata">
+            1889-1892 (creation)
+          </div>
+          <div id="collection" slot="metadata">
+            Part of
+            <PharosLink href="https://www.jstor.org/site/pratt/buildings-image">
+              Pratt Institute Buildings Image Collection
+            </PharosLink>
+          </div>
+          <PharosButton
+            slot="overlay"
+            data-dropdown-menu-id="saveDropdownId"
+            icon="save"
+            iconCondensed
+            variant="overlay"
+            style={{ position: "absolute", bottom: "5px", right: "5px" }}
+          ></PharosButton>
+          <PharosButton
+            slot="action-button"
+            data-dropdown-menu-id="dropdownId"
+            icon="ellipses-vertical"
+            iconCondensed
+            variant="subtle"
+          ></PharosButton>
+        </PharosImageCard>
+        <PharosDropdownMenu id="saveDropdownId">
+          <PharosDropdownMenuItem>Save</PharosDropdownMenuItem>
+        </PharosDropdownMenu>
+        <PharosDropdownMenu id="dropdownId">
+          <PharosDropdownMenuItem>Item 1</PharosDropdownMenuItem>
+          <PharosDropdownMenuItem>Item 2</PharosDropdownMenuItem>
+          <PharosDropdownMenuItem>Item 3</PharosDropdownMenuItem>
+        </PharosDropdownMenu>
+      </PharosLayout>
+    </Fragment>
+    ),
+};
+
 export const SelectableCollection = {
   render: () => (
     <PharosLayout tag="ol" style={{ margin: '1rem 0' }}>

diff --git a/packages/pharos/src/components/image-card/pharos-image-card.scss b/packages/pharos/src/components/image-card/pharos-image-card.scss
@@ -14,6 +14,7 @@
 .card__link-container {
   display: flex;
   margin-bottom: var(--pharos-spacing-1-x);
+  position: relative;
 }
 
 .card__link--image {

diff --git a/packages/pharos/src/components/image-card/pharos-image-card.ts b/packages/pharos/src/components/image-card/pharos-image-card.ts
@@ -316,9 +316,9 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
         no-hover
       >
         ${this._renderLinkContent()}${this._renderHoverMetadata()}
-        <slot name="overlay"></slot>
       </pharos-link>
       ${this._showSubtleOverlay() ? nothing : this._renderCheckbox()}
+      <slot name="overlay"></slot>
     </div>`;
   }
 

diff --git a/packages/pharos/src/components/image-card/pharos-image-card.wc.stories.jsx b/packages/pharos/src/components/image-card/pharos-image-card.wc.stories.jsx
@@ -388,6 +388,53 @@ export const WithActionButtonSlot = {
   `,
 };
 
+export const WithOverlayButtonSlot = {
+  render: () =>
+    html`
+      <storybook-pharos-layout style="margin: 1rem 0">
+        <storybook-pharos-image-card
+          title="South Hall"
+          link="https://www.jstor.org/stable/10.2307/community.26220188"
+          style="grid-column: span 3"
+          variant="selectable"
+        >
+          <img id="image" src="${collection5}" alt="south hall" slot="image" />
+          <div id="creator" slot="metadata">Tubby, William Bunker (American architect,...</div>
+          <div id="item-date" slot="metadata">1889-1892 (creation)</div>
+          <div id="collection" slot="metadata">
+            Part of
+            <storybook-pharos-link href="https://www.jstor.org/site/pratt/buildings-image"
+              >Pratt Institute Buildings Image Collection</storybook-pharos-link
+            >
+          </div>
+          <storybook-pharos-button
+            slot="overlay"
+            data-dropdown-menu-id="saveDropdownId"
+            icon="save"
+            icon-condensed
+            variant="overlay"
+            style="position: absolute; bottom: 5px; right: 5px;"
+          ></storybook-pharos-button>
+          <storybook-pharos-button
+            slot="action-button"
+            data-dropdown-menu-id="dropdownId"
+            icon="ellipses-vertical"
+            icon-condensed
+            variant="subtle"
+          ></storybook-pharos-button>
+        </storybook-pharos-image-card>
+        <storybook-pharos-dropdown-menu id="saveDropdownId">
+          <storybook-pharos-dropdown-menu-item>Save</storybook-pharos-dropdown-menu-item>
+        </storybook-pharos-dropdown-menu>
+        <storybook-pharos-dropdown-menu id="dropdownId">
+          <storybook-pharos-dropdown-menu-item>Item 1</storybook-pharos-dropdown-menu-item>
+          <storybook-pharos-dropdown-menu-item>Item 2</storybook-pharos-dropdown-menu-item>
+          <storybook-pharos-dropdown-menu-item>Item 3</storybook-pharos-dropdown-menu-item>
+        </storybook-pharos-dropdown-menu>
+      </storybook-pharos-layout>
+    `,
+};
+
 export const SelectableCollection = {
   render: () =>
     html` <storybook-pharos-layout tag="ol" style="margin: 1rem 0">