Make dialog region focusable via keyboard

.changeset/great-forks-work.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix an accessibility issue where the Dialog body could not be reached via keyboard navigation

app/components/primer/alpha/dialog.html.erb

@@ -5,7 +5,9 @@
     <% if content.present? %>
       <%= content %>
     <% else %>
-      <%= body %>
+      <scrollable-region data-labelled-by="<%= labelledby %>">
+        <%= body %>
+      </scrollable-region>
       <%= footer %>
     <% end %>
   <% end %>

app/components/primer/alpha/dialog.rb

@@ -133,7 +133,7 @@ def initialize(
           @system_arguments, {
             aria: {
               disabled: true,
-              labelledby: "#{@id}-title",
+              labelledby: labelledby,
               describedby: "#{@id}-description"
             }
           }
@@ -155,6 +155,10 @@ def before_render
         with_header unless header?
         with_body unless body?
       end
+
+      def labelledby
+        "#{@id}-title"
+      end
     end
   end
 end

app/components/primer/primer.ts

@@ -3,6 +3,7 @@ import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'
 import './focus_group'
+import './scrollable_region'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './beta/nav_list'

app/components/primer/scrollable_region.ts

@@ -0,0 +1,48 @@
+import {controller, attr} from '@github/catalyst'
+
+@controller
+export class ScrollableRegionElement extends HTMLElement {
+  @attr hasOverflow = false
+  @attr labelledBy = ''
+
+  observer: ResizeObserver
+
+  connectedCallback() {
+    this.style.overflow = 'auto'
+
+    this.observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        this.hasOverflow =
+          entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth
+      }
+    })
+
+    this.observer.observe(this)
+  }
+
+  disconnectedCallback() {
+    this.observer.disconnect()
+  }
+
+  attributeChangedCallback(name: string) {
+    if (name === 'data-has-overflow') {
+      if (this.hasOverflow) {
+        this.setAttribute('aria-labelledby', this.labelledBy)
+        this.setAttribute('role', 'region')
+        this.setAttribute('tabindex', '0')
+      } else {
+        this.removeAttribute('aria-labelledby')
+        this.removeAttribute('role')
+        this.removeAttribute('tabindex')
+      }
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ScrollableRegionElement: typeof ScrollableRegionElement
+  }
+}
+
+window.ScrollableRegionElement = ScrollableRegionElement