fix: improve accessibility and remove invalid HTML patterns

Author: dan13ram

apps/web/src/layouts/DefaultLayout/Nav.styles.css.ts

@@ -273,6 +273,14 @@ export const chainPopUpButton = style({
   },
 })
 
+export const chainPopUpItem = style({
+  border: 0,
+  width: '100%',
+  textAlign: 'left',
+  font: 'inherit',
+  appearance: 'none',
+})
+
 export const themeToggleButton = style([
   atoms({
     borderStyle: 'solid',
@@ -318,6 +326,7 @@ export const wrongNetworkButton = style({
     'border 0.1s ease-in-out, background 0.1s ease-in-out, transform 0.1s ease-out',
   borderWidth: 'normal',
   borderStyle: 'solid',
+  background: 'transparent',
   borderColor: vars.color.negative,
   color: vars.color.negative,
   selectors: {

apps/web/src/layouts/DefaultLayout/NavMenu/ChainMenu.tsx

@@ -10,6 +10,7 @@ import { useAccount, useSwitchChain } from 'wagmi'
 
 import {
   chainPopUpButton,
+  chainPopUpItem,
   navButton,
   navPopUpWrapper,
   wrongNetworkButton,
@@ -140,7 +141,7 @@ export const ChainMenu: React.FC<ChainMenuProps> = ({
             borderColor="border"
             borderStyle="solid"
             borderWidth="normal"
-            backgroundColor="background1"
+            backgroundColor="transparent"
             borderRadius="curved"
             cursor={'pointer'}
             align={'center'}
@@ -187,7 +188,6 @@ export const ChainMenu: React.FC<ChainMenuProps> = ({
               mb="x2"
               align={'center'}
               justify={'center'}
-              style={{ borderRadius: '8px' }}
             >
               {`Switch to ${selectedChain.name}`}
             </Flex>
@@ -197,7 +197,7 @@ export const ChainMenu: React.FC<ChainMenuProps> = ({
               as="button"
               type="button"
               key={chain.id}
-              className={chainPopUpButton}
+              className={[chainPopUpButton, chainPopUpItem]}
               borderRadius="normal"
               onClick={() => onChainChange(chain.id)}
               cursor={
@@ -214,7 +214,6 @@ export const ChainMenu: React.FC<ChainMenuProps> = ({
               justify={'space-between'}
               disabled={hasNetwork && !isSelectedChain(chain.id)}
               aria-current={selectedChain.id === chain.id ? 'true' : undefined}
-              style={{ border: 0, width: '100%', textAlign: 'left' }}
             >
               <Flex align={'center'}>
                 <Box h="x6" w="x6" mr="x2">

apps/web/src/styles/globals.css

@@ -44,7 +44,7 @@ body {
   --flatpickr-selected-bg: #000;
   --flatpickr-selected-text: #fff;
   --flatpickr-backdrop-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
-  --focus-ring-color: #0085ff;
+  --focus-ring-color: #0085ff; /* vars.color.focusRing holds the canonical tokenized value; update both in sync */
   --mde-border: #c8ccd0;
   --mde-header-bg: #f9f9f9;
   --mde-surface: #fff;
@@ -71,7 +71,7 @@ html[data-theme-mode='dark'] {
   --flatpickr-selected-bg: #fff;
   --flatpickr-selected-text: #1f2024;
   --flatpickr-backdrop-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
-  --focus-ring-color: #0085ff;
+  --focus-ring-color: #0085ff; /* vars.color.focusRing holds the canonical tokenized value; update both in sync */
   --mde-border: #3f4047;
   --mde-header-bg: #2a2b30;
   --mde-surface: #1f2024;

packages/create-dao-ui/src/components/AuctionSettingsForm/AuctionSettingsForm.tsx

@@ -215,7 +215,6 @@ export const AuctionSettingsForm: React.FC<AuctionSettingsFormProps> = ({ title
                     onClick={() => handleFastDAOToggle(formik)}
                     aria-pressed={enableFastDAO}
                     aria-label="Enable Fast DAO"
-                    style={{ borderWidth: 0, padding: 0 }}
                   >
                     {enableFastDAO && <Icon fill="background1" id="check" />}
                   </Flex>

packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.tsx

@@ -23,6 +23,7 @@ interface FormNavButtonsProps {
   children?: React.ReactNode
   showReset?: boolean
   onAfterReset?: () => void
+  formId?: string
 }
 
 export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
@@ -35,12 +36,13 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
   children,
   showReset = true,
   onAfterReset,
+  formId,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isMounted, setIsMounted] = useState(false)
   const { resetForm } = useFormStore()
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     setIsMounted(true)
   }, [])
 
@@ -56,7 +58,12 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
       return
     }
 
-    document.querySelector('form')?.requestSubmit()
+    if (formId) {
+      ;(document.getElementById(formId) as HTMLFormElement)?.requestSubmit()
+    } else {
+      const form = document.querySelector('form')
+      if (form) (form as HTMLFormElement).requestSubmit()
+    }
   }
 
   return (

packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewAndDeploy.css.ts

@@ -38,6 +38,7 @@ export const deployCheckboxStyle = style({
   minWidth: 26,
   border: `1px solid ${vars.color.text1}`,
   borderRadius: '5px',
+  padding: 0,
   selectors: {
     '&:hover': { cursor: 'pointer', background: vars.color.text1 },
   },

packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewAndDeploy.tsx

@@ -484,13 +484,12 @@ export const ReviewAndDeploy: React.FC<ReviewAndDeploy> = ({
                   onClick={() => setHasConfirmedTerms((bool) => !bool)}
                   aria-pressed={hasConfirmedTerms}
                   aria-label="Confirm terms of service"
-                  style={{ borderWidth: 0, padding: 0 }}
                 >
                   {hasConfirmedTerms && <Icon fill="background1" id="check" />}
                 </Flex>
 
                 <Flex className={deployCheckboxHelperText}>
-                  I have reviewed and acknowledge and agree to the{' '}
+                  I have reviewed, acknowledge, and agree to the{' '}
                   <a
                     href={'/legal'}
                     target="_blank"
@@ -518,7 +517,6 @@ export const ReviewAndDeploy: React.FC<ReviewAndDeploy> = ({
                   onClick={() => setHasConfirmedChain((bool) => !bool)}
                   aria-pressed={hasConfirmedChain}
                   aria-label="Confirm deployment chain"
-                  style={{ borderWidth: 0, padding: 0 }}
                 >
                   {hasConfirmedChain && <Icon fill="background1" id="check" />}
                 </Flex>
@@ -545,7 +543,6 @@ export const ReviewAndDeploy: React.FC<ReviewAndDeploy> = ({
                     onClick={() => setHasConfirmedRewards((bool) => !bool)}
                     aria-pressed={hasConfirmedRewards}
                     aria-label="Confirm rewards documentation"
-                    style={{ borderWidth: 0, padding: 0 }}
                   >
                     {hasConfirmedRewards && <Icon fill="background1" id="check" />}
                   </Flex>
@@ -582,7 +579,6 @@ export const ReviewAndDeploy: React.FC<ReviewAndDeploy> = ({
                     onClick={() => setHasConfirmedFastDAO((bool) => !bool)}
                     aria-pressed={hasConfirmedFastDAO}
                     aria-label="Confirm fast DAO timings"
-                    style={{ borderWidth: 0, padding: 0 }}
                   >
                     {hasConfirmedFastDAO && <Icon fill="background1" id="check" />}
                   </Flex>

packages/create-proposal-ui/src/components/TransactionForm/Migration/PauseAuctionsForm.tsx

@@ -114,7 +114,6 @@ export const PauseAuctionsForm: React.FC = () => {
           onClick={() => setReduceDelay((bool) => !bool)}
           aria-pressed={reduceDelay}
           aria-label="Reduce voting delay and period"
-          style={{ borderWidth: 0, padding: 0 }}
         >
           {reduceDelay && <Icon fill="background1" id="check" />}
         </Flex>

packages/create-proposal-ui/src/components/TransactionForm/ReplaceArtwork/ReplaceArtworkForm.css.ts

@@ -13,6 +13,7 @@ export const checkboxStyle = style({
   minWidth: 26,
   border: `1px solid ${vars.color.text1}`,
   borderRadius: '5px',
+  padding: 0,
   selectors: {
     '&:hover, &:focus-visible': { cursor: 'pointer', background: vars.color.text1 },
   },

packages/ui/src/SingleImageUpload/SingleImageUpload.tsx

@@ -110,21 +110,21 @@ export const SingleImageUpload: React.FC<SingleImageUploadProps> = ({
               </Flex>
             </>
           )}
-
-          <input
-            className={defaultUploadStyle}
-            id={`${id}-file-upload`}
-            data-testid="file-upload"
-            name="file"
-            type="file"
-            ref={fileInputRef}
-            multiple={false}
-            onChange={(event) => {
-              handleFileUpload(event.currentTarget.files)
-            }}
-          />
         </Flex>
 
+        <input
+          className={defaultUploadStyle}
+          id={`${id}-file-upload`}
+          data-testid="file-upload"
+          name="file"
+          type="file"
+          ref={fileInputRef}
+          multiple={false}
+          onChange={(event) => {
+            handleFileUpload(event.currentTarget.files)
+          }}
+        />
+
         {uploadArtworkError && (
           <Box data-testid="error-msg" p={'x4'} fontSize={12} className={uploadErrorBox}>
             <Box as={'ul'} m={'x0'}>