I'm using a basic dropdown in Ember and in the list, once we select item in the content list, I want to highlight the selected item. I'd like to know if I can use a simple [aria-current] & [aria-selected] in CSS to make it happen.
hbs file:
{{#each pagelist as |page|}}
<li class=" dropdown-class" {{action "getAllPages" page dd.actions}}>
<p {{page.name}}</p>
</li>
{{/each}}
I think the quickest way to get you highlighted "Something selected", would be to,
(using ember-source 3.25+) and: https://github.com/NullVoxPopuli/ember-functions-as-helper-polyfill/ (landing in ember-source 4.5~ish, polyfilled for 3.25+)
// app/components/my-component.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class MyComponent extends Component {
@tracked selectedIndex;
select = (index) => this.selectedIndex = index;
isSelected = (index) => this.selectedIndex === index;
}
{{!-- app/component/my-component.hbs --}}
{{!-- where does pagelist come from? - let's assume it's passed in --}}
<ul>
{{#each @pagelist as |page index|}}
<li
class="dropdown-class {{if (this.isSelected index) 'highlighted'}}"
{{on "click" (fn this.select index)}}
>
<p>{{page.name}}</p>
</li>
{{/each}}
</ul>
Note though, that it's an accessibility violation to make <li> clickable (and ember-template-lint would give you an error), so you'll probably want a button in the li instead:
<li class="dropdown-class {{if (this.isSelected index) 'highlighted'}}">
<button type="button" {{on "click" (fn this.select index)}}>
{{page.name}}
<button>
</li>