[Accessibility] Folders > Edit folder buttons could do with more descriptive accessible name

[patrickhlauke]

Steps To Reproduce

1. Use a screen reader
2. Go to Settings > Vault > Folders
3. Tab through the edit folder buttons

Expected Result

Each button should include information about which folder it refers to.

Actual Result

All buttons have a generic "Edit folder" accessible name. To know which folder each button relates to, a screen reader user has to navigate backwards to work out what the actual folder that the button refers to is.

Screenshots or Videos

bitwarden-folders-edit-folder-button.mp4

Video: Chrome/NVDA tabbing through the various "Edit folder" buttons

Additional Context

Current markup for each folder in that list:

<bit-item class="tw-block tw-box-border tw-overflow-auto tw-flex tw-bg-background [&amp;:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&amp;:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&amp;:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&amp;:not(bit-layout_*)]:tw-rounded-none bit-compact:[&amp;:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&amp;:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0 tw-border-b-shadow ng-star-inserted"><bit-item-action class="item-main-content tw-flex tw-flex-1 tw-overflow-hidden">
  
          <bit-item-content class="fvw-target tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 bit-compact:tw-py-1.5 bit-compact:tw-px-2 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between"><div class="tw-flex tw-gap-2 tw-items-center tw-w-full tw-min-w-0">
  

  <div class="tw-flex tw-flex-col tw-items-start tw-text-start tw-w-full tw-truncate [&amp;_p]:tw-mb-0">
    <div bittypography="body2" class="tw-text-main tw-truncate tw-inline-flex tw-items-center tw-gap-1.5 tw-w-full !tw-text-sm">
      <div class="tw-truncate">
        
            #id24
            
          
      </div>
      <div class="tw-flex-grow">
        
      </div>
    </div>
    <div bittypography="helper" class="tw-text-muted tw-w-full tw-truncate !tw-text-xs">
      
    </div>
  </div>
</div>

<div class="tw-flex tw-gap-2 tw-items-center">
  <button slot="end" type="button" biticonbutton="bwi-pencil-square" data-testid="edit-folder-button" class="tw-self-end !tw-text-main before:-tw-inset-[2px] before:tw-absolute before:tw-block before:tw-content-[''] before:tw-ring-2 before:tw-ring-transparent before:tw-rounded-lg before:tw-transition disabled:!tw-text-secondary-300 disabled:hover:tw-bg-transparent disabled:hover:tw-border-transparent focus-visible:before:tw-ring-primary-600 focus-visible:tw-z-10 focus:tw-outline-none hover:tw-bg-transparent-hover hover:tw-border-primary-600 hover:tw-no-underline tw-bg-transparent tw-border tw-border-solid tw-border-transparent tw-font-semibold tw-px-2.5 tw-py-1.5 tw-relative tw-rounded-lg tw-transition" title="Edit folder" aria-label="Edit folder"><span class="tw-relative">
  <span>
    <i aria-hidden="true" class="bwi bwi-pencil-square !tw-m-0"></i>
  </span>
  <span class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-invisible">
    <i aria-hidden="true" class="bwi bwi-spinner bwi-spin bwi-lg"></i>
  </span>
</span>
</button>
</div>
</bit-item-content>
        
</bit-item-action>

<div class="tw-p-2 tw-flex tw-gap-1 tw-items-center" hidden="">
  
</div>
</bit-item>

Suggest that the aria-label on the <button ...> is expanded to include the name of the folder the button relates to, e.g. <button ... aria-label="Edit folder: #id24">

Operating System

Windows

Operating System Version

11

Web Browser

Chrome

Browser Version

131.0.6778.205 (Official Build) (64-bit)

Build Version

2024.12.2

Issue Tracking Info

• I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.

[bitwarden-bot]

Thank you for reporting this issue! We've added this to our internal tracking system.
ID: PM-16300

[SergeantConfused]

Hello @patrickhlauke,

Thank you for your report. I have flagged this to the Engineering department; please feel free to post additional information, such as screenshots or a screen video recordings, if you wish.

Thank you again,