-
-
Notifications
You must be signed in to change notification settings - Fork 649
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.
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
Use the dialog element or the aria-modal attribute for the dialog modal of the tour tips #2959
Comments
Always good to just use semantic HTML rather than a meaningless |
@rpkoller I don't disagree and we love semantic HTML, would you be open to submitting a PR to kick things off? |
@rpkoller that site is really just the placeholder for cypress integration testing. You want to first run a build at the root |
thanks @chuckcarpenter, except the
Initially i tried running
my two questions would be based how i understand things at this point. within landing directory it looks like there are all the assets building the same page you find at https://blog.shepherdpro.com/demo/ locally? and if it would be working to access that blog demo page (if that is the right assumption on my end) would shepherd that is used on the demo page be using a compiled version of p.s. i am also happy to update the docs for onboarding after i figured things out to make it potentially more clear to others as well. as you'Ve already mentioned that things are not straightforward for new folks. |
@rpkoller apologies, but I'm not familiar with |
no worries. yep ddev is providing a local domain. it is basically a docker based local development environment. i dont have node installed on my computer i only use it within ddevs web container for example. (and all those steps setting up the environment for shepherd contributions could then be set up and automated in a ddev addon) i got things working. or at least i realized where my main problem was. for some reason i havent figured out running the instructions from outside the container resulted in differing results than running them inside the container. i've only executed the command from outside the container at first. now from within the container things look better and more clear now and i run into a meaningful error. after running
but when i run
looks like the import statement is pointing to a none existent directory?
but i've tried and changed the directory to
but that lead to the same error which is kind of unexpected. p.s. i am using the nodejs version 18.19.0 based on the |
@mgifford often easier said than done though. Just trying to change the element to DIALOG results in a rabbit hole of positioning issues. So, I don't disagree that it should be more semantic, it's not always just a tag change. If you've a lot of experience with dialog, happy to take any suggestions. |
From the perspective of screenreader users the dialog modal tour tips in shephard have one problem. At the moment they are wrapped in a regular div element. The elements in the background of the highlighted component and the tour tip dialog modal when a tour is started are not clickable. Problem for screenreader users, the elements in the background are still accessible and are not excluded from the accessibility object model. for the screenreader user it is impossible to distinguish between what belongs to a dialog modal and what are elements in the background of the tour tip:
sheperd.mp4
A way to tackle that would be making the switch from the
div
element to thedialog
element for the dialog modals of the tour tips. the support is solid meanwhile and it is supported in all major browsers: https://caniuse.com/?search=dialog . there is also a highly recommended presentation outlining the ins and outs of the dialog element and the popover attribute.https://talks.hiddedevries.nl/VZNuWJ/dialog-dilemmas-and-modal-mischief-on-building-popovers#skMZ7WIThe text was updated successfully, but these errors were encountered: