List Indent HTML not nesting properly

Indent behavior could be improved.

Indenting a list item should wrap the current list item in a new <ul><li> or <ol><li> and nest it in the closest <li> tag (or do nothing if you are at the highest level or there is only one item in the list)

The current indent button simply adds a class to the <li>, which looks great but outputs bad HTML. The generated content would not be exportable to other platforms.

v1.0.3

This seems a bit more complicated than a simple fix. If I have time I’ll try to get a PR in, but wanted to get the topic open for discussion

[mansours]

I’m fairly new to Quill. But I saw there are a couple tickets that point here, some with discussion whether this is a personal preference or a technical requirement. My statements below support technical requirement and present supporting W3 materials.

In Ontario, a province in Canada, there is legislation for all public institutions and private companies with 50+ employees to have websites and web products be WCAG 2.0 level A compliant today, and by 2021 level AA compliant. There are many other jurisdictions around the world with similar laws and deadlines Eg. US DoJ section 508 law.

Jurisdiction laws aside, we should want to remove barriers to participation online for screenreader and keyboard navigation users, and nested lists are interpreted and navigated differently. eg. skip list or sublist/next.

As @thomasgodart pointed out, in v1.3.5 of Quill, ql-indent-* classes do not provide the content structure needed for accessibility users.

That said, here are technical references by W3 about nested lists:

• WCAG Guidance Tutorial on Content Structure - Nested Lists
• H48: Using ol, ul and dl for lists or groups of links
• H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

[stephanvierkant]

No, no, no. This is not working fine.

Adding a class to indent bullet points is semantically incorrect. We don’t use <p style="display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold"></p> or <p class"heading1"></p> instead of <h1></h1> either, do we?

We don’t do this because it is incorrect. h1 is not a shortcut for a bigger font size, it tells us something about the structure of the content. You can add a ToC client side, search engines use it, it improves accessibility, etc. There are many more good reasons why one should aim for semantically correct websites.

My application sends HTML to a third party and I’m not even allowed to send additional CSS with it. So right now I can’t use this, because the other party won’t understand the structure of the lists.