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

Permitted type of content & structure/validation #13

Closed
mh-nichts opened this Issue Jul 13, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@mh-nichts
Copy link

mh-nichts commented Jul 13, 2018

Hello Nicolas,

First of all, thanks for those plugins that help us !

This issue is more of a question / asking for confirmation.

I use a tooltip to give more information about the requirements for a password input. As for the text content of the tooltip, I would like to list those requirements. Correct me if I am wrong, but as the content is displayed in a <span>, I can't put a <ul><li> structure inside (it wouldn't be valid HTML).

I guess that this plugin is made with <span> so it can be used in any type of container (not only blocks, also inline ones), but have you ever had this kind of utilisation that requires to put some other type of content inside ?
If so, can you explain me the way to do it without breaking validation ?
If not... I don't really know what to do, I guess I will have to leave aside the idea of using a list structure, and just use a plain old sentence, even though it won't be as readable as a formatted list.

Anyway, thanks in advance !

PS : I will disclose the project on which we use some of your plugins, once it is public (in a few months).

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Jul 13, 2018

Hello Nicolas,

Hello!

First of all, thanks for those plugins that help us !

First of all: thank you :)

This issue is more of a question / asking for confirmation.

Let's see :)

I use a tooltip to give more information about the requirements for a password input. As for the text content of the tooltip, I would like to list those requirements. Correct me if I am wrong, but as the content is displayed in a , I can't put a

  • structure inside (it wouldn't be valid HTML).

I guess that this plugin is made with so it can be used in any type of container (not only blocks, also inline ones), but have you ever had this kind of utilisation that requires to put some other type of content inside ?

From a pure source point of view, I've made a test, the validator doesn't care, see:

<p><button class="js-simple-tooltip button" data-simpletooltip-prefix-class="minimalist" data-simpletooltip-content-id="tooltip-case_1">Show me another tooltip</button></p>
 
    <div id="tooltip-case_1" class="hidden">Woot,<ul>
    	<li>dsdsdq</li>
    	<li>dsqds</li>
    </ul> you can take the content of a hidden block.</div>

And it worked.
tooltip

In fact, it is more a DOM validation question, as there will be a ul in a span (you're right, the validation won't like).

If so, can you explain me the way to do it without breaking validation ?
If not... I don't really know what to do, I guess I will have to leave aside the idea of using a list structure, and just use a plain old sentence, even though it won't be as readable as a formatted list.

Several solutions:

  • You may recreate a list using ARIA attributes. Example:
<span role="list">
  <span role="listitem">dog</span>
  <span role="listitem">cat</span>
  <span role="listitem">sparrow</span>
  <span role="listitem">wolf!</span>
</span >

it will be vocalized correctly.

  • I've made a very quick and dirty test, adding some paramaters to the script data-simpletooltip-wrapper-tag="div" data-simpletooltip-tag="div" which changes the container and tooltip tag (you have to adapt the CSS, adding a display: inline or inline-block), otherwise, the display will be broken.

It is not released, not official not documented, please test on the demo or in your project and give me feedback before https://a11y.nicolas-hoffmann.net/simple-tooltip/ (Second simple example with these attributes)

Anyway, thanks in advance !

You're welcome.

PS : I will disclose the project on which we use some of your plugins, once it is public (in a few months).

Cool, thanks a lot 👍

@mh-nichts

This comment has been minimized.

Copy link

mh-nichts commented Jul 13, 2018

Thank you for the quick response !

Indeed, I was referring to the DOM validation.

I didn't think about the ARIA roles for the list : that's a good idea !
It looks like the easiest way to do what I want, without going in too much testing trouble, so I will try that first.
I don't think there are specific interactions to implement for this roles, but I will check.

Thanks again, and I'll let you know.

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Jul 13, 2018

Yes, sometimes ARIA is quite simple solution :)

Cheers,
Nicolas

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Jul 17, 2018

Hello,

I've just committed the update in 973c3d5 (can be useful), so I close this issue.

Keep me informed if the ARIA trick goes well ;)

Cheers,
Nicolas

@nico3333fr nico3333fr closed this Jul 17, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment