Skip to content

Commit 482a0fe

Browse files
jd-solankijd-solanki
committed
feat(alert): added accessibility support
1 parent a3bd36c commit 482a0fe

File tree

6 files changed

+72
-18
lines changed

6 files changed

+72
-18
lines changed

‎docs/components/Playground.vue

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<script lang="ts" setup>
2-
2+
const colors = [
3+
'primary',
4+
'success',
5+
'info',
6+
'warning',
7+
'danger',
8+
]
39
</script>
410

511
<template>
@@ -8,8 +14,9 @@
814
title="Playground"
915
class="m-8"
1016
>
11-
<div class="a-card-body">
12-
Play here...
17+
<div class="a-card-body flex items-center gap-4">
18+
<ABtn class="focus:ring-4 transition-shadow transition-ease-both ring-offset-0 ring-[hsla(var(--a-layer-c),.35)]" v-for="color in colors" :key="color" :color="color">{{ color }}</ABtn>
19+
<AIcon icon="i-bx-home"></AIcon>
1320
</div>
1421
</ACard>
1522
</div>

‎packages/anu-vue/src/components/alert/AAlert.vue

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script lang="ts" setup>
2-
import type { ExtractPropTypes } from 'vue'
3-
import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
4-
import { configurable as configurableProp } from '@/composables/useProps'
2+
import { AIcon } from '@/components';
3+
import { useLayer, useProps as useLayerProps } from '@/composables/useLayer';
4+
import { configurable as configurableProp } from '@/composables/useProps';
5+
import type { ExtractPropTypes } from 'vue';
56
67
const props = defineProps({
78
@@ -80,10 +81,23 @@ const handleAppendIconClick = () => {
8081
// Emit append icon click event
8182
emit('click:appendIcon')
8283
}
84+
85+
const appendIconBindings = computed(() => {
86+
if (props.dismissible)
87+
return {
88+
icon: appendIcon,
89+
ariaLabel: 'close'
90+
}
91+
92+
return {
93+
class: appendIcon
94+
}
95+
})
8396
</script>
8497

8598
<template>
8699
<div
100+
role="alert"
87101
class="a-alert items-start w-full"
88102
:class="[
89103
...classes,
@@ -98,17 +112,16 @@ const handleAppendIconClick = () => {
98112
<div class="flex-grow">
99113
<slot />
100114
</div>
101-
<div v-if="appendIcon">
102-
<div>
103-
<span
115+
<div>
116+
<slot name="append">
117+
<Component
118+
v-if="appendIcon"
119+
:is="props.dismissible ? AIcon : 'i'"
104120
class="align-text-top"
105-
:class="[
106-
appendIcon,
107-
{ 'cursor-pointer': props.dismissible },
108-
]"
121+
v-bind="appendIconBindings"
109122
@click="handleAppendIconClick"
110123
/>
111-
</div>
124+
</slot>
112125
</div>
113126
</div>
114127
</template>

‎packages/anu-vue/src/components/icon/AIcon.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts" setup>
2+
import { useColor } from '@/composables';
3+
import { color as colorProp } from '@/composables/useProps';
4+
import { PropType } from 'vue';
5+
6+
const props = defineProps({
7+
/**
8+
* Icon name
9+
*/
10+
icon: {
11+
type: String as PropType<`i-${string}`>,
12+
required: true,
13+
},
14+
15+
/**
16+
* Icon color
17+
*/
18+
color: colorProp,
19+
})
20+
21+
defineOptions({
22+
name: 'AIcon',
23+
})
24+
25+
const { styles } = useColor(toRef(props, 'color'), 'icon-color')
26+
</script>
27+
28+
<template>
29+
<button type="button" :style="styles" class="a-icon-btn relative rounded-full aspect-square leading-0 m--1 focus:after:opacity-35 focus:after:scale-125 focus:outline-none after:content-empty after:absolute after:inset-0 after:opacity-0 after:transform after:transition-all isolate after:z--1 after:rounded-inherit after:border-3 after:border-solid after:border-color-current">
30+
<i aria-hidden="true" class="m-1" :class="props.icon" v-bind="$attrs"></i>
31+
</button>
32+
</template>

‎packages/anu-vue/src/components/icon/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as AIcon } from './AIcon.vue';

‎packages/anu-vue/src/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export { ADataTable } from './data-table'
1111
export { ADialog } from './dialog'
1212
export { ADrawer } from './drawer'
1313
export { AFloating } from './floating'
14+
export { AIcon } from './icon'
1415
export { AInput } from './input'
1516
export { AList } from './list'
1617
export { AListItem } from './list-item'

‎packages/anu-vue/src/composables/useColor.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import type { MaybeRef } from '@vueuse/core'
2-
import type { ComputedRef, StyleValue } from 'vue'
31
import { useAnu } from '@/composables/useAnu'
42
import type { ColorProp } from '@/composables/useProps'
3+
import type { MaybeRef } from '@vueuse/core'
4+
import type { ComputedRef, StyleValue } from 'vue'
55

66
export const isThemeColor = (color: ColorProp | null): ComputedRef<boolean> => computed(() => {
77
let activeThemeColors: string[] = []
@@ -21,8 +21,8 @@ export const useColor = (color: MaybeRef<ColorProp>, cssVarName: MaybeRef<string
2121
const _isThemeColor = isThemeColor(_color)
2222

2323
const _styles = {
24-
[cssVar.value]: _isThemeColor.value ? `hsl(var(--a-${_color}))` : _color,
25-
[property]: `var(${cssVar.value})`,
24+
[cssVar.value]: _isThemeColor.value ? `var(--a-${_color})` : _color,
25+
[property]: `hsla(var(${cssVar.value}), var(${cssVar.value}-opacity, 1))`,
2626
} as StyleValue
2727

2828
return _styles

0 commit comments

Comments
 (0)