add listbox demo

This commit is contained in:
Liam DeBeasi
2023-10-10 16:40:50 -04:00
parent eee2115fd2
commit aecfd034e9

View File

@@ -414,9 +414,11 @@ export class PickerColumnInternal implements ComponentInterface {
}
render() {
const { items, color, isActive, numericInput } = this;
const { items, color, isActive, numericInput, value } = this;
const mode = getIonMode(this);
const activeItemIndex = items.findIndex(item => item.value === value);
/**
* exportparts is needed so ion-datetime can expose the parts
* from two layers of shadow nesting. If this causes problems,
@@ -425,6 +427,7 @@ export class PickerColumnInternal implements ComponentInterface {
*/
return (
<Host
role="listbox"
exportparts={`${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`}
tabindex={0}
class={createColorClasses(color, {
@@ -455,6 +458,9 @@ export class PickerColumnInternal implements ComponentInterface {
}
return (
<button
role="option"
aria-selected={activeItemIndex === index ? 'true' : null}
aria-hidden={activeItemIndex === index || Math.abs(activeItemIndex - index) <= 2 ? null : 'true'}
tabindex="-1"
class={{
'picker-item': true,