fix(file-uploader): use button for accessibility (#2351)

Author: b-r-i-a-n-w-e-s-t

COMPONENT_INDEX.md

@@ -1316,8 +1316,6 @@ None.
 | disableLabelChanges | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>false</code>                               | Set to `true` to disable label changes       |
 | kind                | No       | <code>let</code> | No       | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code>                           | Specify the kind of file uploader button     |
 | size                | No       | <code>let</code> | No       | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code>                             | Specify the size of the file uploader button |
-| role                | No       | <code>let</code> | No       | <code>string</code>                                                | <code>"button"</code>                            | Specify the label role                       |
-| tabindex            | No       | <code>let</code> | No       | <code>string</code>                                                | <code>"0"</code>                                 | Specify `tabindex` attribute                 |
 | id                  | No       | <code>let</code> | No       | <code>string</code>                                                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element              |
 | name                | No       | <code>let</code> | No       | <code>string</code>                                                | <code>""</code>                                  | Specify a name attribute for the input       |
 

docs/package-lock.json

@@ -5158,30 +5158,6 @@
           "constant": false,
           "reactive": true
         },
-        {
-          "name": "role",
-          "kind": "let",
-          "description": "Specify the label role",
-          "type": "string",
-          "value": "\"button\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "tabindex",
-          "kind": "let",
-          "description": "Specify `tabindex` attribute",
-          "type": "string",
-          "value": "\"0\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
         {
           "name": "id",
           "kind": "let",
@@ -5237,7 +5213,7 @@
         {
           "type": "forwarded",
           "name": "keydown",
-          "element": "label"
+          "element": "button"
         },
         {
           "type": "forwarded",

docs/src/COMPONENT_API.json

@@ -39,12 +39,6 @@
   /** Specify the label text */
   export let labelText = "Add file";
 
-  /** Specify the label role */
-  export let role = "button";
-
-  /** Specify `tabindex` attribute */
-  export let tabindex = "0";
-
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -79,12 +73,10 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<label
-  aria-disabled={disabled}
-  for={id}
-  tabindex={disabled ? "-1" : tabindex}
+<button
+  type="button"
+  on:click={() => ref?.click()}
+  {disabled}
   class:bx--btn={true}
   class:bx--btn--disabled={disabled}
   class:bx--btn--primary={kind === "primary"}
@@ -99,18 +91,11 @@
   class:bx--btn--lg={size === "lg"}
   class:bx--btn--xl={size === "xl"}
   on:keydown
-  on:keydown={({ key }) => {
-    if (key === " " || key === "Enter") {
-      ref.click();
-    }
-  }}
 >
-  <span {role}>
-    <slot name="labelText">
-      {labelText}
-    </slot>
-  </span>
-</label>
+  <slot name="labelText">
+    {labelText}
+  </slot>
+</button>
 <input
   bind:this={ref}
   type="file"
@@ -120,6 +105,7 @@
   {id}
   {multiple}
   {name}
+  aria-label={labelText}
   class:bx--visually-hidden={true}
   {...$$restProps}
   on:change|stopPropagation={({ target }) => {
@@ -133,6 +119,6 @@
   }}
   on:click
   on:click={({ target }) => {
-    target.value = null;
+    target.value = "";
   }}
 />

src/FileUploader/FileUploaderButton.svelte

@@ -52,18 +52,6 @@ type $Props = {
    */
   labelText?: string;
 
-  /**
-   * Specify the label role
-   * @default "button"
-   */
-  role?: string;
-
-  /**
-   * Specify `tabindex` attribute
-   * @default "0"
-   */
-  tabindex?: string;
-
   /**
    * Set an id for the input element
    * @default "ccs-" + Math.random().toString(36)