search

civictechindex / CTI-website-frontend

Join a worldwide movement to catalog 
every open source 
civic tech project.
https://civictechindex.org
MIT License
30 stars 30 forks source link

Improve accessibility with labels on form inputs #1162

Closed mealthebear closed 2 years ago

mealthebear commented 2 years ago

Closes #1102

This PR adds 'aria-label' attributes to various form inputs across the site. There are some instances where adding the attribute causes the styling of the input to behave unexpectedly, which may suggest a refactoring of code is needed at a later time. Other attributes such as 'placeholder' are able to provide accessibility for screen readers nonetheless.

mealthebear commented 2 years ago

In OrganizationSearch.js file the placeholder text is assigned as const variable and then that variable is assigned like below const placeholder = 'Search for an organization'; and then placeholder = {placeholder} , I don't know whether this is correct or that one is correct. Other than that eveything else is fine

Oh yeah, that code is a little confusing because 'placeholder' (the variable) shares the same name as 'placeholder' (the attribute). It works as intended, so the only issue would be code styling. We can change it before merging if we want.

bruceplai commented 2 years ago

@mealthebear were there only 2 input fields that were flagged by Axe with missing labels?

codeclimate[bot] commented 2 years ago

Code Climate has analyzed commit 6abea0db and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 22.7% (50% is the threshold).

This pull request will bring the total coverage in the repository to 80.7%.

View more on Code Climate.