Skip to content

Commit 205e502

Browse files
mlmoravekmlmoravek
authored
feat(button): support w3c WAI-ARIA pattern (#1185)
1 parent bab6b37 commit 205e502

File tree

13 files changed

+55
-57
lines changed

13 files changed

+55
-57
lines changed

‎packages/docs/components/Button.md‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -37,24 +37,29 @@ The component supports the W3C ARIA APG [Button Pattern](https://www.w3.org/WAI/
3737

3838
### Props
3939

40-
| Prop name | Description | Type | Values | Default |
41-
| --------- | -------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
42-
| ariaRole | Accessibility Role attribute to be passed to the button. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;ariaRole: "button"<br>}</code> |
43-
| disabled | Button will be disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
44-
| expanded | Button will be expanded (full-width) | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
45-
| iconLeft | Icon name to show on the left | string | - | |
46-
| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
47-
| iconRight | Icon name to show on the right | string | - | |
48-
| inverted | Enable inverted style | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
49-
| label | Button label, unnecessary when default slot is used | string | - | |
50-
| loading | Enable loading style | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
51-
| outlined | Enable outlined style | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
52-
| override | Override existing theme classes completely | boolean | - | |
53-
| rounded | Enable rounded style | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;rounded: false<br>}</code> |
54-
| size | Size of the control | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
55-
| tag | Button tag name | DynamicComponent | `button`, `a`, `input`, `router-link`, `nuxt-link (or other nuxt alias)` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;tag: "button"<br>}</code> |
56-
| type | Button type, like native | "button" \| "reset" \| "submit" | `button`, `submit`, `reset` | <code style='white-space: nowrap; padding: 0;'>"button"</code> |
57-
| variant | Color variant of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;variant: undefined<br>}</code> |
40+
| Prop name | Description | Type | Values | Default |
41+
| --------- | --------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
42+
| disabled | Button will be disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
43+
| expanded | Button will be expanded (full-width) | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
44+
| iconLeft | Icon name to show on the left | string | - | |
45+
| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
46+
| iconRight | Icon name to show on the right | string | - | |
47+
| inverted | Enable inverted style | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
48+
| label | Button label, unnecessary when default slot is used | string | - | |
49+
| loading | Enable loading style | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
50+
| outlined | Enable outlined style | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
51+
| override | Override existing theme classes completely | boolean | - | |
52+
| rounded | Enable rounded style | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;rounded: false<br>}</code> |
53+
| size | Size of the control | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
54+
| tag | Button tag name | DynamicComponent | `button`, `a`, `input`, `router-link`, `nuxt-link (or other nuxt alias)` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;tag: "button"<br>}</code> |
55+
| type | Button type, like native | "button" \| "reset" \| "submit" | `button`, `submit`, `reset` | <code style='white-space: nowrap; padding: 0;'>"button"</code> |
56+
| variant | Color variant of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;variant: undefined<br>}</code> |
57+
58+
### Events
59+
60+
| Event name | Properties | Description |
61+
| ---------- | -------------------------------- | ------------------ |
62+
| click | **event** `Event` - native event | button click event |
5863

5964
### Slots
6065

‎packages/docs/components/Dropdown.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ The component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/
4747
| ariaLabel | Accessibility aria-label to be passed to the trigger element - usefull if selectable | string | - | <code style='white-space: nowrap; padding: 0;'></code> |
4848
| checkScroll | Makes the component check if menu reached scroll start or end and emit scroll events. | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;checkScroll: false<br>}</code> |
4949
| closeOnOutside | Close Dropdown when clicked outside | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;closeOnOutside: true<br>}</code> |
50-
| closeOnScroll | Close Dropdown when page get scrolled | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;closeOnScroll: true<br>}</code> |
50+
| closeOnScroll | Close Dropdown when page get scrolled | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;closeOnScroll: false<br>}</code> |
5151
| delay | Dropdown delay before it appears (number in ms) | number | - | |
5252
| desktopModal | Dropdown content (items) are shown into a modal on desktop | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;desktopModal: false<br>}</code> |
5353
| disabled | Dropdown is disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |

‎packages/oruga/src/components/button/Button.vue‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,27 @@ const props = withDefaults(defineProps<ButtonProps>(), {
2525
variant: () => getDefault("button.variant"),
2626
size: () => getDefault("button.size"),
2727
label: undefined,
28-
iconPack: () => getDefault("button.iconPack"),
29-
iconLeft: undefined,
30-
iconRight: undefined,
3128
rounded: () => getDefault("button.rounded", false),
3229
expanded: false,
3330
disabled: false,
3431
outlined: false,
3532
loading: false,
3633
inverted: false,
3734
type: "button",
38-
ariaRole: () => getDefault("button.ariaRole", "button"),
35+
iconPack: () => getDefault("button.iconPack"),
36+
iconLeft: undefined,
37+
iconRight: undefined,
3938
iconBoth: false,
4039
});
4140
41+
defineEmits<{
42+
/**
43+
* button click event
44+
* @param event {Event} native event
45+
*/
46+
click: [event: Event];
47+
}>();
48+
4249
const computedTag = computed(() =>
4350
typeof props.disabled !== "undefined" && props.disabled !== false
4451
? "button"
@@ -49,8 +56,6 @@ const computedNativeType = computed(() =>
4956
props.tag === "button" || props.tag === "input" ? props.type : null,
5057
);
5158
52-
const computedDisabled = computed(() => (props.disabled ? true : null));
53-
5459
// --- Computed Component Classes ---
5560
5661
const rootClasses = defineClasses(
@@ -111,11 +116,15 @@ const wrapperClasses = defineClasses(["wrapperClass", "o-btn__wrapper"]);
111116
<template>
112117
<component
113118
:is="computedTag"
114-
:disabled="computedDisabled"
119+
data-oruga="button"
115120
:type="computedNativeType"
121+
role="button"
122+
tabindex="0"
116123
:class="rootClasses"
117-
:role="ariaRole"
118-
data-oruga="button">
124+
:disabled="disabled ? true : null"
125+
@click="$emit('click', $event)"
126+
@keydown.enter="$emit('click', $event)"
127+
@keydown.space="$emit('click', $event)">
119128
<span :class="wrapperClasses">
120129
<o-icon
121130
v-if="iconLeft"

‎packages/oruga/src/components/button/examples/readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
The **Button** component uses [HTML's native button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) by default.
22
The `label` prop is used to populate the text of the button — or alternatively you can use the default slot.
33
The button can be have different colors, sizes, and states.
4-
The component supports the W3C ARIA APG [Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
4+
The component supports the W3C ARIA APG [Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).

‎packages/oruga/src/components/button/props.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@ export type ButtonProps = {
4646
* @values button, submit, reset
4747
*/
4848
type?: "button" | "submit" | "reset";
49-
/** Accessibility Role attribute to be passed to the button. */
50-
ariaRole?: string;
5149
/**
5250
* This is used internally
5351
* @ignore

‎packages/oruga/src/components/button/tests/Button.spec.cy.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)