flickity icon indicating copy to clipboard operation
flickity copied to clipboard

Accessibility bug - Screen reader crashes after clicking back or next

Open GabrieleSuzart opened this issue 4 years ago • 4 comments

I ran an accessibility test on the site https://flickity.metafizzy.co/ using VoiceOver on iPhone 8 and Macbook Air.

Mobile -> When you click the back button or the next button, screen reader is lost and does not read any more. Desktop -> As with the cell phone, it does not direct you to read the content of the new slide and continues the navigation leaving the carousel.

Expected behavior: When clicking back or next in the carrousel, the screen reader is directed to read the content of the new slide.

GabrieleSuzart avatar Mar 23 '20 14:03 GabrieleSuzart

Another problem identified: It is possible to click on a back or next button disabled and navigation also crashes.

GabrieleSuzart avatar Mar 23 '20 14:03 GabrieleSuzart

@clarknelson

can you help me to configure the project for me to make this correction? I didn't find any command similar to npm run start, how do I run the project on localhost?

GabrieleSuzart avatar Mar 25 '20 16:03 GabrieleSuzart

Hi @GabrieleSuzart, not sure exactly what you are asking. Here are the steps i've taken to modify repos like this:

  1. Fork the repo
  2. Clone the repo to your dev env, make your changes to the forked repo
  3. Set up your project's package.json to load from your forked repo instead of the live repo ("dev-master" not "1.2.3")
  4. Make your changes, push to your repo, run npm update on the project, test your changes

you can also load from path instead of a repo, might be more convenient. you will probably have to do some googling to get the exact package.json syntax.

in terms of getting this repo built, I think you will just want to run npm install and then gulp

but in terms of this change making it into the master repo, I'm not exactly sure what the current process for pull requests is with desanto working on other things.

good luck :)

clarknelson avatar Mar 25 '20 20:03 clarknelson

Thanks for reporting this issue.

For local development, I use files in sandbox/. These are static HTML, CSS, and JavaScript. So you can just drag & drop them directly in the browser.

Be sure to install for both npm and bower first

npm install
bower install

desandro avatar Mar 30 '20 18:03 desandro