natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

little bit more accessible tabs

This commit is contained in:
Freeplay 2023-05-19 13:20:48 -04:00
parent d013b351e2
commit 98a831961e
1 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/components/MkTab.vue
View File

@ -20,21 +20,17 @@ export default defineComponent({
"pxhvhrfw", "pxhvhrfw",
{ chips: this.style === "chips" }, { chips: this.style === "chips" },
], ],
role: "tablist",
}, },
options.map((option) => options.map((option) =>
withDirectives( withDirectives(
h( h(
"button", "button",
{ {
class: [ class: "_button",
"_button", role: "tab",
{
active:
this.modelValue === option.props?.value,
},
],
key: option.key, key: option.key,
disabled: this.modelValue === option.props?.value, 'aria-selected': this.modelValue === option.props?.value ? "true" : "false",
onClick: () => { onClick: () => {
this.$emit( this.$emit(
"update:modelValue", "update:modelValue",
@ -70,12 +66,12 @@ export default defineComponent({
cursor: default; cursor: default;
} }
&.active { &[aria-selected="true"] {
color: var(--accent); color: var(--accent);
background: var(--accentedBg) !important; background: var(--accentedBg) !important;
} }
&:not(.active):hover { &:not([aria-selected="true"]):hover {
color: var(--fgHighlighted); color: var(--fgHighlighted);
background: var(--panelHighlight); background: var(--panelHighlight);
} }