Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add ARIA labels to input fields #2562

Merged
merged 3 commits into from
Aug 4, 2023
Merged

add ARIA labels to input fields #2562

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5c371c
add aria labels to input fields
merobi-hub Aug 3, 2023
55246f7
remove unnecessary spaces and standardize font for consistent spacing
merobi-hub Aug 4, 2023
36f852c
resolve merge conflict
merobi-hub Aug 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/src/components/datasets/DatasetInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
<Box mb={1}>
<MqText subheading>{i18next.t('dataset_info.facets_subhead')}</MqText>
</Box>
<MqJsonView data={facets} searchable={true} placeholder='Search' />
<MqJsonView data={facets} searchable={true} aria-label={i18next.t('dataset_info.facets_subhead_aria')} aria-required='True' placeholder='Search' />
</Box>
)}
{run && (
Expand Down
8 changes: 7 additions & 1 deletion web/src/components/jobs/RunInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,13 @@ const RunInfo: FunctionComponent<RunInfoProps> = props => {
<Box mb={1}>
<MqText subheading>{i18next.t('jobs.runinfo_subhead')}</MqText>
</Box>
<MqJsonView data={run.facets} searchable={true} placeholder='Search' />
<MqJsonView
data={run.facets}
searchable={true}
aria-label={i18next.t('jobs.facets_subhead_aria')}
aria-required='true'
placeholder='Search'
/>
</Box>
)}
</Box>
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/search/SearchPlaceholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const SearchPlaceholder: React.FC<WithStyles<typeof styles>> = ({ classes }) =>
return (
<Box className={classes.root}>
<Box display={'inline'}>
<MqText disabled inline>
<MqText disabled inline aria-label={i18next.t('search.search_aria')} aria-required='true'>
{' '}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is there a space character here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. I removed it along with a few other unnecessary spaces and standardized the font so the spacing is consistent without them.
Screenshot 2023-08-04 at 08 47 33

{i18next.t('search.search')}
</MqText>{' '}
Expand Down
12 changes: 12 additions & 0 deletions web/src/i18n/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,14 @@ i18next
empty_title: 'No Run Information Available',
empty_body: 'Try adding some runs for this job.',
runinfo_subhead: 'FACETS',
facets_subhead_aria: 'Search',
runs_subhead: 'FACETS',
dialog_delete: 'DELETE',
dialog_confirmation_title: 'Are you sure?'
},
search: {
search: 'Search',
search_aria: 'Search jobs and datasets',
jobs: 'Jobs',
and: 'and',
datasets: 'Datasets'
Expand All @@ -59,6 +61,7 @@ i18next
empty_title: 'No Fields',
empty_body: 'Try adding dataset fields.',
facets_subhead: 'FACETS',
facets_subhead_aria: 'Search',
run_subhead: 'Created by Run',
duration: 'Duration'
},
Expand Down Expand Up @@ -144,11 +147,13 @@ i18next
empty_body: "Essayez d'ajouter quelques exécutions pour ce travail.",
runinfo_subhead: 'FACETTES',
runs_subhead: 'FACETTES',
facets_subhead_aria: 'Recherche',
dialog_delete: 'EFFACER',
dialog_confirmation_title: 'Êtes-vous sûr?'
},
search: {
search: 'Recherche',
search_aria: 'Recherchez des emplois et des ensembles de données',
jobs: "d'Emplois",
and: 'et',
datasets: 'Jeux de Données'
Expand All @@ -170,6 +175,7 @@ i18next
empty_title: 'Aucun jeu de données trouvé',
empty_body: "Essayez d'ajouter des champs de jeu de données.",
facets_subhead: 'FACETTES',
facets_subhead_aria: 'Recherche',
run_subhead: 'Créé par Run',
duration: 'Durée'
},
Expand Down Expand Up @@ -258,11 +264,13 @@ i18next
empty_body: 'Intente agregar algunas ejecuciones para este trabajo.',
runinfo_subhead: 'FACETAS',
runs_subhead: 'FACETAS',
facets_subhead_aria: 'Buscar',
dialog_delete: 'ELIMINAR',
dialog_confirmation_title: 'Estás seguro?'
},
search: {
search: 'Buscar',
search_aria: 'Buscar trabajos y conjuntos de datos',
jobs: 'Trabajos',
and: 'y',
datasets: 'Conjuntos de Datos'
Expand All @@ -284,6 +292,7 @@ i18next
empty_title: 'No se encontraron conjuntos de datos',
empty_body: 'Intente agregar campos de conjuntos de datos.',
facets_subhead: 'FACETAS',
facets_subhead_aria: 'Buscar',
run_subhead: 'Creado por Ejecutar',
duration: 'Duración'
},
Expand Down Expand Up @@ -372,11 +381,13 @@ i18next
empty_body: 'Spróbuj dodać kilka przebiegów dla tego zadania.',
runinfo_subhead: 'ASPECTY',
runs_subhead: 'ASPECTY',
facets_subhead_aria: 'Wyszukiwanie',
dialog_delete: 'USUNĄĆ',
dialog_confirmation_title: 'Jesteś pewny?'
},
search: {
search: 'Wyszukiwanie',
search_aria: 'Wyszukiwanie zadań i zbiorów danych',
jobs: 'Zadania',
and: 'i',
datasets: 'Zbiory Danych'
Expand All @@ -398,6 +409,7 @@ i18next
empty_title: 'Nie znaleziono zbiorów danych',
empty_body: 'Spróbuj dodać pola zbiory danych.',
facets_subhead: 'ASPECTY',
facets_subhead_aria: 'Wyszukiwanie',
run_subhead: 'Stworzony przez Run',
duration: 'Czas trwania'
},
Expand Down