Add scrollable-region-focusable.json

results/scrollable-region-focusable.json

@@ -21,5 +21,6 @@
   "div_style_div_style": "Issue: The code snippet contains scrollable content that is not accessible by keyboard.\n\nCorrect version of the code snippet:\n\n<div style=\"width: 857px; overflow-x: auto;\">\n  <div style=\"width: 2510px;\"></div>\n</div>\n\nExplanation: The addition of \"overflow-x: auto;\" to the outer div element allows keyboard users to scroll horizontally through the content.",
   "div_role_tabindex": "The issue with the code snippet is that it contains a `div` element with `role=\"presentation\"` and `tabindex=\"-1\"`, which means that it is not accessible by keyboard users. This is because the `role=\"presentation\"` attribute removes the element from the accessibility tree, and the `tabindex=\"-1\"` attribute means that the element cannot receive focus via keyboard.\n\nThe correct version of the code snippet would be:\n\n<div role=\"region\" aria-label=\"Scrollable content\" tabindex=\"0\"> \n\nThis code snippet contains a `div` element with `role=\"region\"`, which indicates that it is a container of content, and an `aria-label` attribute to provide a description of the content. The `tabindex=\"0\"` attribute means that the element can receive focus via keyboard.",
   "section": "The issue with the given code snippet is that it contains scrollable content that is not accessible by keyboard, which can make it difficult for users who rely on keyboard navigation to access the content.\n\nTo fix this issue, the code should be updated to include keyboard accessibility. One way to achieve this is by adding the \"tabindex\" attribute to the scrollable elements and setting it to \"0\" to make them focusable by keyboard. Additionally, the \"aria-label\" attribute can be used to provide a descriptive label for the scrollable content.\n\nHere is an example of the updated code snippet:\n\n<`section`>\n  <`div` tabindex=\"0\" aria-label=\"Scrollable content\">\n    <!-- Scrollable content here -->\n  </`div`>\n</`section`>",
-  "div_aria-label_role": "The issue with this code snippet is that it contains scrollable content that is not accessible by keyboard. This means that users who rely on keyboard navigation will not be able to access the content within the div.\n\nTo fix this issue, the code snippet should be updated to include the `tabindex` attribute and the `overflow` CSS property. The updated code snippet should look like this:\n\n<div aria-label=\"...\" role=\"complementary\" tabindex=\"0\" style=\"overflow: auto;\">"
+  "div_aria-label_role": "The issue with this code snippet is that it contains scrollable content that is not accessible by keyboard. This means that users who rely on keyboard navigation will not be able to access the content within the div.\n\nTo fix this issue, the code snippet should be updated to include the `tabindex` attribute and the `overflow` CSS property. The updated code snippet should look like this:\n\n<div aria-label=\"...\" role=\"complementary\" tabindex=\"0\" style=\"overflow: auto;\">",
+  "tbody_style": "The issue with this code snippet is that the scrollable content is not accessible by keyboard. This means that users who rely on keyboard navigation will not be able to access the content within the `tbody` element.\n\nTo fix this issue, the `tbody` element should have a `tabindex` attribute added to it, and the `overflow-y` property should be set to `scroll` instead of `auto`. The updated code snippet should look like this:\n\n<`tbody` `style`=\"padding: inherit; overflow-y: scroll; display: block; max-height: 550px;position:relative;\" `tabindex`=\"0\">"
 }