Merge pull request #9855 from DestinyItemManager/close-button

Turn sheet close button into a real button
DestinyItemManager · Sep 12, 2023 · ab038c6 · ab038c6
2 parents 44eb471 + bb1e7d2
commit ab038c6
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 21 deletions.
diff --git a/config/i18n.json b/config/i18n.json
@@ -328,7 +328,8 @@
   "General": {
     "ClickForDetails": "Click for details",
     "Confirm": "Confirm?",
-    "UserGuideLink": "User guide"
+    "UserGuideLink": "User guide",
+    "Close": "Close"
   },
   "Glyphs": {
     "Missing": "Missing",

diff --git a/src/app/armory/ArmorySheet.m.scss b/src/app/armory/ArmorySheet.m.scss
@@ -1,8 +1,4 @@
 .sheet:global(.sheet) {
   max-width: 900px;
   margin: 0 auto;
-
-  :global(.sheet-close) {
-    right: 16px;
-  }
 }
diff --git a/src/app/dim-ui/Sheet.m.scss b/src/app/dim-ui/Sheet.m.scss
@@ -18,3 +18,7 @@
     opacity: 0.6;
   }
 }
+
+.noHeader {
+  right: 16px !important;
+}
diff --git a/src/app/dim-ui/Sheet.m.scss.d.ts b/src/app/dim-ui/Sheet.m.scss.d.ts
diff --git a/src/app/dim-ui/Sheet.scss b/src/app/dim-ui/Sheet.scss
@@ -70,6 +70,7 @@ $control-color: rgba(255, 255, 255, 0.5);
   }
 
   .sheet-close {
+    all: initial;
     z-index: 1;
     position: absolute;
     right: 0;
@@ -85,11 +86,7 @@ $control-color: rgba(255, 255, 255, 0.5);
     &:active,
     &:hover,
     &:focus-visible {
-      color: rgba(255, 255, 255, 1);
-    }
-
-    &.sheet-no-header {
-      right: 8px;
+      color: var(--theme-accent-primary);
     }
   }
 }
diff --git a/src/app/dim-ui/Sheet.tsx b/src/app/dim-ui/Sheet.tsx
@@ -266,13 +266,15 @@ export default function Sheet({
       onKeyPress={stopPropagation}
       onClick={allowClickThrough ? undefined : stopPropagation}
     >
-      <a
-        href="#"
-        className={clsx('sheet-close', { 'sheet-no-header': !header })}
+      <button
+        type="button"
+        className={clsx('sheet-close', { [styles.noHeader]: !header })}
         onClick={triggerClose}
+        aria-keyshortcuts="esc"
+        aria-label={t('General.Close')}
       >
         <AppIcon icon={disabledIcon} />
-      </a>
+      </button>
 
       <div className="sheet-container" onPointerDown={dragHandleDown}>
         {Boolean(header) && (

diff --git a/src/app/item-popup/ItemPopup.m.scss b/src/app/item-popup/ItemPopup.m.scss
@@ -152,19 +152,12 @@
     color: black;
     opacity: 0.7;
   }
-  :global(.sheet-handle) div {
-    background-color: black;
-    opacity: 0.7;
-  }
 
   &.uncommon,
   &.rare,
   &.legendary {
     :global(.sheet-close) {
       color: var(--theme-text);
     }
-    :global(.sheet-handle) div {
-      background-color: white;
-    }
   }
 }
diff --git a/src/locale/en.json b/src/locale/en.json
@@ -326,6 +326,7 @@
   },
   "General": {
     "ClickForDetails": "Click for details",
+    "Close": "Close",
     "Confirm": "Confirm?",
     "UserGuideLink": "User guide"
   },