feat: add aria role attributes (#161)

fixes #155
konstaui · Aug 10, 2023 · 59216a6 · 59216a6
1 parent eb6d108
commit 59216a6
Show file tree

Hide file tree

Showing 30 changed files with 51 additions and 20 deletions.
diff --git a/src/react/components/ActionsButton.jsx b/src/react/components/ActionsButton.jsx
@@ -85,7 +85,7 @@ const ActionsButton = forwardRef((props, ref) => {
   );
 
   return (
-    <Component ref={rippleElRef} className={c.base} {...attrs}>
+    <Component ref={rippleElRef} role="button" tabindex="0" className={c.base} {...attrs}>
       {children}
     </Component>
   );

diff --git a/src/react/components/BreadcrumbsCollapsed.jsx b/src/react/components/BreadcrumbsCollapsed.jsx
@@ -44,7 +44,7 @@ const BreadcrumbsCollapsed = forwardRef((props, ref) => {
   );
 
   return (
-    <Component ref={elRef} className={c.base} {...attrs}>
+    <Component ref={elRef} role="button" tabindex="0" className={c.base} {...attrs}>
       <span className={c.dot} />
       <span className={c.dot} />
       <span className={c.dot} />

diff --git a/src/react/components/BreadcrumbsItem.jsx b/src/react/components/BreadcrumbsItem.jsx
@@ -47,7 +47,7 @@ const BreadcrumbsItem = forwardRef((props, ref) => {
   );
 
   return (
-    <Component ref={elRef} className={c.base} {...attrs}>
+    <Component ref={elRef} className={c.base} role="menuitem" tabindex="0" {...attrs}>
       {children}
     </Component>
   );

diff --git a/src/react/components/Button.jsx b/src/react/components/Button.jsx
@@ -152,6 +152,8 @@ const Button = forwardRef((props, ref) => {
       ref={rippleElRef}
       className={classes}
       disabled={disabled}
+      role="button"
+      tabindex="0"
       {...attrs}
     >
       {children}

diff --git a/src/react/components/Chip.jsx b/src/react/components/Chip.jsx
@@ -56,7 +56,7 @@ const Chip = forwardRef((props, ref) => {
       {media && <div className={c.media}>{media}</div>}
       {children}
       {deleteButton && (
-        <div className={c.deleteButton} onClick={onDelete}>
+        <div className={c.deleteButton} role="button" tabindex="0" onClick={onDelete}>
           <DeleteIcon theme={theme} className="h-4 w-4" />
         </div>
       )}

diff --git a/src/react/components/DialogButton.jsx b/src/react/components/DialogButton.jsx
@@ -61,7 +61,7 @@ const DialogButton = forwardRef((props, ref) => {
 
   if (theme === 'ios')
     return (
-      <Component className={c.base} disabled={disabled} {...attrs}>
+      <Component className={c.base} disabled={disabled} role="button" tabindex="0" {...attrs}>
         {children}
       </Component>
     );

diff --git a/src/react/components/Fab.jsx b/src/react/components/Fab.jsx
@@ -56,6 +56,7 @@ const Fab = forwardRef((props, ref) => {
       className={text ? c.base.withText : c.base.iconOnly}
       href={href}
       ref={rippleElRef}
+      role="button" tabindex="0"
       {...attrs}
     >
       {text && textPosition === 'before' && (

diff --git a/src/react/components/Link.jsx b/src/react/components/Link.jsx
@@ -96,6 +96,8 @@ const Link = forwardRef((props, ref) => {
       ref={rippleElRef}
       className={classes}
       {...attrs}
+      role="link"
+      tabindex="0"
       onClick={onClick}
     >
       {children}

diff --git a/src/react/components/Notification.jsx b/src/react/components/Notification.jsx
@@ -65,7 +65,7 @@ const Notification = forwardRef((props, ref) => {
             <div className={c.titleRightText}>{titleRightText}</div>
           )}
           {button && (
-            <div className={c.button} onClick={onClose}>
+            <div className={c.button} role="button" tabindex="0" onClick={onClose}>
               <DeleteIcon theme={theme} className={c.deleteIcon} />
             </div>
           )}
@@ -95,7 +95,7 @@ const Notification = forwardRef((props, ref) => {
           </div>
         </div>
         {button && (
-          <div className={c.button} onClick={onClose}>
+          <div className={c.button} role="button" tabindex="0" onClick={onClose}>
             <DeleteIcon theme={theme} className={c.deleteIcon} />
           </div>
         )}

diff --git a/src/react/components/Stepper.jsx b/src/react/components/Stepper.jsx
@@ -153,6 +153,8 @@ const Stepper = forwardRef((props, ref) => {
       <span
         ref={buttonLeftElRef}
         className={buttonLeftClasses}
+        role="button"
+        tabindex="0"
         onClick={onMinus}
       >
         <span className={c.hBar} />
@@ -177,6 +179,8 @@ const Stepper = forwardRef((props, ref) => {
       <span
         ref={buttonRightElRef}
         className={buttonRightClasses}
+        role="button"
+        tabindex="0"
         onClick={onPlus}
       >
         <span className={c.hBar} />

diff --git a/src/svelte/components/ActionsButton.svelte b/src/svelte/components/ActionsButton.svelte
@@ -74,6 +74,8 @@
   this={Component}
   bind:this={rippleEl.current}
   class={c.base}
+  role="button"
+  tabindex="0"
   on:click={onClick}
   {...attrs}
 >

diff --git a/src/svelte/components/BreadcrumbsCollapsed.svelte b/src/svelte/components/BreadcrumbsCollapsed.svelte
@@ -26,7 +26,7 @@
   );
 </script>
 
-<div class={c.base} {...$$restProps} on:click={onClick}>
+<div class={c.base} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
   <span class={c.dot} />
   <span class={c.dot} />
   <span class={c.dot} />

diff --git a/src/svelte/components/BreadcrumbsItem.svelte b/src/svelte/components/BreadcrumbsItem.svelte
@@ -28,6 +28,6 @@
   );
 </script>
 
-<div class={c.base} {...$$restProps} on:click={onClick}>
+<div class={c.base} {...$$restProps} role="menuitem" tabindex="0" on:click={onClick}>
   <slot />
 </div>
diff --git a/src/svelte/components/Button.svelte b/src/svelte/components/Button.svelte
@@ -195,6 +195,8 @@
     class={classes}
     {disabled}
     {...attrs}
+    role="button"
+    tabindex="0"
     on:click={onClick}
   >
     <slot />

diff --git a/src/svelte/components/Chip.svelte b/src/svelte/components/Chip.svelte
@@ -42,7 +42,7 @@
   {/if}
   <slot />
   {#if deleteButton}
-    <div class={c.deleteButton} on:click={onDelete}>
+    <div class={c.deleteButton} role="button" tabindex="0" on:click={onDelete}>
       <DeleteIcon {theme} class="h-4 w-4" />
     </div>
   {/if}

diff --git a/src/svelte/components/DialogButton.svelte b/src/svelte/components/DialogButton.svelte
@@ -61,6 +61,8 @@
       class={c.base}
       {disabled}
       {...attrs}
+      role="button"
+      tabindex="0"
       on:click={onClick}
     >
       <slot />

diff --git a/src/svelte/components/Fab.svelte b/src/svelte/components/Fab.svelte
@@ -44,6 +44,8 @@
     class={text ? c.base.withText : c.base.iconOnly}
     {href}
     bind:this={rippleEl.current}
+    role="button"
+    tabindex="0"
     on:click={onClick}
     {...$$restProps}
   >

diff --git a/src/svelte/components/Link.svelte b/src/svelte/components/Link.svelte
@@ -87,6 +87,8 @@
   class={classes}
   {...$$restProps}
   {...linkProps}
+  role="link"
+  tabindex="0"
   on:click={onClick}
 >
   <slot />

diff --git a/src/svelte/components/Notification.svelte b/src/svelte/components/Notification.svelte
@@ -55,7 +55,7 @@
         </div>
       {/if}
       {#if button || $$slots.button}
-        <div class={c.button} on:click={onClose}>
+        <div class={c.button} role="button" tabindex="0" on:click={onClose}>
           <DeleteIcon {theme} class={c.deleteIcon} />
           <slot name="button" />
         </div>
@@ -103,7 +103,7 @@
         </div>
       </div>
       {#if button || $$slots.button}
-        <div class={c.button} on:click={onClose}>
+        <div class={c.button} role="button" tabindex="0" on:click={onClose}>
           <DeleteIcon {theme} class={c.deleteIcon} />
           <slot name="button" />
         </div>

diff --git a/src/svelte/components/Stepper.svelte b/src/svelte/components/Stepper.svelte
@@ -130,6 +130,8 @@
   <span
     bind:this={buttonLeftEl.current}
     class={buttonLeftClasses}
+    role="button"
+    tabindex="0"
     on:click={onMinus}
   >
     <span class={c.hBar} />
@@ -155,6 +157,8 @@
   <span
     bind:this={buttonRightEl.current}
     class={buttonRightClasses}
+    role="button"
+    tabindex="0"
     on:click={onPlus}
   >
     <span class={c.hBar} />

diff --git a/src/vue/components/ActionsButton.vue b/src/vue/components/ActionsButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="Component" ref="rippleElRef" :class="c.base">
+  <component :is="Component" ref="rippleElRef" role="button" tabindex="0" :class="c.base">
     <slot />
   </component>
 </template>

diff --git a/src/vue/components/BreadcrumbsCollapsed.vue b/src/vue/components/BreadcrumbsCollapsed.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="component" :class="c.base">
+  <component :is="component" :class="c.base" role="button" tabindex="0" >
     <span :class="c.dot" />
     <span :class="c.dot" />
     <span :class="c.dot" />

diff --git a/src/vue/components/BreadcrumbsItem.vue b/src/vue/components/BreadcrumbsItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="component" :class="c.base">
+  <component :is="component" :class="c.base" role="menuitem" tabindex="0">
     <slot />
   </component>
 </template>

diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
@@ -4,6 +4,8 @@
     ref="rippleElRef"
     :class="classes"
     :disabled="disabled"
+    role="button"
+    tabindex="0"
   >
     <slot />
   </component>

diff --git a/src/vue/components/Chip.vue b/src/vue/components/Chip.vue
@@ -2,7 +2,7 @@
   <component :is="component" :class="c.base[style]">
     <div v-if="slots.media" :class="c.media"><slot name="media" /></div>
     <slot />
-    <div v-if="deleteButton" :class="c.deleteButton" @click="onDelete">
+    <div v-if="deleteButton" :class="c.deleteButton" role="button" tabindex="0" @click="onDelete">
       <delete-icon :theme="theme" class="h-4 w-4" />
     </div>
   </component>

diff --git a/src/vue/components/DialogButton.vue b/src/vue/components/DialogButton.vue
@@ -5,6 +5,8 @@
     ref="rippleElRef"
     :class="c.base"
     :disabled="disabled"
+    role="button"
+    tabindex="0"
   >
     <slot />
   </component>

diff --git a/src/vue/components/Fab.vue b/src/vue/components/Fab.vue
@@ -3,6 +3,8 @@
     :is="component"
     ref="rippleElRef"
     :class="text || slots.text ? c.base.withText : c.base.iconOnly"
+    role="button"
+    tabindex="0"
     :href="href"
   >
     <span

diff --git a/src/vue/components/Link.vue b/src/vue/components/Link.vue
@@ -4,6 +4,8 @@
     ref="rippleElRef"
     :class="classes"
     v-bind="linkProps"
+    role="link"
+    tabindex="0"
   >
     <slot />
   </component>

diff --git a/src/vue/components/Notification.vue b/src/vue/components/Notification.vue
@@ -13,7 +13,7 @@
       >
         {{ titleRightText }}<slot name="titleRightText" />
       </div>
-      <div v-if="button || slots.button" :class="c.button" @click="onClose">
+      <div v-if="button || slots.button" :class="c.button" role="button" tabindex="0" @click="onClose">
         <delete-icon :theme="theme" :class="c.deleteIcon" />
         <slot name="button" />
       </div>
@@ -55,7 +55,7 @@
           <slot />
         </div>
       </div>
-      <div v-if="button || slots.button" :class="c.button" @click="onClose">
+      <div v-if="button || slots.button" :class="c.button" role="button" tabindex="0" @click="onClose">
         <delete-icon :theme="theme" :class="c.deleteIcon" />
         <slot name="button" />
       </div>

diff --git a/src/vue/components/Stepper.vue b/src/vue/components/Stepper.vue
@@ -1,6 +1,6 @@
 <template>
   <component :is="component" :class="classes">
-    <span ref="buttonLeftElRef" :class="buttonLeftClasses" @click="onMinus">
+    <span ref="buttonLeftElRef" :class="buttonLeftClasses" role="button" tabindex="0" @click="onMinus">
       <span :class="c.hBar" />
     </span>
     <input
@@ -18,7 +18,7 @@
     />
     <span v-if="!input && !buttonsOnly" :class="valueClasses">{{ value }}</span>
 
-    <span ref="buttonRightElRef" :class="buttonRightClasses" @click="onPlus">
+    <span ref="buttonRightElRef" :class="buttonRightClasses" role="button" tabindex="0" @click="onPlus">
       <span :class="c.hBar" />
       <span :class="c.vBar" />
     </span>