e2net/iceshrimp-legacy
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Activity

little bit more accessible tabs

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