Path selector accessibility #4621

ashton22305 · 2025-09-23T16:41:14Z

johrstrom · 2025-09-23T17:43:42Z

Hmmm, seems like there should be more, but I'll check it out and report back.

Bubballoo3 · 2025-09-25T21:52:01Z

apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb

 <%= form.text_field(attrib.id, class: 'form-control', **options) %>

-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#<%= path_selector_id %>">
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#<%= path_selector_id %>" aria-label="<%= I18n.t('dashboard.select_path_for', element: attrib.label) %>">


Unfortunately this may not be an improvement, I like the idea of relating it to the form item label, but this gets read out as "#{aria-label} button". So if I have a form item called "working directory", it reads as "Select path for form element working directory button" which might be confusing since it sounds like "working directory button" is the element (when working directory label should really go with the input not the button).

A quick test shows that aria-labelledby will make it read "working directory button", which is even worse. Maybe we just rearrange the message so that it reads "for form item working directory select path button"? I don't love that though and am very open to other solutions. Whatever we go with needs to be less confusing than "select path button" which was the previous behavior

Maybe we can phrase it "Select path button for working directory" to avoid that while keeping a phrase that doesn't sound strange?

Though that does have the screen reader not reading "button" last

Yeah I also would prefer it didn't read 'button' last, just not sure if its possible given the label-type format I was noticing. Don't want to discourage you though if you have an idea to get that behavior

Because "button" isn't actually in the string but is just the screen reader describing the element, it might actually be more clear to someone using a screenreader regularly, though I'm not certain about this.

Bubballoo3 · 2025-09-25T22:08:42Z

apps/dashboard/app/views/shared/_path_selector_table.html.erb


            <div class="<%= favorites ? 'col-sm-7' : 'col-sm-12' %>">
-              <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter rounded">
+              <ol role="navigation" id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter rounded">


The navigation role doesn't seem to change anything with how this modal is read (it could still be helpful), but here are all the additional issues I ran into testing it out. When the modal opens the screenreader reads the modal title (but maybe this could have additional description as the modal title), then reads the close button, then the left column without issues. When it gets to the right column, it reads out the text in the breadcrumb but skips the icon buttons for home and back. The table and Close Select Path buttons get read out fine.

A bigger issue with the modal is that most of the important buttons cannot be tabfocused. When I open the modal my tabfocus starts at the close button, then skips to the filter (skipping the left column and the breadcrumb completely) then goes to the table headers, but skips the table content (where all the navigation happens) and goes straight to the close button.

I just stumbled upon at least one of these issues,

ondemand/apps/dashboard/app/views/shared/_path_selector_table.html.erb

Lines 5 to 7 in 811a3ac

id="<%= path_selector_id %>" tabindex="-1" role="dialog"

aria-labelledby="modal-path-selector" aria-hidden="true"

data-show-files="<%= show_files %>"

we set aria-hidden=true for the whole table, which blocks the focus from any child elements

The role="navigation" prevents the items from being read twice in my testing, both as text and as a list item. Also, thanks for catching that the table was aria-hidden!

Also, even though our table is filled with links, it might still be appropriate to allow for table navigation using arrow keys from the header. Non-interactive tables do this, such as the ones in these examples: https://www.w3.org/WAI/tutorials/tables/one-header/

I'd imagine that needing to press tab for every single row to get to the Select Path button would be very tedious.

I didn't know you could navigate a table via arrow keys, but that does sound easier than tabbing through the whole thing, so I would be more than fine with that

…d by screen reader

ashton22305 · 2025-10-02T17:54:18Z

It still is not possible to select elements in the table with a keyboard. This requires database-select to be upgraded to at least version 3.0.0 (up from 1.3.3), which itself requires at least datatables version 2.0.0 (up from 1.10.23). Upgrading these will affect every table in the app, which looks to be mentioned in #4457

johrstrom · 2025-10-09T20:23:27Z

apps/dashboard/app/views/batch_connect/session_contexts/_favorites.html.erb

-  <%= fa_icon((path.to_s == Dir.home ? 'home' : path.icon), classes: '') %>
-  <%= path.title || path %>
-</li>
+<a href="#"


I feel like this should still be ol and li even if the internal is an a.

To me, it makes sense to present it as a list of anchors, much like navbar entries, favorites in the files index and interactive apps in my interactive sessions.

This was mainly used to follow bootstrap's recommendations. If we use <div> and <a> for lists with interactive elements, list-group handles accessibility for us without a bunch of aria-* attributes.

Here is where they recommend to use these elements in list groups

johrstrom · 2025-10-13T16:01:13Z

It still is not possible to select elements in the table with a keyboard.

I think I opened #4680 because of this. You can't click to select items either. Is that what you mean by 'select' or (selecting and closing the modal) or do you simply mean something more like choosing (highlighting then having to press 'select path')?

ashton22305 · 2025-10-13T18:08:57Z

It still is not possible to select elements in the table with a keyboard.

I think I opened #4680 because of this. You can't click to select items either. Is that what you mean by 'select' or (selecting and closing the modal) or do you simply mean something more like choosing (highlighting then having to press 'select path')?

I just mean choosing. There's a setting in datatables in a newer version, but that changes a lot of looks and functionality so I think it's best in its own issue. Doing this on our own results in some very strange code that will no longer work if we upgrade datatables.

johrstrom

I'm good with this.

@Bubballoo3 do you have more thoughts/change requests?

Bubballoo3

LGTM!

ashton22305 added 2 commits September 18, 2025 13:20

role as navigation and not list

58e344e

add more descriptive label to select path button

811a3ac

github-project-automation bot added this to PR Review Pipeline Sep 23, 2025

github-project-automation bot moved this to Awaiting Review in PR Review Pipeline Sep 23, 2025

osc-bot added the component/dashboard label Sep 23, 2025

ashton22305 added the status/awaiting review Changes made by dev, waiting for reviewers label Sep 23, 2025

Bubballoo3 requested changes Sep 25, 2025

View reviewed changes

github-project-automation bot moved this from Awaiting Review to Changes Requested in PR Review Pipeline Sep 25, 2025

change path selector to use semantic html elements so they can be rea…

c7dd41f

…d by screen reader

ashton22305 added status/on hold and removed status/awaiting review Changes made by dev, waiting for reviewers labels Oct 2, 2025

fix tests

43eef9b

ashton22305 added status/awaiting review Changes made by dev, waiting for reviewers and removed status/on hold labels Oct 2, 2025

ashton22305 requested a review from Bubballoo3 October 2, 2025 17:45

ashton22305 requested a review from johrstrom October 6, 2025 19:51

Merge branch 'master' into path-selector-accessibility

0f05b6f

johrstrom reviewed Oct 9, 2025

View reviewed changes

johrstrom mentioned this pull request Oct 13, 2025

clicking file in path selector should 'select path' #4680

Open

johrstrom self-requested a review October 13, 2025 20:09

johrstrom approved these changes Oct 13, 2025

View reviewed changes

Bubballoo3 approved these changes Oct 14, 2025

View reviewed changes

Bubballoo3 merged commit 499da93 into master Oct 14, 2025
24 checks passed

github-project-automation bot moved this from Changes Requested to Merged/Closed in PR Review Pipeline Oct 14, 2025

johrstrom deleted the path-selector-accessibility branch October 14, 2025 20:28

	id="<%= path_selector_id %>" tabindex="-1" role="dialog"
	aria-labelledby="modal-path-selector" aria-hidden="true"
	data-show-files="<%= show_files %>"

Path selector accessibility #4621

Path selector accessibility #4621

Uh oh!

Conversation

ashton22305 commented Sep 23, 2025

Uh oh!

johrstrom commented Sep 23, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Bubballoo3 Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ashton22305 commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

johrstrom commented Oct 13, 2025

Uh oh!

ashton22305 commented Oct 13, 2025

Uh oh!

johrstrom left a comment

Choose a reason for hiding this comment

Uh oh!

Bubballoo3 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Bubballoo3 Sep 26, 2025 •

edited

Loading

ashton22305 commented Oct 2, 2025 •

edited

Loading