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

.changeset/friendly-forks-float.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Fix card accessibility when using an overlay slot

.nvmrc

@@ -1 +1 @@
-16
+18

.tool-versions

@@ -1 +1 @@
-nodejs 18.16.0
+nodejs 18.18.2

.yarn/releases/yarn-1.22.19.cjs → .yarn/releases/yarn-classic.cjs

@@ -33030,8 +33030,7 @@ and limitations under the License.
           var k;
           if (b == 16) k = 4;
           else if (b == 8) k = 3;
-          else if (b == 256) k = 8;
-          // byte array
+          else if (b == 256) k = 8; // byte array
           else if (b == 2) k = 1;
           else if (b == 32) k = 5;
           else if (b == 4) k = 2;
@@ -37199,8 +37198,7 @@ and limitations under the License.
             this.cache[this._makeAbs(f)] = false;
             break;
 
-          default:
-            // some unusual error.  Treat as failure.
+          default: // some unusual error.  Treat as failure.
             this.cache[this._makeAbs(f)] = false;
             if (this.strict) {
               this.emit('error', er);
@@ -43787,8 +43785,7 @@ and limitations under the License.
               this.fromBigInteger(new BigInteger(yHex, 16))
             );
 
-          default:
-            // unsupported
+          default: // unsupported
             return null;
         }
       }
@@ -43857,8 +43854,7 @@ and limitations under the License.
               this.fromBigInteger(new BigInteger(yHex, 16))
             );
 
-          default:
-            // unsupported
+          default: // unsupported
             return null;
         }
       };
@@ -67163,8 +67159,8 @@ and limitations under the License.
 
         function missingCallback(err) {
           if (err) {
-            if (process.throwDeprecation) throw err;
-            // Forgot a callback but don't know where? Use NODE_DEBUG=fs
+            if (process.throwDeprecation)
+              throw err; // Forgot a callback but don't know where? Use NODE_DEBUG=fs
             else if (!process.noDeprecation) {
               var msg = 'fs: missing callback ' + (err.stack || err.message);
               if (process.traceDeprecation) console.trace(msg);
@@ -67722,8 +67718,7 @@ and limitations under the License.
             this.cache[this._makeAbs(f)] = false;
             break;
 
-          default:
-            // some unusual error.  Treat as failure.
+          default: // some unusual error.  Treat as failure.
             this.cache[this._makeAbs(f)] = false;
             if (this.strict) throw er;
             if (!this.silent) console.error('glob error', er);
@@ -107884,8 +107879,8 @@ wercker.yml
             case 'ascii':
             case 'hex':
               return enc;
-            default:
-              if (retried) return; // undefined
+            default: // undefined
+              if (retried) return;
               enc = ('' + enc).toLowerCase();
               retried = true;
           }

.yarnrc.yml

@@ -1 +1 @@
-yarnPath: .yarn/releases/yarn-1.22.19.cjs
+yarnPath: .yarn/releases/yarn-classic.cjs

package.json

@@ -7,46 +7,38 @@
     "build:tokens": "yarn workspace @ithaka/pharos build:tokens",
     "analyze": "yarn workspace @ithaka/pharos analyze",
     "format": "prettier packages/* --write",
-
     "lint": "yarn lint:lit-analyzer && yarn lint:eslint && yarn lint:styles && yarn lint:icons",
     "lint:eslint": "eslint 'packages/**/*.{ts,tsx,mdx,js,jsx,mjs}'",
     "lint:lit-analyzer": "lit-analyzer 'packages/*/src/**/!(*.css|*.test).ts' --strict --rules.no-missing-import off --rules.no-unknown-tag-name off",
     "lint:styles": "stylelint 'packages/**/*.{scss,css}'",
     "lint:icons": "svglint --ci packages/pharos/assets/icons/*.svg",
-
     "test": "yarn workspace @ithaka/pharos test",
     "test:cli": "yarn workspace @ithaka/pharos-cli test",
     "watch:tsc": "yarn workspace @ithaka/pharos build:tsc:watch",
     "watch:styles": "yarn workspace @ithaka/pharos build:styles:watch",
     "build:core": "yarn workspace @ithaka/pharos build",
-
     "storybook:build": "yarn storybook:setup && yarn storybook:react:build && yarn storybook:wc:build && yarn storybook:main:build",
     "storybook:setup": "yarn build:core",
-
     "prestorybook:wc": "yarn storybook:setup",
     "storybook:wc": "yarn storybook:wc:start",
     "storybook:wc:start": "storybook dev -c .storybook/wc -p 9000",
     "prestorybook:wc:dev": "yarn storybook:setup",
     "storybook:wc:dev": "concurrently \"yarn:storybook:wc:start\" \"yarn:watch:styles\" --raw --kill-others",
     "storybook:wc:build": "storybook build -c .storybook/wc -o .storybook-static/wc",
-
     "prestorybook:react": "yarn storybook:setup",
     "storybook:react": "yarn storybook:react:start",
     "storybook:react:start": "storybook dev -c .storybook/react -p 9001",
     "prestorybook:react:dev": "yarn storybook:setup",
     "storybook:react:dev": "concurrently \"yarn:storybook:react:start\" \"yarn:watch:styles\" --raw --kill-others",
     "storybook:react:build": "storybook build -c .storybook/react -o .storybook-static/react",
-
     "storybook:main:dev": "storybook dev -c .storybook/main -p 9002",
     "storybook:main:build": "storybook build -c .storybook/main -o .storybook-static/main",
-
     "presite:build": "yarn build:core",
     "site:build": "yarn workspace @ithaka/pharos-site build",
     "presite:develop": "yarn build:core",
     "site:develop": "yarn workspace @ithaka/pharos-site develop",
     "site:serve": "yarn workspace @ithaka/pharos-site serve",
     "site:clean": "yarn workspace @ithaka/pharos-site clean",
-
     "release": "changeset publish",
     "prepare": "husky install"
   },
@@ -147,5 +139,5 @@
       "path": "packages/pharos/lib/index.js"
     }
   ],
-  "packageManager": "yarn@1.22.19"
+  "packageManager": "yarn@4.0.2"
 }

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 {

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>`;
   }
 

packages/pharos/src/components/image-card/pharos-image-card.wc.stories.jsx

@@ -390,6 +390,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">