Skip to content

Commit 093c9ea

Browse files
harbournickharbournick
authored
Merge pull request #557 from Harbour-Enterprises/har-9795_aria-infra
HAR-9795 Accessibility: ARIA infrastructure
2 parents cdd652d + eea852c commit 093c9ea

43 files changed

Lines changed: 414 additions & 118 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/super-editor/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Super Editor - Dev mode</title>
77
</head>
88
<body>
9-
<div id="app"></div>
9+
<div id="app" role="application"></div>
1010
<script type="module" src="/src/main.js"></script>
1111
</body>
1212
</html>

‎packages/super-editor/src/components/SuperEditor.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ onBeforeUnmount(() => {
208208
@click="handleSuperEditorClick"
209209
@mousedown="handleMarginClick"
210210
>
211-
<div ref="editorElem" class="editor-element super-editor__element"></div>
211+
<div ref="editorElem" class="editor-element super-editor__element" role="presentation"></div>
212212
</div>
213213
214214
<div class="placeholder-editor" v-if="!editorReady">

‎packages/super-editor/src/components/toolbar/AlignmentButtons.vue‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,42 @@ const select = (alignment) => {
1313

1414
<template>
1515
<div class="alignment-buttons" :class="{ 'high-contrast': isHighContrastMode }">
16-
<div class="button-icon" @click="select('left')" v-html="toolbarIcons.alignLeft" data-item="btn-textAlign-option">
16+
<div
17+
class="button-icon"
18+
@click="select('left')"
19+
v-html="toolbarIcons.alignLeft"
20+
data-item="btn-textAlign-option"
21+
role="menuitem"
22+
aria-label="Align left"
23+
>
1724
</div>
18-
<div class="button-icon" @click="select('center')" v-html="toolbarIcons.alignCenter"
19-
data-item="btn-textAlign-option"></div>
20-
<div class="button-icon" @click="select('right')" v-html="toolbarIcons.alignRight" data-item="btn-textAlign-option">
25+
<div
26+
class="button-icon"
27+
@click="select('center')"
28+
v-html="toolbarIcons.alignCenter"
29+
30+
data-item="btn-textAlign-option"
31+
role="menuitem"
32+
aria-label="Align center"
33+
></div>
34+
<div
35+
class="button-icon"
36+
@click="select('right')"
37+
v-html="toolbarIcons.alignRight"
38+
data-item="btn-textAlign-option"
39+
role="menuitem"
40+
aria-label="Align right"
41+
>
2142
</div>
22-
<div class="button-icon" @click="select('justify')" v-html="toolbarIcons.alignJustify"
23-
data-item="btn-textAlign-option"></div>
43+
<div
44+
class="button-icon"
45+
@click="select('justify')"
46+
v-html="toolbarIcons.alignJustify"
47+
48+
data-item="btn-textAlign-option"
49+
role="menuitem"
50+
aria-label="Justify"
51+
></div>
2452
</div>
2553
</template>
2654

‎packages/super-editor/src/components/toolbar/ButtonGroup.vue‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const props = defineProps({
2121
type: String,
2222
default: 'left',
2323
},
24+
fromOverflow: {
25+
type: Boolean,
26+
default: false,
27+
}
2428
});
2529
2630
const currentItem = ref(null);
@@ -91,13 +95,24 @@ const dropdownOptions = (item) => {
9195
});
9296
};
9397
98+
const getDropdownAttributes = (option, item) => {
99+
return {
100+
role: 'menuitem',
101+
ariaLabel: `${item.attributes.value.ariaLabel} - ${option.label}`,
102+
};
103+
};
104+
94105
const handleClickOutside = (e) => {
95106
closeDropdowns();
96107
};
97108
</script>
98109
99110
<template>
100-
<div :style="getPositionStyle" class="button-group">
111+
<div
112+
:style="getPositionStyle"
113+
class="button-group"
114+
role="group"
115+
>
101116
<div v-for="item in toolbarItems" :key="item.id.value" :class="{
102117
narrow: item.isNarrow.value,
103118
wide: item.isWide.value,
@@ -106,11 +121,23 @@ const handleClickOutside = (e) => {
106121
<ToolbarSeparator v-if="isSeparator(item)" style="width: 20px" />
107122
108123
<!-- Toolbar button -->
109-
<n-dropdown v-if="isDropdown(item) && item.nestedOptions?.value?.length" :options="dropdownOptions(item)"
110-
:trigger="item.disabled.value ? null : 'click'" :show="item.expand.value" size="medium" placement="bottom-start"
111-
class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown" :class="{ 'high-contrast': isHighContrastMode }"
112-
@select="(key, option) => handleSelect(item, option)" @clickoutside="handleClickOutside"
113-
:style="item.dropdownStyles.value">
124+
<n-dropdown
125+
v-if="isDropdown(item) && item.nestedOptions?.value?.length"
126+
:options="dropdownOptions(item)"
127+
:trigger="item.disabled.value ? null : 'click'"
128+
:show="item.expand.value"
129+
size="medium"
130+
placement="bottom-start"
131+
class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown"
132+
:class="{ 'high-contrast': isHighContrastMode }"
133+
@select="(key, option) => handleSelect(item, option)"
134+
@clickoutside="handleClickOutside"
135+
:style="item.dropdownStyles.value"
136+
:menu-props="() => ({
137+
role: 'menu'
138+
})"
139+
:node-props="(option) => getDropdownAttributes(option, item)"
140+
>
114141
<n-tooltip trigger="hover" :disabled="!item.tooltip?.value">
115142
<template #trigger>
116143
<ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
@@ -125,8 +152,12 @@ const handleClickOutside = (e) => {
125152
126153
<n-tooltip trigger="hover" v-else-if="isButton(item)" class="sd-editor-toolbar-tooltip">
127154
<template #trigger>
128-
<ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
129-
@buttonClick="handleToolbarButtonClick(item)" />
155+
<ToolbarButton
156+
:toolbar-item="item"
157+
:is-overflow-item="fromOverflow"
158+
@textSubmit="handleToolbarButtonTextSubmit(item, $event)"
159+
@buttonClick="handleToolbarButtonClick(item)"
160+
/>
130161
</template>
131162
<div v-if="item.tooltip">
132163
{{ item.tooltip }}

‎packages/super-editor/src/components/toolbar/DocumentMode.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,14 @@ const handleClick = (item) => {
1919

2020
<template>
2121
<div class="document-mode" :class="{ 'high-contrast': isHighContrastMode }">
22-
<div class="option-item" v-for="option in options" @click="handleClick(option)"
23-
:class="{ disabled: option.disabled }" data-item="btn-documentMode-option">
22+
<div
23+
class="option-item"
24+
v-for="option in options"
25+
@click="handleClick(option)"
26+
:class="{ disabled: option.disabled }"
27+
data-item="btn-documentMode-option"
28+
role="menuitem"
29+
>
2430
<div class="document-mode-column icon-column">
2531
<div class="icon-column__icon" v-html="option.icon"></div>
2632
</div>

‎packages/super-editor/src/components/toolbar/IconGrid.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const handleSelect = (option) => {
3333
<div
3434
v-if="hasNoneIcon"
3535
class="none-option"
36+
role="menuitem"
37+
aria-label="Clear color selection"
3638
@click="handleSelect('none')"
3739
>
3840
<span

‎packages/super-editor/src/components/toolbar/IconGridRow.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,18 @@ onMounted(() => {
3535
});
3636
</script>
3737
<template>
38-
<div class="option-row" v-for="(row, rowIndex) in icons" :key="rowIndex">
38+
<div
39+
class="option-row"
40+
v-for="(row, rowIndex) in icons"
41+
:key="rowIndex"
42+
role="group"
43+
>
3944
<div
4045
class="option"
4146
v-for="(option, optionIndex) in row"
4247
:key="optionIndex"
48+
:aria-label="option.label"
49+
role="menuitem"
4350
@click.stop.prevent="handleClick(option)"
4451
>
4552
<div

‎packages/super-editor/src/components/toolbar/LinkInput.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,15 @@ onMounted(() => {
9696
<div v-if="showInput && !isAnchor">
9797
<div class="input-row">
9898
<div class="input-icon" v-html="toolbarIcons.linkInput"></div>
99-
<input type="text" placeholder="Type or paste a link"
100-
:class="{ error: urlError }" v-model="rawUrl"
101-
@keydown.enter.stop.prevent="handleSubmit" @keydown="urlError = false" />
99+
<input
100+
type="text"
101+
name="link"
102+
placeholder="Type or paste a link"
103+
:class="{ error: urlError }"
104+
v-model="rawUrl"
105+
@keydown.enter.stop.prevent="handleSubmit"
106+
@keydown="urlError = false"
107+
/>
102108
103109
<div class="open-link-icon" :class="{ disabled: !validUrl }" v-html="toolbarIcons.openLink" @click="openLink"
104110
data-item="btn-link-open">

‎packages/super-editor/src/components/toolbar/OverflowMenu.vue‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,22 @@ const handleCommand = ({ item, argument }) => {
3333
</script>
3434

3535
<template>
36-
<div class="overflow-menu">
36+
<div
37+
class="overflow-menu"
38+
>
3739
<div class="overflow-menu-trigger">
3840
<ToolbarButton
3941
:toolbar-item="overflowToolbarItem"
4042
@buttonClick="toggleOverflowMenu"
4143
/>
4244
</div>
43-
<div v-if="isDropdownOpened" class="overflow-menu_items">
44-
<ButtonGroup :toolbar-items="overflowItems" @command="handleCommand" class="superdoc-toolbar-overflow" />
45+
<div v-if="isDropdownOpened" class="overflow-menu_items" role="group">
46+
<ButtonGroup
47+
class="superdoc-toolbar-overflow"
48+
:toolbar-items="overflowItems"
49+
from-overflow
50+
@command="handleCommand"
51+
/>
4552
</div>
4653
</div>
4754
</template>

‎packages/super-editor/src/components/toolbar/TableActions.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ const handleClick = (item) => {
1919
:class="{ 'toolbar-table-actions__item--border': option.bottomBorder}"
2020
v-for="option in options"
2121
@click="handleClick(option)"
22-
:data-item="option.props?.['data-item'] || ''">
22+
:data-item="option.props?.['data-item'] || ''"
23+
:ariaLabel="option.props?.ariaLabel"
24+
role="menuitem"
25+
>
2326
<div class="toolbar-table-actions__icon">
2427
<div class="toolbar-table-actions__icon-wrapper" v-html="option.icon"></div>
2528
</div>

0 commit comments

Comments
 (0)