@bloom-housing/ui-components 8.0.4 → 8.1.1

package/src/blocks/ImageCard.tsx

@@ -81,7 +81,7 @@ const ImageCard = (props: ImageCardProps) => {
       )
     })
     return (
-      <aside className="image-card__status" aria-label={`${props.description} Statuses`}>
+      <aside className="image-card__status" aria-label={`${props.description || ""} Statuses`}>
         {statuses}
       </aside>
     )
@@ -104,24 +104,6 @@ const ImageCard = (props: ImageCardProps) => {
   const image = (
     <>
       <div className="image-card">
-        <div className="image-card-tag__wrapper">
-          {props.tags?.map((tag, index) => {
-            return (
-              <React.Fragment key={index}>
-                <Tag styleType={tag.styleType || AppearanceStyleType.warning}>
-                  {tag.iconType && (
-                    <Icon
-                      size={"medium"}
-                      symbol={tag.iconType}
-                      fill={tag.iconColor ?? IconFillColors.primary}
-                    />
-                  )}
-                  {tag.text}
-                </Tag>
-              </React.Fragment>
-            )
-          })}
-        </div>
         <figure className={innerClasses.join(" ")}>
           {props.imageUrl ? (
             <img
@@ -174,6 +156,24 @@ const ImageCard = (props: ImageCardProps) => {
           )}
         </figure>
         {getStatuses()}
+        <div className="image-card-tag__wrapper">
+          {props.tags?.map((tag, index) => {
+            return (
+              <React.Fragment key={index}>
+                <Tag styleType={tag.styleType || AppearanceStyleType.warning}>
+                  {tag.iconType && (
+                    <Icon
+                      size={"medium"}
+                      symbol={tag.iconType}
+                      fill={tag.iconColor ?? IconFillColors.primary}
+                    />
+                  )}
+                  {tag.text}
+                </Tag>
+              </React.Fragment>
+            )
+          })}
+        </div>
       </div>
       {props.images && props.images.length > 1 && (
         <Modal

package/src/global/accessibility.scss

@@ -0,0 +1,22 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}

package/src/global/app-css.scss

@@ -57,6 +57,7 @@ main {
 @import "headers.scss";
 @import "blocks.scss";
 @import "accordion.scss";
+@import "accessibility.scss";
 @import "custom_counter.scss";
 @import "forms.scss";
 @import "lists.scss";

package/src/global/print.scss

@@ -4,8 +4,7 @@
   .button,
   button.button,
   .site-footer,
-  a.logo:link:after,
-  .navbar-notice {
+  a.logo:link:after {
     display: none;
   }