♿️ Improve accessibility of components

Author: Frontendland

.vscode/settings.json

@@ -1,7 +1,3 @@
 {
-    "svelte.plugin.svelte.compilerWarnings": {
-        "a11y-click-events-have-key-events": "ignore",
-        "a11y-no-static-element-interactions": "ignore",
-        "a11y-no-noninteractive-element-interactions": "ignore"
-    }
+    "svelte.plugin.svelte.compilerWarnings": {}
 }

scripts/buildTypes.js

@@ -20,14 +20,24 @@ const buildTypes = type => {
     }
 
     if (type === 'svelte') {
+        const getTypeName = component => {
+            const componentsWithSvelteSpecificTypes = [
+                'Badge'
+            ]
+    
+            return componentsWithSvelteSpecificTypes.includes(component)
+                ? `Svelte${component}Props`
+                : `${component}Props`
+        }
+
         return format(`
             ${components.map(component => {
-                return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
+                return `import type { ${getTypeName(component)} } from './components/${component}/${component.toLowerCase()}'`
             }).join('\n')}
     
             declare module 'webcoreui/${type}' {
                 ${components.map(component => {
-                    return `export function ${component}(_props: ${component}Props): any`
+                    return `export function ${component}(_props: ${getTypeName(component)}): any`
                 }).join('\n\t')}
             }
         `)

src/components/Accordion/Accordion.astro

@@ -13,10 +13,10 @@ const {
 <ul class={styles.accordion} data-id="w-accordion">
     {items.map((item: AccordionProps['items'][0]) => (
         <li>
-            <div class={styles.title} data-toggle="true">
+            <button class={styles.title} data-toggle="true">
                 {item.title}
                 <Fragment set:html={ArrowDown} />
-            </div>
+            </button>
             <div class={styles.wrapper}>
                 <div class={styles.content}>
                     <Fragment set:html={item.content} />

src/components/Accordion/Accordion.svelte

@@ -18,14 +18,14 @@
 <ul class={styles.accordion}>
     {#each items as item, index}
         <li>
-            <div
+            <button
                 class={styles.title}
                 data-open={state[index]}
                 on:click={() => toggle(index)}
             >
                 {item.title}
                 {@html ArrowDown}
-            </div>
+            </button>
             <div class={styles.wrapper}>
                 <div class={styles.content}>
                     {@html item.content}

src/components/Accordion/Accordion.tsx

@@ -17,7 +17,7 @@ const Accordion = ({ items }: AccordionProps) => {
         <ul className={styles.accordion}>
             {items.map((item, index) => (
                 <li key={index}>
-                    <div
+                    <button
                         className={styles.title}
                         data-open={state[index]}
                         onClick={() => toggle(index)}

src/components/Accordion/accordion.module.scss

@@ -23,6 +23,12 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            width: 100%;
+            background: transparent;
+            border: 0;
+            color: #FFF;
+            font-size: 16px;
+            padding: 0;
             cursor: pointer;
 
             svg {

src/components/Badge/Badge.astro

@@ -2,20 +2,18 @@
 import type { BadgeProps } from './badge'
 import styles from './badge.module.scss'
 
-interface Props extends BadgeProps {
-    interactive?: boolean
-}
+interface Props extends BadgeProps {}
 
 const {
     theme,
-    interactive,
+    hover,
     ...rest
 } = Astro.props
 
 const classes = [
     styles.badge,
     theme && styles[theme],
-    interactive && styles.hover
+    hover && styles.hover
 ]
 ---
 

src/components/Badge/Badge.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">
-    import type { BadgeProps } from './badge'
+    import type { SvelteBadgeProps } from './badge'
+
     import styles from './badge.module.scss'
+    import { classNames } from '../../utils/classNames'
     
-    export let theme: BadgeProps['theme'] = null
-    export let onClick: BadgeProps['onClick'] = null
+    export let theme: SvelteBadgeProps['theme'] = null
+    export let onClick: SvelteBadgeProps['onClick'] = null
+    export let hover: SvelteBadgeProps['hover'] = false
 
-    const classes = [
+    const classes = classNames([
         styles.badge,
         theme && styles[theme],
-        onClick && styles.hover
-    ].filter(Boolean).join(' ')
+        (onClick || hover) && styles.hover
+    ])
 </script>
 
-<span class={classes} on:click={onClick} {...$$restProps}>
-    <slot />
-</span>
+{#if onClick}
+    <button class={classes} on:click={onClick} {...$$restProps}>
+        <slot />
+    </button>
+{:else}
+    <span class={classes} {...$$restProps}>
+        <slot />
+    </span>
+{/if}
+

src/components/Badge/Badge.tsx

@@ -1,16 +1,32 @@
 import React from 'react'
 import type { ReactBadgeProps } from './badge'
+
 import styles from './badge.module.scss'
+import { classNames } from '../../utils/classNames'
 
-const Badge = ({ theme, onClick, children, ...rest }: ReactBadgeProps) => {
-    const classes = [
+const Badge = ({
+    theme,
+    onClick,
+    hover,
+    children,
+    ...rest
+}: ReactBadgeProps) => {
+    const classes = classNames([
         styles.badge,
         theme && styles[theme],
-        onClick && styles.hover
-    ].filter(Boolean).join(' ')
+        (onClick || hover) && styles.hover
+    ])
+
+    if (onClick) {
+        return (
+            <button className={classes} onClick={onClick} {...rest}>
+                {children}
+            </button>
+        )
+    }
 
     return (
-        <span className={classes} onClick={onClick} {...rest}>
+        <span className={classes} {...rest}>
             {children}
         </span>
     )

src/components/Badge/badge.module.scss

@@ -10,6 +10,7 @@
     font-size: 12px;
     background: #FFF;
     color: #252525;
+    border: 0;
 
     &.hover {
         cursor: pointer;

src/components/Badge/badge.ts

@@ -7,9 +7,14 @@ export type BadgeProps = {
         | 'warning'
         | 'alert'
         | null
-    onClick?: () => any
+    hover?: boolean
 }
 
+export type SvelteBadgeProps = {
+    onClick?: (() => any) | null
+} & BadgeProps
+
 export type ReactBadgeProps = {
+    onClick?: (() => any) | null
     children: React.ReactNode
 } & BadgeProps

svelte.config.js

@@ -5,12 +5,7 @@ export default {
 	onwarn: (warning, handler) => {
 		// Suppress false positive warnings in terminal
 		// Edit .vscode/settings.json to also suppress warnings in VSCode
-		const ignoreWarnings = [
-			'a11y-click-events-have-key-events',
-            'a11y-no-static-element-interactions',
-			'a11y-no-noninteractive-element-interactions',
-			'.accordion-title'
-		]
+		const ignoreWarnings = []
 
 		const warningText = [
 			warning.code,