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" size="small"
variant="outlined" variant="outlined"
placeholder={LL.SEARCH()} placeholder={LL.SEARCH()}
aria-label={LL.SEARCH()}
onChange={(event) => { onChange={(event) => {
setSearch(event.target.value); setSearch(event.target.value);
}} }}

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

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

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

@@ -669,7 +669,7 @@ const Devices = memo(() => {
</Typography> </Typography>
<Grid justifyContent="flex-end"> <Grid justifyContent="flex-end">
<ButtonTooltip title={LL.CLOSE()}> <ButtonTooltip title={LL.CLOSE()}>
<IconButton onClick={resetDeviceSelect}> <IconButton onClick={resetDeviceSelect} aria-label={LL.CLOSE()}>
<HighlightOffIcon color="primary" sx={{ fontSize: 18 }} /> <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
</IconButton> </IconButton>
</ButtonTooltip> </ButtonTooltip>
@@ -681,6 +681,7 @@ const Devices = memo(() => {
variant="outlined" variant="outlined"
sx={{ width: '22ch' }} sx={{ width: '22ch' }}
placeholder={LL.SEARCH()} placeholder={LL.SEARCH()}
aria-label={LL.SEARCH()}
onChange={(event) => { onChange={(event) => {
setSearch(event.target.value); setSearch(event.target.value);
}} }}
@@ -695,19 +696,22 @@ const Devices = memo(() => {
}} }}
/> />
<ButtonTooltip title={LL.DEVICE_DETAILS()}> <ButtonTooltip title={LL.DEVICE_DETAILS()}>
<IconButton onClick={() => setShowDeviceInfo(true)}> <IconButton
onClick={() => setShowDeviceInfo(true)}
aria-label={LL.DEVICE_DETAILS()}
>
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} /> <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
</IconButton> </IconButton>
</ButtonTooltip> </ButtonTooltip>
{me.admin && ( {me.admin && (
<ButtonTooltip title={LL.CUSTOMIZATIONS()}> <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
<IconButton onClick={customize}> <IconButton onClick={customize} aria-label={LL.CUSTOMIZATIONS()}>
<ConstructionIcon color="primary" sx={{ fontSize: 18 }} /> <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
</IconButton> </IconButton>
</ButtonTooltip> </ButtonTooltip>
)} )}
<ButtonTooltip title={LL.EXPORT()}> <ButtonTooltip title={LL.EXPORT()}>
<IconButton onClick={handleDownloadCsv}> <IconButton onClick={handleDownloadCsv} aria-label={LL.EXPORT()}>
<DownloadIcon color="primary" sx={{ fontSize: 18 }} /> <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
</IconButton> </IconButton>
</ButtonTooltip> </ButtonTooltip>

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

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

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

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

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

@@ -211,15 +211,24 @@ const ManageUsers = () => {
<Cell stiff> <Cell stiff>
<IconButton <IconButton
size="small" size="small"
aria-label={LL.GENERATING_TOKEN()}
disabled={!authenticatedContext.me.admin} disabled={!authenticatedContext.me.admin}
onClick={() => generateTokenForUser(u.username)} onClick={() => generateTokenForUser(u.username)}
> >
<VpnKeyIcon /> <VpnKeyIcon />
</IconButton> </IconButton>
<IconButton size="small" onClick={() => removeUser(u)}> <IconButton
size="small"
onClick={() => removeUser(u)}
aria-label={LL.REMOVE()}
>
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
<IconButton size="small" onClick={() => editUser(u)}> <IconButton
size="small"
onClick={() => editUser(u)}
aria-label={LL.EDIT()}
>
<EditIcon /> <EditIcon />
</IconButton> </IconButton>
</Cell> </Cell>

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

@@ -355,6 +355,7 @@ const SystemLog = () => {
> >
<IconButton <IconButton
disableRipple disableRipple
aria-label={LL.CANCEL()}
onClick={() => { onClick={() => {
setReadOpen(false); setReadOpen(false);
setReadValue(''); setReadValue('');
@@ -380,7 +381,7 @@ const SystemLog = () => {
) : ( ) : (
<> <>
{data.developer_mode && ( {data.developer_mode && (
<IconButton onClick={sendReadCommand}> <IconButton onClick={sendReadCommand} aria-label={LL.EXECUTE()}>
<PlayArrowIcon color="primary" /> <PlayArrowIcon color="primary" />
</IconButton> </IconButton>
)} )}

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

@@ -567,7 +567,10 @@ const Version = () => {
<Grid size={{ xs: 8, md: 10 }}> <Grid size={{ xs: 8, md: 10 }}>
<Typography> <Typography>
{latestVersion?.name} {latestVersion?.name}
<IconButton onClick={() => setShowVersionInfo(1)}> <IconButton
onClick={() => setShowVersionInfo(1)}
aria-label={LL.FIRMWARE_VERSION_INFO()}
>
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} /> <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
</IconButton> </IconButton>
{showButtons(false)} {showButtons(false)}
@@ -580,7 +583,10 @@ const Version = () => {
<Grid size={{ xs: 8, md: 10 }}> <Grid size={{ xs: 8, md: 10 }}>
<Typography> <Typography>
{latestDevVersion?.name} {latestDevVersion?.name}
<IconButton onClick={() => setShowVersionInfo(2)}> <IconButton
onClick={() => setShowVersionInfo(2)}
aria-label={LL.FIRMWARE_VERSION_INFO()}
>
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} /> <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
</IconButton> </IconButton>
{showButtons(true)} {showButtons(true)}

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

@@ -44,7 +44,7 @@ const LANGUAGE_OPTIONS: LanguageOption[] = [
]; ];
const LanguageSelector = () => { const LanguageSelector = () => {
const { setLocale, locale } = useContext(I18nContext); const { setLocale, locale, LL } = useContext(I18nContext);
const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = useCallback( const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = useCallback(
async ({ target }) => { async ({ target }) => {
@@ -72,6 +72,7 @@ const LanguageSelector = () => {
<TextField <TextField
name="locale" name="locale"
variant="outlined" variant="outlined"
aria-label={LL.LANGUAGE()}
value={locale} value={locale}
onChange={onLocaleSelected} onChange={onLocaleSelected}
size="small" size="small"

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

@@ -25,7 +25,11 @@ const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) =
input: { input: {
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton onClick={togglePasswordVisibility} edge="end"> <IconButton
onClick={togglePasswordVisibility}
edge="end"
aria-label="Password visibility"
>
{showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />} {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>

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

@@ -21,7 +21,7 @@ const ValidatedTextField: FC<ValidatedTextFieldProps> = ({
return ( return (
<> <>
<TextField error={!!errors} {...rest} /> <TextField error={!!errors} {...rest} aria-label="Error" />
{errors?.map((e) => ( {errors?.map((e) => (
<FormHelperText key={e.message}>{e.message}</FormHelperText> <FormHelperText key={e.message}>{e.message}</FormHelperText>
))} ))}