fix(icons): contained aria-labelledby when title prop was undefined (#…

…374)
bigcommerce · Apr 16, 2020 · f0d4df7 · f0d4df7
1 parent bbbdb15
commit f0d4df7
Show file tree

Hide file tree

Showing 55 changed files with 89 additions and 96 deletions.
diff --git a/packages/big-design-icons/scripts/svgr.config.js b/packages/big-design-icons/scripts/svgr.config.js
@@ -23,7 +23,8 @@ module.exports = {
     BREAK
 
     const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-      const titleId = useUniqueId('icon');
+      const uniqueTitleId = useUniqueId('icon');
+      const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
       BREAK
       return (

diff --git a/packages/big-design-icons/src/base/index.tsx b/packages/big-design-icons/src/base/index.tsx
@@ -12,6 +12,7 @@ export interface IconProps extends React.SVGProps<SVGSVGElement> {
 
 export interface PrivateIconProps {
   svgRef?: React.Ref<SVGSVGElement>;
+  titleId?: string;
 }
 
 export function createStyledIcon(Icon: React.FC<IconProps>) {

diff --git a/packages/big-design-icons/src/components/AddCircleOutlineIcon.tsx b/packages/big-design-icons/src/components/AddCircleOutlineIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/AddIcon.tsx b/packages/big-design-icons/src/components/AddIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ArrowBackIcon.tsx b/packages/big-design-icons/src/components/ArrowBackIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ArrowDownwardIcon.tsx b/packages/big-design-icons/src/components/ArrowDownwardIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ArrowDropDownIcon.tsx b/packages/big-design-icons/src/components/ArrowDropDownIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ArrowForwardIcon.tsx b/packages/big-design-icons/src/components/ArrowForwardIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ArrowUpwardIcon.tsx b/packages/big-design-icons/src/components/ArrowUpwardIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/AssignmentIcon.tsx b/packages/big-design-icons/src/components/AssignmentIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/BaselineHelpIcon.tsx b/packages/big-design-icons/src/components/BaselineHelpIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/CheckCircleIcon.tsx b/packages/big-design-icons/src/components/CheckCircleIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/CheckIcon.tsx b/packages/big-design-icons/src/components/CheckIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ChevronLeftIcon.tsx b/packages/big-design-icons/src/components/ChevronLeftIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ChevronRightIcon.tsx b/packages/big-design-icons/src/components/ChevronRightIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/CloseIcon.tsx b/packages/big-design-icons/src/components/CloseIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/DeleteIcon.tsx b/packages/big-design-icons/src/components/DeleteIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/DragIndicatorIcon.tsx b/packages/big-design-icons/src/components/DragIndicatorIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/EditIcon.tsx b/packages/big-design-icons/src/components/EditIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ErrorIcon.tsx b/packages/big-design-icons/src/components/ErrorIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ExpandLessIcon.tsx b/packages/big-design-icons/src/components/ExpandLessIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ExpandMoreIcon.tsx b/packages/big-design-icons/src/components/ExpandMoreIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/FileCopyIcon.tsx b/packages/big-design-icons/src/components/FileCopyIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/FilterListIcon.tsx b/packages/big-design-icons/src/components/FilterListIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/InfoIcon.tsx b/packages/big-design-icons/src/components/InfoIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/InvertColorsIcon.tsx b/packages/big-design-icons/src/components/InvertColorsIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/LanguageIcon.tsx b/packages/big-design-icons/src/components/LanguageIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/MenuIcon.tsx b/packages/big-design-icons/src/components/MenuIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/MoreHorizIcon.tsx b/packages/big-design-icons/src/components/MoreHorizIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/NotificationsIcon.tsx b/packages/big-design-icons/src/components/NotificationsIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/OpenInNewIcon.tsx b/packages/big-design-icons/src/components/OpenInNewIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/PublicIcon.tsx b/packages/big-design-icons/src/components/PublicIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/ReceiptIcon.tsx b/packages/big-design-icons/src/components/ReceiptIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/RemoveCircleOutlineIcon.tsx b/packages/big-design-icons/src/components/RemoveCircleOutlineIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/RemoveIcon.tsx b/packages/big-design-icons/src/components/RemoveIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/RestoreIcon.tsx b/packages/big-design-icons/src/components/RestoreIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/SearchIcon.tsx b/packages/big-design-icons/src/components/SearchIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/SettingsIcon.tsx b/packages/big-design-icons/src/components/SettingsIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/StarBorderIcon.tsx b/packages/big-design-icons/src/components/StarBorderIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg

diff --git a/packages/big-design-icons/src/components/StarHalfIcon.tsx b/packages/big-design-icons/src/components/StarHalfIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg