Lock icon tooltip for locked directory child items does not render

The following discussion from !186291 (merged) should be addressed:

• @sdejonge started a discussion:

  accessibility question non-blocking: beyond the scope of the change here, but as a follow-up can we label locked files/directories in the file tree with meaningful content for screen reader users navigating through files/directories. Currently I don't believe the lock icon is legible

  

Problem

There must be a bug causing the tooltip to not render:

The tooltip is supposed to say: root has a lock on "new-directory/inner folder"

The content of the tooltip is prepared on backend: ee/app/helpers/path_locks_helper.rb

 def text_label_for_lock(file_lock, path)
    if file_lock.path == path
      "Locked by #{file_lock.user.username}"
    else
      # Nested lock
      "#{file_lock.user.username} has a lock on \"#{file_lock.path}\""
    end
  end

Then rendered on the frontend in app/assets/javascripts/repository/components/table/row.vue:

<gl-icon
  v-if="hasLockLabel"
  v-gl-tooltip
  :title="commitData.lockLabel"
  name="lock"
  :size="12"
/>

Solution

Make sure the tooltip for lock icon is rendered and the alternative text is available for screen readers. aria-label should be included with commitData.lockLabel, since there's a know issue that the tooltip replaces title attribute content to empty string, while moving the content to another dynamic attribute.