andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 07:49:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

add aria-label to buttons and text fields with no label #2710

Browse Source
This commit is contained in:
proddy
2025-11-05 14:02:00 +01:00
parent cda04bef26
commit a1c5297eef
11 changed files with 43 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
interface/src/app/main/Customizations.tsx
View File

@@ -558,6 +558,7 @@ const Customizations = () => {
size="small"
variant="outlined"
placeholder={LL.SEARCH()}
aria-label={LL.SEARCH()}
onChange={(event) => {
setSearch(event.target.value);
}}

3
interface/src/app/main/Dashboard.tsx
View File

@@ -364,6 +364,9 @@ const Dashboard = memo(() => {
) && (
<IconButton
size="small"
aria-label={
LL.CHANGE_VALUE() + ' ' + LL.VALUE(0)
}
onClick={() => editDashboardValue(di)}
>
<EditIcon

12
interface/src/app/main/Devices.tsx
View File

@@ -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>

1
interface/src/app/main/DevicesDialog.tsx
View File

@@ -137,6 +137,7 @@ const DevicesDialog = ({
<TextField
name="v"
value={editItem.v}
aria-label={valueLabel}
disabled={!writeable}
sx={{ width: '30ch' }}
select

2
interface/src/app/settings/network/NetworkSettings.tsx
View File

@@ -164,7 +164,7 @@ const NetworkSettings = () => {
selectedNetwork.bssid
}
/>
<IconButton onClick={setCancel}>
<IconButton onClick={setCancel} aria-label={LL.CANCEL()}>
<DeleteIcon />
</IconButton>
</ListItem>

13
interface/src/app/settings/security/ManageUsers.tsx
View File

@@ -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>

3
interface/src/app/status/SystemLog.tsx
View File

@@ -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>
)}

10
interface/src/app/status/Version.tsx
View File

@@ -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)}

3
interface/src/components/inputs/LanguageSelector.tsx
View File

@@ -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"

6
interface/src/components/inputs/ValidatedPasswordField.tsx
View File

@@ -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>

2
interface/src/components/inputs/ValidatedTextField.tsx
View File

@@ -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>
))}