Final Release (#4205)

Author: bdougie

.github/workflows/pizza.yml

@@ -5,6 +5,20 @@
 
 > All notable changes to this project will be documented in this file
 
+## [2.64.1-beta.2](https://github.com/open-sauced/app/compare/v2.64.1-beta.1...v2.64.1-beta.2) (2024-10-31)
+
+
+### 🐛 Bug Fixes
+
+* a11y fail   click events have key events and no static element interactions  ([#4169](https://github.com/open-sauced/app/issues/4169)) ([f86e76b](https://github.com/open-sauced/app/commit/f86e76bfe8e25d72f3cc538b77fc00919debfb6e))
+
+## [2.64.1-beta.1](https://github.com/open-sauced/app/compare/v2.64.0...v2.64.1-beta.1) (2024-10-25)
+
+
+### 🐛 Bug Fixes
+
+* eslint warning "anchor-is-valid" ([#4181](https://github.com/open-sauced/app/issues/4181)) ([5b67103](https://github.com/open-sauced/app/commit/5b67103d6f53d7d4f2d5b290c19cd7052ff0a34f))
+
 ## [2.64.0](https://github.com/open-sauced/app/compare/v2.63.0...v2.64.0) (2024-10-22)
 
 

CHANGELOG.md

@@ -63,13 +63,13 @@ const PillSelector: React.FC<PillSelectorProps> = ({
       <PillSelectorButton>
         {selected ? (
           <>
-            <div onClick={toggleFilter}>
+            <button onClick={toggleFilter}>
               {pillOptions.find((option) => option.toLowerCase().replaceAll(" ", "-") === selected)}
-            </div>
+            </button>
             <Icon IconImage={cancelIcon} onClick={handleCancelClick} />
           </>
         ) : (
-          <div onClick={toggleFilter}>Add Filter</div>
+          <button onClick={toggleFilter}>Add Filter</button>
         )}
       </PillSelectorButton>
 

CODEOWNERS

@@ -14,12 +14,12 @@ interface RadioProps {
 
 const Radio = ({ className, withLabel, id, children, value, checked = false, onClick }: RadioProps): JSX.Element => {
   return (
-    <div
+    <button
       onClick={onClick}
       className={
         `${
           checked && "!bg-light-orange-3"
-        }  px-2 py-1.5 text-sm text-slate-600   group  rounded-md  hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
+        }  w-full px-2 py-1.5 text-sm text-slate-600   group  rounded-md  hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
         `${className}`
       }
     >
@@ -49,7 +49,7 @@ const Radio = ({ className, withLabel, id, children, value, checked = false, onC
           </span>
         )}
       </label>
-    </div>
+    </button>
   );
 };
 

components/atoms/PillSelector/pill-selector.tsx

@@ -12,10 +12,10 @@ interface RadioCheckProps {
 
 const RadioCheck = ({ className, id, children, value, checked = false, onClick }: RadioCheckProps): JSX.Element => {
   return (
-    <div
+    <button
       onClick={onClick}
       className={
-        "px-2 py-1.5 text-sm text-black group  rounded-md  hover:bg-light-orange-3 hover:text-light-orange-9 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition" +
+        "w-full px-2 py-1.5 text-sm text-black group  rounded-md  hover:bg-light-orange-3 hover:text-light-orange-9 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition" +
         `${className}`
       }
     >
@@ -36,7 +36,7 @@ const RadioCheck = ({ className, id, children, value, checked = false, onClick }
         )}
         <span className="ml-3 leading-none my-auto">{children}</span>
       </label>
-    </div>
+    </button>
   );
 };
 

components/atoms/Radio/radio.tsx

@@ -11,7 +11,7 @@ interface IconProps {
 
 const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16 }) => {
   return (
-    <div className={clsx(`inline-flex`, className)} onClick={onClick}>
+    <button className={clsx(`inline-flex`, className)} onClick={onClick}>
       <svg>
         <use
           href={IconImage}
@@ -21,7 +21,7 @@ const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16
           style={{ stroke: "currentcolor", maxWidth: "100%", height: "auto" }}
         />
       </svg>
-    </div>
+    </button>
   );
 };
 

components/atoms/RadioCheck/radio-check.tsx

@@ -119,7 +119,6 @@ const Search = ({
       <FaSearch className="text-light-slate-9" fontSize={16} onClick={handleOnSearch} />
       <input
         className="w-full pl-2 placeholder:text-sm focus:outline-none placeholder:text-slate-400 disabled:cursor-not-allowed"
-        autoFocus={autoFocus}
         placeholder={placeholder}
         name={name}
         value={search}
@@ -141,7 +140,7 @@ const Search = ({
           <ScrollArea type="auto" className="h-60">
             {suggestionsLabel && suggestions.length > 0 ? <div className="pl-5 pt-4">{suggestionsLabel}</div> : null}
             {suggestions.map((suggestion, index) => (
-              <div
+              <button
                 className={clsx(
                   cursor === index && "_cursorActive bg-slate-100",
                   "px-4 py-2 hover:bg-light-slate-2",
@@ -162,7 +161,7 @@ const Search = ({
                 ) : (
                   suggestion.node
                 )}
-              </div>
+              </button>
             ))}
           </ScrollArea>
         </div>

components/atoms/SVGIcon/svg-icon.tsx

@@ -77,12 +77,12 @@ const TextInput = ({
               {state === "valid" ? (
                 <CheckCircleFillIcon className="ml-1 text-light-orange-9" size={12} />
               ) : !!value ? (
-                <span title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
+                <button title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
                   <XCircleFillIcon
                     className={clsx(state === "invalid" && errorMsg ? "text-light-red-11" : "", "cursor-pointer")}
                     size={12}
                   />
-                </span>
+                </button>
               ) : (
                 ""
               )}

components/atoms/Search/search.tsx

@@ -26,10 +26,7 @@ AllowNone.args = {
 CustomItems.args = {
   children: [
     <div key={1}>
-      Option 1 w\{" "}
-      <a href="#" target="_blank">
-        link
-      </a>
+      Option 1 w\ <span>span</span>
     </div>,
     <p key={2}>
       Option 2 w\ <strong>strong</strong>