docsearch icon indicating copy to clipboard operation
docsearch copied to clipboard

fix(docsearch-react): accessibility improvements

Open isner opened this issue 2 years ago • 6 comments

These changes address some of the concerns raised in #1370.

Issues addressed:

  • Incorrect role/attributes on dialog
  • Focus lost/not managed when closing dialog
  • Low-contrast text

Issues not addressed:

  • Adding aria-hidden or inert to the elements underlying the modal dialog (this was a heavier lift than I was prepared to undertake, and adding the aria-modal="true" attribute to the dialog has addressed this issue for some ATs)
  • Incorrect role/attributes on the search input itself (I don't think the input should actually be a combobox as suggested in #1370, since its purpose is not to assist the user in completing the field, but rather producing a list of navigation links)
  • Low-contrast icons (I wasn't prepared to create new icons)

isner avatar May 19 '22 18:05 isner

Deploy Preview for docsearch ready!

Name Link
Latest commit f9c35768d42fdf547d1d0e5d8f763bc222b5e81b
Latest deploy log https://app.netlify.com/sites/docsearch/deploys/6320a2a2aed0700009b375cf
Deploy Preview https://deploy-preview-1391--docsearch.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar May 19 '22 18:05 netlify[bot]

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 96f713ee47d889d63785243dac43f49ccd2a8534:

Sandbox Source
Vanilla Configuration

codesandbox-ci[bot] avatar May 19 '22 18:05 codesandbox-ci[bot]

The Netlify deployment was cancelled automatically due to lack of content changes. This PR does introduce changes to the UI behavior and markup, however, so a preview deployment would still be useful. Is there any way to manually deploy from this branch?

isner avatar May 25 '22 14:05 isner

Hey, thanks for the contribution 💙, I'll take a look at it ASAP!

a preview deployment would still be useful. Is there any way to manually deploy from this branch?

Indeed, you can update this line to include packages/docsearch-react too!

shortcuts avatar May 25 '22 14:05 shortcuts

a preview deployment would still be useful. Is there any way to manually deploy from this branch?

Indeed, you can update this line to include packages/docsearch-react too!

I made the change you requested, but I didn't realize that Netlify was only being used to deploy the DocSearch website. I don't think it's necessary to trigger a preview deployment of the website when the contents of the docsearch-react package are changed.

Instead, it would be useful to preview the changes that are introduced by this PR in CodeSandbox. When I follow the link provided by the codesandbox-ci bot I see the build output, which is great, but it's unclear how to access a working preview of that package build. This would be the easiest way for you to review the PR changes in action. Any suggestions?

isner avatar Sep 13 '22 15:09 isner

@isner @shortcuts this PR is from last year, is it still revelant ? If so, it probably needs a git rebase and solving the conflicts

jfgreffier avatar Jun 26 '23 18:06 jfgreffier