search

ukrbublik / react-awesome-query-builder

User-friendly query builder for React
https://ukrbublik.github.io/react-awesome-query-builder
MIT License
1.97k stars 494 forks source link

Use icon button label as the aria-label to improve accessibility. #1066

Closed FloatingSponge closed 3 months ago

FloatingSponge commented 3 months ago

To prevent an accessibility violation, mui and material-ui IconButtons should be given an aria-label for use with screen-readers. This uses the button label (which is not otherwise displayed) as the aria-label for screen-readers. The Autocomplete widgets also need aria-labels, in this case I've used the fieldPlaceHolder from config.

codesandbox[bot] commented 3 months ago

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-awesome-query-builder-examples ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 2:39pm
react-awesome-query-builder-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 2:39pm
react-awesome-query-builder-sandbox-next ✅ Ready (Inspect) Visit Preview Jun 19, 2024 2:39pm
codesandbox-ci[bot] commented 3 months ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a7411ef814a861cc8c2035d68ce55da540074ee3:

Sandbox Source
@react-awesome-query-builder/examples Configuration
@react-awesome-query-builder/sandbox Configuration
@react-awesome-query-builder/sandbox-simple Configuration
@react-awesome-query-builder/sandbox-next Configuration
FloatingSponge commented 3 months ago

Converted to draft as I investigate a similar aria problem with the field autocomplete widgets.

codecov[bot] commented 3 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 82.07%. Comparing base (2310dd2) to head (a7411ef).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #1066 +/- ## ======================================= Coverage 82.07% 82.07% ======================================= Files 211 211 Lines 10844 10846 +2 Branches 1316 1318 +2 ======================================= + Hits 8900 8902 +2 Misses 1341 1341 Partials 603 603 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

ukrbublik commented 3 months ago

Thanks for the PR! Could you please revert changes to the lock file?

FloatingSponge commented 3 months ago

Oops sorry, didn't realise I'd committed the lock file as well. I'll do that now.

On Wed, Jun 19, 2024 at 2:19 PM Denys Oblohin @.***> wrote:

Thanks for the PR! Could you please revert changes to the lock file?

— Reply to this email directly, view it on GitHub https://github.com/ukrbublik/react-awesome-query-builder/pull/1066#issuecomment-2178704857, or unsubscribe https://github.com/notifications/unsubscribe-auth/BJIMSMK3POWRKMDZ6HK2GZ3ZIGAPTAVCNFSM6AAAAABJQB35SCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZYG4YDIOBVG4 . You are receiving this because you authored the thread.Message ID: @.***>