Merge pull request #472 from mlibrary/bug-shelf-browse-card-keyboard-…

…focus Creating `.focus` style and applying to cards.
mlibrary · Aug 5, 2024 · 50fd0e5 · 50fd0e5
2 parents 3c52d73 + 0b81fe8
commit 50fd0e5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js
@@ -114,7 +114,7 @@ const ShelfBrowseCarousel = ({ callNumber, items, uid }) => {
               <li key={index} className={`shelf-browse-item ${(isCurrentItem || firstOrLastItem) ? 'shelf-browse-item-current' : ''} ${animationClass}`}>
                 <Anchor
                   {...anchorAttributes}
-                  className={`underline__none container__rounded padding-x__s padding-bottom__xs padding-top__${isCurrentItem ? 'xs' : 's'}`}
+                  className={`focus underline__none container__rounded padding-x__s padding-bottom__xs padding-top__${isCurrentItem ? 'xs' : 's'}`}
                 >
                   <dl className='flex'>
                     {isCurrentItem && <p className='margin__none this-item'>Current Record</p>}

diff --git a/src/stylesheets/utilities.css b/src/stylesheets/utilities.css
@@ -50,3 +50,9 @@ a[class$="-checkbox"] > svg {
 a.active-checkbox > svg {
   color: var(--search-color-blue-400);
 }
+
+.focus:focus {
+  border-radius: 2px;
+  box-shadow: var(--ds-color-maize-400) 0px 0px 0px 2px, var(--ds-color-blue-400) 0px 0px 0px 3px;
+  outline: 0;
+}