feat: Accessibility for layout and repo explore bar

[davidverdu]

fixes: #156

[abujeda]

I would say this is subtitle_default_text

[davidverdu]

fixed

[abujeda]

I will make it more generic like this:

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static values = {
    event: String,
    elementId: String
  }

  connect() {
    if (this.eventValue) {
      this.element.addEventListener(this.eventValue, this.focusInput)
    }
  }

  disconnect() {
    if (this.eventValue) {
      this.element.removeEventListener(this.eventValue, this.focusInput)
    }
  }

  focusInput = () => {
    if (!this.elementIdValue) return
    const target = document.getElementById(this.elementIdValue)
    if (target) target.focus()
  }
}

For a BS collapsable item, it can listen to an event that BS fires:

data-controller="focus-on-event"
  data-focus-on-event-event-value="shown.bs.collapse"
  data-focus-on-event-element-id-value="id of element"

[davidverdu]

fixed

[abujeda]

The idea is to use the event or the data-action, but not both.
For components with events, like BS collapse, it can be used to ensure the collapse action has completed.

for other items, the data-action will be used.

[davidverdu]

I have refactored the code to add the controller on the event receiver instead of the event triggered. Now data-action is not required.

[abujeda]

LGTM