Skip to content

Conversation

@psoujany
Copy link
Contributor

This PR fixes the accessibility violations seen with achecker tool.

Message: The scrollable element <div> with non-interactive content is not tabbable
 Level: violation
 XPath: /html[1]/body[1]/div[1]/main[1]/div[2]/div[2]/div[1]/div[3122]
 Snippet: <div class="col-last odd-row-color all-classes-table all-classes-table-tab2">
 Help: https://able.ibm.com/rules/archives/latest/doc/en-US/element_scrollable_tabbable.html#%7B%22message%22%3A%22The%20scrollable%20element%20%3Cdiv%3E%20with%20non-interactive%20content%20is%20not%20tabbable%22%2C%22snippet%22%3A%22%3Cdiv%20class%3D%5C%22col-last%20odd-row-color%20all-classes-table%20all-classes-table-tab2%5C%22%3E%22%2C%22value%22%3A%5B%22VIOLATION%22%2C%22FAIL%22%5D%2C%22reasonId%22%3A%22fail_scrollable%22%2C%22ruleId%22%3A%22element_scrollable_tabbable%22%7D

@psoujany psoujany force-pushed the fix-accessibility branch from f4fbf77 to 782fb6a Compare April 28, 2025 12:43
@psoujany
Copy link
Contributor Author

@pshipton As per your suggestion here ibmruntimes/openj9-openjdk-jdk17#472, raising this PR. Thank you.

@psoujany
Copy link
Contributor Author

Once the PR is merged, will backport the changes to 24/21/17 repos. Thank you.

@keithc-ca keithc-ca self-requested a review April 28, 2025 14:46
@psoujany
Copy link
Contributor Author

Personal build is successful with the changes and violation(The scrollable element

with non-interactive content is not tabbable) is not seen with the changes in accessibility testing.

@smoinud1 FYI

Copy link
Member

@keithc-ca keithc-ca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please avoid "tababble" - if it's a word, it would end with "able" (just one "b", not two).

…able

Signed-off-by: Pasam Soujanya <psoujany@in.ibm.com>
@psoujany psoujany force-pushed the fix-accessibility branch from 9626cb3 to 9044930 Compare April 30, 2025 02:40
@psoujany psoujany changed the title Add tabindex to grid columns which has only plain text to make it tababble Add tabindex to grid columns which has only plain text to make it tabable Apr 30, 2025
Comment on lines +345 to +348
if (!matchFound) {
cell.put(HtmlAttr.ROLE, "tablist")
.put(HtmlAttr.TABINDEX, "0");
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These lines are redundant; see lines 338-341.

Copy link
Contributor Author

@psoujany psoujany May 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes Keith, here we have 2 styles.

  1. rowStyle without tabs : cell.addStyle(rowStyle); creates div as <div class="col-first even-row-color">
  2. rowStyle with tabs : cell.addStyle(tabClass); creates div as <div class="col-last odd-row-color all-classes-table all-classes-table-tab2">

For both the styles tab should get focus, to do that we need to add role=tablist tabindex=0.

Comment on lines +338 to +341
if (!matchFound) {
cell.put(HtmlAttr.ROLE, "tablist")
.put(HtmlAttr.TABINDEX, "0");
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to apply to many more places than the title suggests - I don't think this is what we want.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These values should be applied to all grid rows with/without tab elements which has only plain text.

@psoujany psoujany changed the title Add tabindex to grid columns which has only plain text to make it tabable Add tabindex to all grid row elements(with/without tabs) which has only plain text to make it tabable. May 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants