@thecb/components 12.0.4 → 12.0.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "12.0.4",
+  "version": "12.0.6-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/AccountsIconSmall.js

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const AccountsIconSmall = ({ themeValues }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const AccountsIconSmall = ({ themeValues, ariaHidden = true }) => {
   return (
     <svg
       width="22px"
@@ -12,6 +15,7 @@ const AccountsIconSmall = ({ themeValues }) => {
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <defs>
         <rect

package/src/components/atoms/icons/FindIconSmall.js

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const FindIconSmall = ({ themeValues, iconIndex = 0 }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const FindIconSmall = ({ themeValues, iconIndex = 0, ariaHidden = true }) => {
   const maskId = `find-icon-mask-${iconIndex}`;
   return (
     <svg
@@ -11,6 +14,7 @@ const FindIconSmall = ({ themeValues, iconIndex = 0 }) => {
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <path
         fillRule="evenodd"

package/src/components/atoms/icons/HistoryIconSmall.js

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const HistoryIconSmall = ({ themeValues }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const HistoryIconSmall = ({ themeValues, ariaHidden = true }) => {
   return (
     <svg
       width="20"
@@ -10,6 +13,7 @@ const HistoryIconSmall = ({ themeValues }) => {
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <path
         d="M3.33337 8.33333C3.33337 7.8731 3.70647 7.5 4.16671 7.5H15.8334C16.2936 7.5 16.6667 7.8731 16.6667 8.33333V16.6667C16.6667 17.1269 16.2936 17.5 15.8334 17.5H4.16671C3.70647 17.5 3.33337 17.1269 3.33337 16.6667V8.33333Z"

package/src/components/atoms/icons/PropertiesIconSmall.js

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const PropertiesIconSmall = ({ themeValues }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const PropertiesIconSmall = ({ themeValues, ariaHidden = true }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -12,6 +15,7 @@ const PropertiesIconSmall = ({ themeValues }) => {
       version="1.1"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <path

package/src/components/atoms/icons/SettingsIconSmall.js

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const SettingsIconSmall = ({ themeValues }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const SettingsIconSmall = ({ themeValues, ariaHidden = true }) => {
   return (
     <svg
       width="22px"
@@ -12,6 +15,7 @@ const SettingsIconSmall = ({ themeValues }) => {
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <defs>
         <rect

package/src/components/atoms/icons/WalletIconSmall.js

@@ -2,7 +2,15 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const WalletIconSmall = ({ themeValues, iconIndex = 0, colorOverride }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const WalletIconSmall = ({
+  themeValues,
+  iconIndex = 0,
+  colorOverride,
+  ariaHidden = true
+}) => {
   return (
     <svg
       width="20"
@@ -10,6 +18,7 @@ const WalletIconSmall = ({ themeValues, iconIndex = 0, colorOverride }) => {
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <path
         fillRule="evenodd"