fix(ui-library): fixed contrast violation in disabled state (#802)

* fix(ui-library): fixed contrast violation in disabled state for icon-button and text-button and fixed that the text can not be selected in disabled mode for different browsers --------- Co-authored-by: christian.b.hoffmann <[email protected]> Co-authored-by: Christian Hoffmann <[email protected]>
deven-org · Jan 19, 2024 · 3a4caca · 3a4caca
1 parent 6d6e97a
commit 3a4caca
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
@@ -102,6 +102,7 @@ export class BlrIconButton extends LitElement {
         <span
           aria-label=${this.arialabel || nothing}
           class="blr-semantic-action blr-icon-button ${classes}"
+          aria-disabled=${this.disabled ? 'true' : nothing}
           @click=${this.handleClick}
           id=${this.buttonId || nothing}
           tabindex=${this.disabled ? nothing : '0'}

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.ts
@@ -148,11 +148,12 @@ export class BlrTextButton extends LitElement {
         </style>
         <span
           class="${classes}"
+          aria-disabled=${this.disabled ? 'true' : nothing}
           @click="${this.handleClick}"
           tabindex=${this.disabled ? nothing : '0'}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}
-          role=${this.disabled ? nothing : 'button'}
+          role="button"
           @keydown=${(event: KeyboardEvent) => {
             if (event.code === 'Space') {
               this.handleClick(event);

diff --git a/packages/ui-library/src/foundation/semantic-tokens/action.css.ts b/packages/ui-library/src/foundation/semantic-tokens/action.css.ts
@@ -10,6 +10,8 @@ export const { tokenizedLight: actionLight, tokenizedDark: actionDark } = render
       &.disabled {
         pointer-events: none;
         cursor: not-allowed;
+        user-select: none;
+        -webkit-user-select: none;
       }
       
       &.xs {