Image:static with label and download button

This story threw an error after it finished rendering which means interactions may not have been executed fully.

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Maximize"

Here are the accessible roles:

  button:

  Name "View in full screen":
  <button
    aria-haspopup="false"
    aria-label="View in full screen"
    class="svelte-rk35yg padded"
    style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
    title="View in full screen"
  />

  Name "Download":
  <button
    aria-haspopup="false"
    aria-label="Download"
    class="svelte-rk35yg padded"
    style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
    title="Download"
  />

  Name "":
  <button
    class="svelte-eyi42u"
  />

  --------------------------------------------------
  link:

  Name "":
  <a
    download="cheetah.jpg"
    href="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
    rel="noopener noreferrer"
  />

  --------------------------------------------------
  img:

  Name "":
  <img
    alt=""
    class="svelte-1r6sk7j"
    loading="lazy"
    src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
    style="transform: scale(1); transition: transform 0.2s ease-out 0s;"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="image-container"
    style="width: 300px; position: relative; border-radius: var(--radius-lg); overflow: hidden;"
  >
    <div
      class="block  svelte-12cmxck"
      id=""
      style="border-style: solid; overflow: hidden; min-width: min(0px, 100%); border-width: var(--block-border-width);"
    >
      <div
        class="wrap default full svelte-au1olv hide"
        style="position: absolute; padding: 0px;"
      />
       
      <label
        class="svelte-1b6s6s float"
        data-testid="block-label"
        for=""
      >
        <span
          class="svelte-1b6s6s"
        >
          <svg
            class="feather feather-image"
            fill="none"
            height="100%"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            viewBox="0 0 24 24"
            width="100%"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="18"
              rx="2"
              ry="2"
              width="18"
              x="3"
              y="3"
            />
            <circle
              cx="8.5"
              cy="8.5"
              r="1.5"
            />
            <polyline
              points="21 15 16 10 5 21"
            />
          </svg>
        </span>
         
        Image
      </label>
       
      <div
        class="image-container svelte-eyi42u"
      >
        <div
          class="icon-buttons svelte-eyi42u"
        >
          <button
            aria-haspopup="false"
            aria-label="View in full screen"
            class="svelte-rk35yg padded"
            style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
            title="View in full screen"
          >
             
            <div
              class="svelte-rk35yg small"
            >
              <svg
                class="feather feather-maximize"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
                />
              </svg>
            </div>
          </button>
           
           
          <a
            download="cheetah.jpg"
            href="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
            rel="noopener noreferrer"
          >
            <button
              aria-haspopup="false"
              aria-label="Download"
              class="svelte-rk35yg padded"
              style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"
              title="Download"
            >
               
              <div
                class="svelte-rk35yg small"
              >
                <svg
                  height="100%"
                  viewBox="0 0 32 32"
                  width="100%"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"
                    fill="currentColor"
                  />
                </svg>
              </div>
            </button>
          </a>
          
           
        </div>
         
        <button
          class="svelte-eyi42u"
        >
          <div
            class="svelte-eyi42u"
          >
            <img
              alt=""
              class="svelte-1r6sk7j"
              loading="lazy"
              src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
              style="transform: scale(1); transition: transform 0.2s ease-out 0s;"
            />
          </div>
        </button>
      </div>
      
    </div>
    
  </div>
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
  
  
  
</div>
    at Object.getElementError (https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:117:284)
    at https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:139:164
    at https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:131:4163
    at https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:139:387
    at ln.invoke (https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:9266)
    at ln.track (https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:6505)
    at Object.getByRole (https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:5777)
    at K.async.canvasElement (https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/Image.stories-CSY_ftLs.js:1:4529)
    at _.play (https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/assets/collect-stories-CO8dCuoI.js:1:10149)
    at playFunction (https://649585a46a67480e3074dc75-lljdixrcbj.capture-loopback.chromatic.com/sb-preview/runtime.js:113:6184)