fix(react): update required message for aria attributes

aria attributes are kebab case in react fixes #6463 Signed-off-by: Ashley Ryan <asryan@vmware.com>
vmware-clarity · Jan 4, 2022 · 6c843b2 · 6c843b2
1 parent 1f96d06
commit 6c843b2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/packages/core/src/internal/decorators/property.ts b/packages/core/src/internal/decorators/property.ts
@@ -88,6 +88,19 @@ export function requirePropertyCheck(protoOrDescriptor: any, name: string, optio
   protoOrDescriptor.firstUpdated = firstUpdated;
 }
 
+/**
+ * In React, DOM attributes and properties are camelCase, except for aria- and data- attributes
+ * https://reactjs.org/docs/dom-elements.html
+ *
+ * This will format aria attributes as kebab case, otherwise returning the original property name
+ */
+function getReactPropertyName(propertyName: string) {
+  if (propertyName.startsWith('aria')) {
+    return camelCaseToKebabCase(propertyName);
+  }
+  return propertyName;
+}
+
 function getRequiredMessage(level = 'warning', propertyName: string, tagName: string) {
   const tag = tagName.toLocaleLowerCase();
   return (
@@ -96,7 +109,9 @@ function getRequiredMessage(level = 'warning', propertyName: string, tagName: st
     )}: ${propertyName} is required to use ${tag} component. Set the JS Property or HTML Attribute.\n\n` +
     `${getAngularVersion() ? `Angular: <${tag} [${propertyName}]="..."></${tag}>\n` : ''}` +
     `${getVueVersion() ? `Vue: <${tag} :${propertyName}="..."></${tag}>\n` : ''}` +
-    `${getReactVersion() ? `React: <${kebabCaseToPascalCase(tag)} ${propertyName}={...} />\n` : ''}` +
+    `${
+      getReactVersion() ? `React: <${kebabCaseToPascalCase(tag)} ${getReactPropertyName(propertyName)}={...} />\n` : ''
+    }` +
     `${`HTML: <${tag} ${camelCaseToKebabCase(propertyName)}="..."></${tag}>\n`}` +
     `${`JavaScript: document.querySelector('${tag}').${propertyName} = '...';\n\n`}`
   );

diff --git a/packages/react/App.tsx b/packages/react/App.tsx
@@ -6,7 +6,7 @@ import {
   CdsAccordionContent,
 } from './dist/react/accordion/index.js';
 import { CdsAlert, CdsAlertActions, CdsAlertGroup } from './dist/react/alert/index.js';
-import { CdsButton } from './dist/react/button/index.js';
+import { CdsButton, CdsIconButton } from './dist/react/button/index.js';
 import { CdsBadge } from './dist/react/badge/index.js';
 import { CdsCheckbox } from './dist/react/checkbox/index.js';
 import { CdsControl, CdsControlMessage, CdsFormGroup } from './dist/react/forms/index.js';
@@ -40,7 +40,7 @@ import { CdsTree, CdsTreeItem } from './dist/react/tree-view/index.js';
 import { CdsInternalVisualCheckbox } from './dist/react/internal-components/visual-checkbox/index.js';
 import { CdsInternalCloseButton } from './dist/react/internal-components/close-button/index.js';
 import { CdsDropdown } from './dist/react/dropdown/index.js';
-import { CdsInternalPointer } from './dist/react/popup/index.js';
+import { CdsInternalPointer } from './dist/react/internal-components/popup/index.js';
 import { CdsInternalPanel } from './dist/react/internal-components/panel/index.js';
 
 ClarityIcons.addIcons(userIcon, timesIcon);
@@ -476,6 +476,13 @@ export default class App extends React.Component<{}, AppState> {
           <h2>Internal Close button</h2>
           <CdsInternalCloseButton />
 
+          <h2>Icon Buttons</h2>
+          <div cds-layout="horizontal gap:md">
+            <CdsIconButton aria-label="My Icon Button">
+              <CdsIcon shape="user" />
+            </CdsIconButton>
+          </div>
+
           <h2>Badge</h2>
           <div cds-layout="horizontal gap:sm">
             <CdsBadge status="info">2</CdsBadge>