From a1c5297eef117704dbe6eae9c55c93fa4083046a Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Wed, 5 Nov 2025 14:02:00 +0100
Subject: [PATCH] add aria-label to buttons and text fields with no label #2710

---
 interface/src/app/main/Customizations.tsx           |  1 +
 interface/src/app/main/Dashboard.tsx                |  3 +++
 interface/src/app/main/Devices.tsx                  | 12 ++++++++----
 interface/src/app/main/DevicesDialog.tsx            |  1 +
 .../src/app/settings/network/NetworkSettings.tsx    |  2 +-
 interface/src/app/settings/security/ManageUsers.tsx | 13 +++++++++++--
 interface/src/app/status/SystemLog.tsx              |  3 ++-
 interface/src/app/status/Version.tsx                | 10 ++++++++--
 .../src/components/inputs/LanguageSelector.tsx      |  3 ++-
 .../components/inputs/ValidatedPasswordField.tsx    |  6 +++++-
 .../src/components/inputs/ValidatedTextField.tsx    |  2 +-
 11 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/interface/src/app/main/Customizations.tsx b/interface/src/app/main/Customizations.tsx
index dc6e1e9e4..2f340de14 100644
--- a/interface/src/app/main/Customizations.tsx
+++ b/interface/src/app/main/Customizations.tsx
@@ -558,6 +558,7 @@ const Customizations = () => {
               size="small"
               variant="outlined"
               placeholder={LL.SEARCH()}
+              aria-label={LL.SEARCH()}
               onChange={(event) => {
                 setSearch(event.target.value);
               }}
diff --git a/interface/src/app/main/Dashboard.tsx b/interface/src/app/main/Dashboard.tsx
index dcb8c6e1e..8a28ea0d3 100644
--- a/interface/src/app/main/Dashboard.tsx
+++ b/interface/src/app/main/Dashboard.tsx
@@ -364,6 +364,9 @@ const Dashboard = memo(() => {
                                   ) && (
                                     <IconButton
                                       size="small"
+                                      aria-label={
+                                        LL.CHANGE_VALUE() + ' ' + LL.VALUE(0)
+                                      }
                                       onClick={() => editDashboardValue(di)}
                                     >
                                       <EditIcon
diff --git a/interface/src/app/main/Devices.tsx b/interface/src/app/main/Devices.tsx
index bb00dba57..84c2b1be8 100644
--- a/interface/src/app/main/Devices.tsx
+++ b/interface/src/app/main/Devices.tsx
@@ -669,7 +669,7 @@ const Devices = memo(() => {
             </Typography>
             <Grid justifyContent="flex-end">
               <ButtonTooltip title={LL.CLOSE()}>
-                <IconButton onClick={resetDeviceSelect}>
+                <IconButton onClick={resetDeviceSelect} aria-label={LL.CLOSE()}>
                   <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
                 </IconButton>
               </ButtonTooltip>
@@ -681,6 +681,7 @@ const Devices = memo(() => {
             variant="outlined"
             sx={{ width: '22ch' }}
             placeholder={LL.SEARCH()}
+            aria-label={LL.SEARCH()}
             onChange={(event) => {
               setSearch(event.target.value);
             }}
@@ -695,19 +696,22 @@ const Devices = memo(() => {
             }}
           />
           <ButtonTooltip title={LL.DEVICE_DETAILS()}>
-            <IconButton onClick={() => setShowDeviceInfo(true)}>
+            <IconButton
+              onClick={() => setShowDeviceInfo(true)}
+              aria-label={LL.DEVICE_DETAILS()}
+            >
               <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
             </IconButton>
           </ButtonTooltip>
           {me.admin && (
             <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
-              <IconButton onClick={customize}>
+              <IconButton onClick={customize} aria-label={LL.CUSTOMIZATIONS()}>
                 <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
               </IconButton>
             </ButtonTooltip>
           )}
           <ButtonTooltip title={LL.EXPORT()}>
-            <IconButton onClick={handleDownloadCsv}>
+            <IconButton onClick={handleDownloadCsv} aria-label={LL.EXPORT()}>
               <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
             </IconButton>
           </ButtonTooltip>
diff --git a/interface/src/app/main/DevicesDialog.tsx b/interface/src/app/main/DevicesDialog.tsx
index 759cd5d78..372926e9f 100644
--- a/interface/src/app/main/DevicesDialog.tsx
+++ b/interface/src/app/main/DevicesDialog.tsx
@@ -137,6 +137,7 @@ const DevicesDialog = ({
               <TextField
                 name="v"
                 value={editItem.v}
+                aria-label={valueLabel}
                 disabled={!writeable}
                 sx={{ width: '30ch' }}
                 select
diff --git a/interface/src/app/settings/network/NetworkSettings.tsx b/interface/src/app/settings/network/NetworkSettings.tsx
index 454eed222..e9917fb92 100644
--- a/interface/src/app/settings/network/NetworkSettings.tsx
+++ b/interface/src/app/settings/network/NetworkSettings.tsx
@@ -164,7 +164,7 @@ const NetworkSettings = () => {
                   selectedNetwork.bssid
                 }
               />
-              <IconButton onClick={setCancel}>
+              <IconButton onClick={setCancel} aria-label={LL.CANCEL()}>
                 <DeleteIcon />
               </IconButton>
             </ListItem>
diff --git a/interface/src/app/settings/security/ManageUsers.tsx b/interface/src/app/settings/security/ManageUsers.tsx
index 034e98bec..34552b059 100644
--- a/interface/src/app/settings/security/ManageUsers.tsx
+++ b/interface/src/app/settings/security/ManageUsers.tsx
@@ -211,15 +211,24 @@ const ManageUsers = () => {
                     <Cell stiff>
                       <IconButton
                         size="small"
+                        aria-label={LL.GENERATING_TOKEN()}
                         disabled={!authenticatedContext.me.admin}
                         onClick={() => generateTokenForUser(u.username)}
                       >
                         <VpnKeyIcon />
                       </IconButton>
-                      <IconButton size="small" onClick={() => removeUser(u)}>
+                      <IconButton
+                        size="small"
+                        onClick={() => removeUser(u)}
+                        aria-label={LL.REMOVE()}
+                      >
                         <DeleteIcon />
                       </IconButton>
-                      <IconButton size="small" onClick={() => editUser(u)}>
+                      <IconButton
+                        size="small"
+                        onClick={() => editUser(u)}
+                        aria-label={LL.EDIT()}
+                      >
                         <EditIcon />
                       </IconButton>
                     </Cell>
diff --git a/interface/src/app/status/SystemLog.tsx b/interface/src/app/status/SystemLog.tsx
index 128efba26..84663c19d 100644
--- a/interface/src/app/status/SystemLog.tsx
+++ b/interface/src/app/status/SystemLog.tsx
@@ -355,6 +355,7 @@ const SystemLog = () => {
             >
               <IconButton
                 disableRipple
+                aria-label={LL.CANCEL()}
                 onClick={() => {
                   setReadOpen(false);
                   setReadValue('');
@@ -380,7 +381,7 @@ const SystemLog = () => {
           ) : (
             <>
               {data.developer_mode && (
-                <IconButton onClick={sendReadCommand}>
+                <IconButton onClick={sendReadCommand} aria-label={LL.EXECUTE()}>
                   <PlayArrowIcon color="primary" />
                 </IconButton>
               )}
diff --git a/interface/src/app/status/Version.tsx b/interface/src/app/status/Version.tsx
index 584ac975b..34d2430da 100644
--- a/interface/src/app/status/Version.tsx
+++ b/interface/src/app/status/Version.tsx
@@ -567,7 +567,10 @@ const Version = () => {
                 <Grid size={{ xs: 8, md: 10 }}>
                   <Typography>
                     {latestVersion?.name}
-                    <IconButton onClick={() => setShowVersionInfo(1)}>
+                    <IconButton
+                      onClick={() => setShowVersionInfo(1)}
+                      aria-label={LL.FIRMWARE_VERSION_INFO()}
+                    >
                       <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
                     </IconButton>
                     {showButtons(false)}
@@ -580,7 +583,10 @@ const Version = () => {
                 <Grid size={{ xs: 8, md: 10 }}>
                   <Typography>
                     {latestDevVersion?.name}
-                    <IconButton onClick={() => setShowVersionInfo(2)}>
+                    <IconButton
+                      onClick={() => setShowVersionInfo(2)}
+                      aria-label={LL.FIRMWARE_VERSION_INFO()}
+                    >
                       <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
                     </IconButton>
                     {showButtons(true)}
diff --git a/interface/src/components/inputs/LanguageSelector.tsx b/interface/src/components/inputs/LanguageSelector.tsx
index 6ff6836e0..3b862a35f 100644
--- a/interface/src/components/inputs/LanguageSelector.tsx
+++ b/interface/src/components/inputs/LanguageSelector.tsx
@@ -44,7 +44,7 @@ const LANGUAGE_OPTIONS: LanguageOption[] = [
 ];
 
 const LanguageSelector = () => {
-  const { setLocale, locale } = useContext(I18nContext);
+  const { setLocale, locale, LL } = useContext(I18nContext);
 
   const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = useCallback(
     async ({ target }) => {
@@ -72,6 +72,7 @@ const LanguageSelector = () => {
     <TextField
       name="locale"
       variant="outlined"
+      aria-label={LL.LANGUAGE()}
       value={locale}
       onChange={onLocaleSelected}
       size="small"
diff --git a/interface/src/components/inputs/ValidatedPasswordField.tsx b/interface/src/components/inputs/ValidatedPasswordField.tsx
index 11a728798..44ab69995 100644
--- a/interface/src/components/inputs/ValidatedPasswordField.tsx
+++ b/interface/src/components/inputs/ValidatedPasswordField.tsx
@@ -25,7 +25,11 @@ const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) =
         input: {
           endAdornment: (
             <InputAdornment position="end">
-              <IconButton onClick={togglePasswordVisibility} edge="end">
+              <IconButton
+                onClick={togglePasswordVisibility}
+                edge="end"
+                aria-label="Password visibility"
+              >
                 {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
               </IconButton>
             </InputAdornment>
diff --git a/interface/src/components/inputs/ValidatedTextField.tsx b/interface/src/components/inputs/ValidatedTextField.tsx
index 33f99454d..b7ccd3ae6 100644
--- a/interface/src/components/inputs/ValidatedTextField.tsx
+++ b/interface/src/components/inputs/ValidatedTextField.tsx
@@ -21,7 +21,7 @@ const ValidatedTextField: FC<ValidatedTextFieldProps> = ({
 
   return (
     <>
-      <TextField error={!!errors} {...rest} />
+      <TextField error={!!errors} {...rest} aria-label="Error" />
       {errors?.map((e) => (
         <FormHelperText key={e.message}>{e.message}</FormHelperText>
       ))}