Add aria-allowed-attr.json aria-allowed-role.json scrollable-region-f…

…ocusable.json aria-roles.json

results/aria-allowed-attr.json

@@ -64,5 +64,7 @@
   "dl_aria-multiselectable": "The issue with the code snippet is that the `aria-multiselectable` attribute is not allowed for the `dl` element's role. \n\nThe correct version of the code snippet would be:\n\n<`div` `role`=\"listbox\" `aria-multiselectable`=\"true\">",
   "form_aria-expanded_style": "The issue with the code snippet is that the `aria-expanded` attribute is not allowed for the `form` element's role. This attribute is typically used for elements that can be expanded or collapsed, such as a menu or a tree. \n\nThe correct version of the code snippet would be: \n\n<`form` `style`=\"--menu-open-height: 133px;\">",
   "hr_role=\"presentation\"": "The issue with the code snippet is that the `aria-orientation` attribute is not allowed for the `hr` element with `role=\"presentation\"`. \n\nThe correct version of the code snippet would be: \n\n<`hr` `role`=\"separator\" `aria-orientation`=\"vertical\"> \n\nThis code snippet uses the `role=\"separator\"` attribute which is appropriate for the `hr` element, and the `aria-orientation` attribute is allowed for this role.",
-  "div_aria-required": "The issue with the code snippet is that the `aria-required` attribute is not allowed for a `div` element. The correct version of the code snippet would be to use a different element that allows the `aria-required` attribute, such as an `input` element: `<input type=\"text\" aria-required=\"true\">`"
+  "div_aria-required": "The issue with the code snippet is that the `aria-required` attribute is not allowed for a `div` element. The correct version of the code snippet would be to use a different element that allows the `aria-required` attribute, such as an `input` element: `<input type=\"text\" aria-required=\"true\">`",
+  "md-input-container_aria-invalid_aria-readonly": "The issue with this code snippet is that `md-input-container` element does not have a role attribute defined, so it is not clear what role the element is fulfilling. Therefore, it is not possible to determine which ARIA attributes are allowed or not allowed for this element.\n\nThe correct version of the code snippet should include a role attribute that defines the role of the `md-input-container` element. For example, if the element is a form field container, the role attribute should be set to \"form\". The corrected code snippet would be:\n\n<md-input-container role=\"form\" aria-invalid=\"false\" aria-readonly=\"false\">",
+  "a_aria-selected": "The issue with the code snippet is that the `aria-selected` attribute is not allowed for the `a` element's role. The correct version of the code snippet would be to use a different element with a role that allows for the `aria-selected` attribute, such as a `button` element with `role=\"tab\"`:\n\n```\n<button role=\"tab\" aria-selected=\"true\"></button>\n```"
 }

results/aria-allowed-role.json

@@ -94,5 +94,7 @@
   "article_role=\"tabpanel\"": "The issue with the code snippet is that the `role` attribute value is set to \"tabpanel\" which is not appropriate for an `article` element. The correct value for the `role` attribute should be \"article\". The corrected code snippet is: <`article` `aria-hidden`=\"true\" `role`=\"article\" `style`=\"width: 385px;\" `tabindex`=\"-1\">",
   "iframe_role=\"dialog\"": "The issue in the code snippet is that the `role` attribute is set to \"dialog\", which is not appropriate for an `iframe` element. The correct role for an `iframe` element is \"presentation\" or \"none\" depending on the specific use case. \n\nThe correct version of the code snippet is:\n<`iframe` `aria-label`=\"...\" `role`=\"presentation\" `src`=\"...\" `style`=\"border: none; height: 100%; width: 100%; visibility: hidden;\" `title`=\"...\">",
   "progress_role=\"presentation\"": "The issue with the code snippet is that the `role` attribute is set to \"presentation\" which means that the element is not intended to be perceivable by assistive technologies. This can cause accessibility issues for users who rely on assistive technologies to access the content. \n\nThe correct version of the code snippet should include a more appropriate `role` attribute value. For a progress bar, the `role` attribute value should be set to \"progressbar\" to indicate that the element is a progress bar and provide the necessary information to assistive technologies. \n\nThe corrected code snippet is: `<progress role=\"progressbar\" value=\"...\"></progress>`",
-  "h4_role=\"button\"": "The issue with the code snippet is that the `h4` element is not a valid interactive element and should not have a `role` attribute with a value of \"button\". \n\nThe correct version of the code snippet should use a valid interactive element such as `button` or `a` with a `role` attribute of \"button\". For example: \n\n<button href=\"...\" role=\"button\">Heading Text</button> \n\nor \n\n<a href=\"...\" role=\"button\">Heading Text</a>"
+  "h4_role=\"button\"": "The issue with the code snippet is that the `h4` element is not a valid interactive element and should not have a `role` attribute with a value of \"button\". \n\nThe correct version of the code snippet should use a valid interactive element such as `button` or `a` with a `role` attribute of \"button\". For example: \n\n<button href=\"...\" role=\"button\">Heading Text</button> \n\nor \n\n<a href=\"...\" role=\"button\">Heading Text</a>",
+  "img_role=\"group\"": "The issue with this code snippet is that the `role` attribute value is set to \"group\" which is not appropriate for an `img` element. The correct value for `role` attribute for an `img` element is \"img\". \n\nThe corrected code snippet is: `<img alt=\"banner36c5523f085f34d5995783d65cb8bce4a\" aria-label=\"...\" role=\"img\" src=\"...\" style=\"width: 721px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;\" title=\"...\">`",
+  "a_role=\"group\"": "The issue with the code snippet is that the value of the `role` attribute, which is \"group\", is not appropriate for an anchor element (`<a>`). The `role` attribute is used to define the purpose of an element for assistive technologies, and \"group\" is not a valid role for an anchor element.\n\nThe correct version of the code snippet should be:\n\n<a aria-label=\"...\" href=\"...\" role=\"button\" style=\"width: 212px; margin-right: 40px;\">\n\nIn this corrected version, the `role` attribute is set to \"button\", which is a valid role for an anchor element that triggers an action. This will ensure that assistive technologies correctly interpret the purpose of the element."
 }

results/aria-roles.json

@@ -27,5 +27,6 @@
   "div_role=\"bar\"": "The issue with the code snippet is that the `role` attribute is set to an invalid value \"bar\". The correct values for `role` attribute are predefined and should be used according to their intended purpose. \n\nThe corrected version of the code snippet is: \n\n```html\n<div role=\"button\" style=\"transform: translate3d(-0.6%, 0px, 0px); transition: all 200ms ease 0s;\">\n  <div></div>\n</div>\n```\n\nIn this corrected version, the `role` attribute is set to \"button\", which is a valid value according to its intended purpose.",
   "div_role=\"spinner\"": "The issue with the code snippet is that the value \"spinner\" is not a valid value for the role attribute. According to the W3C specification, valid values for the role attribute include \"button\", \"checkbox\", \"dialog\", \"listbox\", \"menu\", \"progressbar\", \"radio\", \"slider\", \"spinbutton\", \"status\", and \"tablist\", among others.\n\nThe correct version of the code snippet would be: <`div` `role`=\"progressbar\"><`div`></div></div> \n\nHere, the role attribute has been updated to use the valid value \"progressbar\", which accurately describes the function of the element.",
   "section_role=\"filters\"": "The issue with the code snippet is that the value assigned to the role attribute, \"filters\", is not a valid value. According to the W3C Accessibility Guidelines, valid values for the role attribute include \"button\", \"checkbox\", \"combobox\", \"link\", \"listbox\", \"menu\", \"progressbar\", \"radio\", \"scrollbar\", \"slider\", \"spinbutton\", \"switch\", \"tab\", \"textbox\", and \"toolbar\".\n\nA correct version of the code snippet could be: <`section` `role`=\"navigation\">, assuming that the section contains navigation elements. If the section contains a list of filters, a correct version could be: <`section` `role`=\"listbox\">. It is important to choose the correct value for the role attribute to ensure that the element is properly identified by assistive technologies.",
-  "section_role=\"Past Event Video\"": "The issue with the code snippet is that the value \"Past Event Video\" is not a valid value for the role attribute. The correct values for the role attribute are predefined by the WAI-ARIA specification and should be used to ensure proper accessibility. \n\nThe correct version of the code snippet is: <`section` `role`=\"region\" `aria-label`=\"Past Event Video\">. \n\nIn this corrected version, the role attribute is set to \"region\" which is a valid value for the role attribute. Additionally, the `aria-label` attribute is used to provide a descriptive label for the section, which will improve accessibility for users of assistive technologies."
+  "section_role=\"Past Event Video\"": "The issue with the code snippet is that the value \"Past Event Video\" is not a valid value for the role attribute. The correct values for the role attribute are predefined by the WAI-ARIA specification and should be used to ensure proper accessibility. \n\nThe correct version of the code snippet is: <`section` `role`=\"region\" `aria-label`=\"Past Event Video\">. \n\nIn this corrected version, the role attribute is set to \"region\" which is a valid value for the role attribute. Additionally, the `aria-label` attribute is used to provide a descriptive label for the section, which will improve accessibility for users of assistive technologies.",
+  "p_role=\"input\"": "The issue with this code snippet is that the `role` attribute has an invalid value. The value \"input\" is not a valid role for a `<p>` element. The correct value for the `role` attribute depends on the purpose of the element. \n\nA possible correct version of the code snippet could be: `<p aria-label=\"...\" role=\"textbox\"><strong></strong></p>`. In this case, the `role` attribute has been changed to \"textbox\", which is a valid role for an element that accepts user input."
 }

results/scrollable-region-focusable.json

@@ -27,5 +27,6 @@
   "div_aria-live": "The issue with the code snippet is that it only contains an `aria-live` attribute which is used to indicate that the content within the element may change dynamically and should be announced by assistive technology. However, it does not provide any keyboard accessibility for the scrollable content within the `div` element. \n\nThe correct version of the code snippet should include the `role` attribute with a value of `\"region\"` to indicate that the `div` element is a container for content, and the `tabindex` attribute with a value of `-1` to make it focusable by keyboard. Additionally, the `aria-label` attribute should be added to provide a descriptive label for the content within the `div` element. \n\nThe updated code snippet is:\n\n<div role=\"region\" tabindex=\"-1\" aria-label=\"Scrollable Content\" aria-live=\"polite\">\n   <!-- Scrollable content here -->\n</div>",
   "table_thead_tr_th_th_style_th_style_tbody_tr_td_td_style_td_style": "The issue with the code snippet is that the scrollable content within the table is not accessible by keyboard. This means that users who rely on keyboard navigation or assistive technologies may not be able to access all the content.\n\nTo fix this issue, the table should have a `role` attribute set to `\"grid\"`, and each cell should have a `role` attribute set to `\"gridcell\"`. Additionally, the table should have appropriate `aria-label` or `aria-labelledby` attributes to provide context for the content.\n\nHere is the corrected version of the code snippet:\n\n<table role=\"grid\" aria-label=\"Table of data\">\n  <thead>\n    <tr>\n      <th></th>\n      <th style=\"text-align:center\"></th>\n      <th style=\"text-align:center\"></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td role=\"gridcell\"></td>\n      <td role=\"gridcell\" style=\"text-align:center\"></td>\n      <td role=\"gridcell\" style=\"text-align:center\"></td>\n    </tr>\n  </tbody>\n</table>",
   "nav": "The issue with the code snippet is that it does not provide keyboard accessibility for scrollable content within the `<nav>` element. This can make it difficult or impossible for users with mobility or visual impairments to navigate the content.\n\nTo fix this issue, the code can be updated to include the `tabindex` attribute on the scrollable element, and use the arrow keys to navigate the content. Here is an example of the updated code:\n\n```\n<nav>\n  <ul>\n    <li><a href=\"#\">Link 1</a></li>\n    <li><a href=\"#\">Link 2</a></li>\n    <li><a href=\"#\">Link 3</a></li>\n    <li><a href=\"#\">Link 4</a></li>\n    <li>\n      <div tabindex=\"0\">\n        <h2>Scrollable Content</h2>\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod euismod sapien, sit amet elementum libero iaculis in. Mauris nec quam eget tortor facilisis pretium. Phasellus vitae purus a velit venenatis vestibulum. Nulla facilisi. Nam quis nunc eget ex fringilla pharetra. Sed id enim at lectus venenatis rutrum. Aliquam erat volutpat. Sed sed tellus euismod, finibus nulla vel, laoreet sapien. Aenean lacinia, diam vitae placerat gravida, justo sapien congue velit, eu efficitur orci velit id quam.</p>\n        <p>Nulla facilisi. Quisque semper, arcu ut consectetur commodo, tellus purus viverra velit, eu cursus velit erat vel velit. Sed euismod semper sem, vel bibendum sapien. Suspendisse potenti. Sed euismod, felis non pulvinar bibendum, lorem mauris tristique velit, nec cursus enim nunc non est. Donec euismod, elit eu lacinia pulvinar, neque mi bibendum orci, a bibendum nisi nisi in turpis. Nam tincidunt risus eu purus luctus, in bibendum nibh fringilla. Donec lobortis, ex ut consectetur tincidunt, ipsum ipsum dignissim turpis, at imperdiet dolor nisl at velit.</p>\n      </div>\n    </li>\n ",
-  "code": "The issue with the code snippet is that the scrollable content is not accessible by keyboard, which violates accessibility standards. \n\nHere is the corrected version of the code snippet:\n\n<div role=\"region\" aria-label=\"Scrollable Content\" tabindex=\"0\">\n  <div>\n    <p>Content 1</p>\n    <p>Content 2</p>\n    <p>Content 3</p>\n    <p>Content 4</p>\n    <p>Content 5</p>\n  </div>\n</div>\n\nIn the corrected version, the scrollable content is wrapped in a div with a role of \"region\" and an aria-label to describe the content. The tabindex attribute is also added to make the content focusable by keyboard."
+  "code": "The issue with the code snippet is that the scrollable content is not accessible by keyboard, which violates accessibility standards. \n\nHere is the corrected version of the code snippet:\n\n<div role=\"region\" aria-label=\"Scrollable Content\" tabindex=\"0\">\n  <div>\n    <p>Content 1</p>\n    <p>Content 2</p>\n    <p>Content 3</p>\n    <p>Content 4</p>\n    <p>Content 5</p>\n  </div>\n</div>\n\nIn the corrected version, the scrollable content is wrapped in a div with a role of \"region\" and an aria-label to describe the content. The tabindex attribute is also added to make the content focusable by keyboard.",
+  "div_div_div_ol": "The issue with the code snippet is that the scrollable content inside the `<ol>` element is not accessible by keyboard users. \n\nHere is the corrected version of the code snippet that includes accessibility improvements:\n\n<div role=\"region\" aria-label=\"Scrollable Content\">\n  <div>\n    <div></div>\n    <ol tabindex=\"0\">\n      <li>Item 1</li>\n      <li>Item 2</li>\n      <li>Item 3</li>\n    </ol>\n  </div>\n</div>\n\nIn the corrected version, we have added a `role` attribute to the outermost `<div>` element to indicate that it is a region of content that can be scrolled. We have also added an `aria-label` attribute to provide a descriptive label for the region.\n\nInside the region, we have added a `tabindex` attribute to the `<ol>` element to make it focusable by keyboard users. This allows them to scroll through the list using arrow keys or other keyboard commands. We have also added some sample list items for demonstration purposes."
 }