m-toogle-button: changer les styles pour l'a11y

packages/modul-components/src/components/toggle-buttons/toggle-buttons.html

@@ -1,13 +1,22 @@
-<div class="m-toggle-buttons"
-     :class="skinButtons"
-     ref="toggle">
-    <m-button v-for="button in buttons"
-              class="m-toggle-buttons__button"
-              @click="toggle(button)"
-              :aria-pressed="button.pressed ? 'true' : 'false'"
-              :disabled="disabled"
-              :key="button.id"
-              :skin="getSkin(button)">
-        <slot :button="button">{{ button.title }}</slot>
-    </m-button>
+<div role="group"
+     class="m-toggle-buttons"
+     :aria-label="ariaLabel || null">
+    <ul class="m-toggle-buttons__list"
+        :class="skinButtons"
+        ref="toggle">
+        <li v-for="(button, index) in buttons"
+            :key="index"
+            :class="{'m--checked': button.pressed}">
+            <div class="m-toggle-buttons__button"
+                 :class="{'m--disabled': disabled}"
+                 :tabindex="disabled ? '-1' : '0'"
+                 role="checkbox"
+                 :aria-checked="button.pressed ? 'true' : 'false'"
+                 :aria-disabled="disabled"
+                 @click="toggle(button)"
+                 @keydown.space="toggle(button)">
+                <slot :button="button">{{ button.title }}</slot>
+            </div>
+        </li>
+    </ul>
 </div>

packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss

@@ -2,30 +2,109 @@
 @import '../button/button.scss';
 
 .m-toggle-buttons {
-    display: inline-block;
+    display: inline-flex;
 
-    &.m--is-default {
-        .m-button {
-            border-radius: 0;
+    &__list {
+        display: inline-flex;
+        list-style-type: none;
 
-            &:not(:nth-last-child(1)) {
-                border-right: none;
+        &,
+        li {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    &__button {
+        position: relative;
+        transition-property: background-color, border-color, color, outline;
+        transition-duration: $m-transition-duration;
+        transition-timing-function: ease;
+        display: flex;
+        align-items: center;
+        border: 1px solid $m-color-interactive;
+        padding: 10px $m-space;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: $m-font-weight-semi-bold;
+        text-align: center;
+        text-decoration: none;
+        appearance: none;
+        color: $m-color-interactive;
+        outline-color: $m-color-interactive-darker;
+        outline-offset: 2px;
+        outline-width: 1px;
+        background-color: $m-color-white;
+        user-select: none;
+        overflow: hidden;
+
+        &:not(.m--disabled) {
+            cursor: pointer;
+
+            &:not([aria-checked="true"]):hover {
+                background-color: $m-color-information;
             }
 
-            &:nth-child(1) {
-                border-radius: $m-border-radius 0 0 $m-border-radius;
+            &[aria-checked="true"]:hover {
+                background-color: $m-color-interactive-darker;
             }
 
-            &:nth-last-child(1) {
-                border-radius: 0 $m-border-radius $m-border-radius 0;
+        }
+
+        &.m--disabled {
+            cursor: default;
+            color: $m-color-disabled;
+            background: $m-color-white;
+            border-color: $m-color-disabled;
+
+            &[aria-checked="true"] {
+                color: $m-color-white;
+                background: $m-color-disabled;
             }
         }
-    }
 
-    &.m--is-rounded {
-        .m-button {
-            border-radius: 25px; // magic number
-            margin: 0 $m-space-2xs $m-space-xs 0;
+        &[aria-checked="true"] {
+            color: $m-color-white;
+            background: $m-color-interactive;
         }
     }
+
+
+}
+
+.m-toggle-buttons__list.m--is-default {
+    .m-toggle-buttons__button {
+        border-radius: 0;
+    }
+
+    >.m--checked+.m--checked .m-toggle-buttons__button {
+        border-left-color: $m-color-white;
+    }
+
+    > :not(:nth-last-child(1)) .m-toggle-buttons__button {
+        border-right: none;
+    }
+
+    > :nth-child(1) .m-toggle-buttons__button {
+        border-radius: $m-border-radius 0 0 $m-border-radius;
+    }
+
+    > :nth-last-child(1) .m-toggle-buttons__button {
+        border-radius: 0 $m-border-radius $m-border-radius 0;
+    }
+
+}
+
+
+.m-toggle-buttons__list.m--is-rounded {
+    flex-wrap: wrap;
+    gap: $m-space-xs 0;
+
+    > :not(:last-child) {
+        margin-right: $m-space-xs;
+    }
+
+    .m-toggle-buttons__button {
+        border-radius: 25px; // magic number
+    }
 }

packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts

@@ -1,7 +1,6 @@
 import Vue, { PluginObject } from 'vue';
 import Component from 'vue-class-component';
 import { Emit, Model, Prop } from 'vue-property-decorator';
-import { MButton, MButtonSkin } from '../button/button';
 import { TOGGLE_BUTTONS_NAME } from '../component-names';
 import WithRender from './toggle-buttons.html?style=./toggle-buttons.scss';
 
@@ -17,16 +16,15 @@ export enum MToggleButtonSkin {
 }
 
 @WithRender
-@Component({
-    components: {
-        MButton
-    }
-})
+@Component
 export class MToggleButtons extends Vue {
     @Model('change')
     @Prop({ default: () => [] })
     public readonly buttons: MToggleButton[];
 
+    @Prop({ required: true })
+    public readonly ariaLabel?: string;
+
     @Prop({ default: true })
     public readonly multiple: boolean;
 
@@ -41,28 +39,27 @@ export class MToggleButtons extends Vue {
     })
     public readonly skin: MToggleButtonSkin;
 
+    public get skinButtons(): { [key: string]: boolean } {
+        return {
+            'm--is-default': this.skin === MToggleButtonSkin.SQUARED,
+            'm--is-rounded': this.skin === MToggleButtonSkin.ROUNDED
+        };
+    }
+
+    @Emit('click')
+    public emitClick(_button: MToggleButton): void { }
+
     public toggle(button: MToggleButton): void {
+        if (this.disabled) { return; }
+
         this.$emit('change', this.buttons.map(b => b.id !== button.id ?
             this.multiple ? b : { ...b, pressed: false } :
             { ...b, pressed: !b.pressed }
         ));
 
-        this.onClick({ ...button, pressed: !button.pressed });
-    }
-
-    @Emit('click')
-    private onClick(button: MToggleButton): void { }
-
-    public getSkin(button: MToggleButton): string {
-        return !button.pressed ? MButtonSkin.Secondary : MButtonSkin.Primary;
+        this.emitClick({ ...button, pressed: !button.pressed });
     }
 
-    get skinButtons(): { [key: string]: boolean } {
-        return {
-            'm--is-default': this.skin === MToggleButtonSkin.SQUARED,
-            'm--is-rounded': this.skin === MToggleButtonSkin.ROUNDED
-        };
-    }
 }
 
 const ToggleButtonsPlugin: PluginObject<any> = {