ember-power-select
ember-power-select copied to clipboard
cibernox
Ensure multiple select <ul> has only <li> children
ember-a11y-testing (or more specifically, axe) complains that a <ul> has to have <li> children only.
This PR slightly changes the DOM structure of the multi-select trigger to accomodate that.
I have tried it, and it should look/feel/behave the same!
I'll pull the PR and investigate if there's a less breaking way of achieving the same thing, but I agree with the idea. I want this to be part of v4
Awesome! Yeah, I have also looked a bit around. Another idea would be to simply replace the <ul> and <li> with <div> - also not sure if that would otherwise negatively impact the accessibility...!
@mydea is there any possibility of this being a breaking change? Especially if people were styling assuming the li was not there?
It's possible, yes! But I would say rather unlikely, e.g. if you relied on ul > .ember-power-select-placeholder it would break, I guess.
I guess the biggest potentially breaking change is that the container (.ember-power-select-multiple-options) has display: flex, which could affect styling. Not sure what guarantees there are about this internal markup!
(Breaking in the sense of visually breaking in some way)
It was a breaking change for our styling, because the precompiled css is not updated: https://github.com/cibernox/ember-power-select/issues/1586
Also broke a unit test which checked for the presence of a single <li element for the selected option, but there are now 2.
Not sure this actually improves a11y, it just satisfies a linting rule. The <input field should probably exist outside of the <ul list, no?
