Unstyled lists with role="list" attr

[zarahzachz]

We use the class ds-c-list--bare to create unstyled lists (list elements without a list marker style). This can cause accessibility problems for Safari users.

I've tried to address this issue using documentation in our site, but I wonder if we should have a better internal solution?

I like the idea of tying styles to a11y solutions and was thinking a better way to create unstyled lists would be to attach those style rules to the role="list" attribute (which is the fix for this bug)?

It could look like this:

ul[role="list"],
ol[role="list"] {
  list-style: none;
  /* whatever else we do to unstyled lists */
}

or...

.ds-c-list[role="list"] {
  list-style: none;
  /* whatever else we do to unstyled lists */
}

The benefits for a solution like this:

1. It guarantees this attribute is added when an unstyled list class is used
2. Users currently need to remember to add the CSS class and HTML attribute to correctly style unstyled lists and this simplifies that

The drawback is this is probably a very widely used style and pretty hard to change now that it's in the wild.

[pwolfert]

I had no idea this problem existed 🤯. Thanks for sharing and coming up with solutions. Maybe another option could be to add guidance. I know it's not a great solution, but we wouldn't have to worry about our changes causing disruption for current users. I was looking at our own internal usage of the bare list, and in the case of the Autocomplete component we're already defining a role other than role="list". A way around that could be to build the selector so that it looks for a role attribute with any value rather than "list" specifically.

[pwolfert]

Sorry, I forgot that you said you already tried solving it with documentation.

[pwolfert]

We fixed one of these instances in #2254. Our healthcare header and footer also have instances of this problem, though.