Add aria-allowed-attr.json scrollable-region-focusable.json select-na…

…me.json svg-img-alt.json aria-allowed-role.json

results/aria-allowed-attr.json

@@ -75,5 +75,6 @@
   "a_aria-expanded_style": "The issue with the code snippet is that the `aria-expanded` attribute is not allowed for the `a` element's role. The correct version of the code snippet would be:\n\n<a role=\"button\" aria-expanded=\"true\" style=\"text-transform:none;\"></a>\n\nBy adding the `role=\"button\"` attribute, it allows the use of the `aria-expanded` attribute.",
   "a_aria-controls_aria-selected_title": "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:\n\n<a aria-controls=\"tab-search\" role=\"tab\" tabindex=\"0\" title=\"...\" aria-selected=\"false\"></a>\n\nBy adding the `role=\"tab\"` attribute, we specify the role of the element and allow the use of `aria-selected`. Additionally, we add `tabindex=\"0\"` to make the element focusable and allow keyboard navigation.",
   "li_role=\"link\"": "The issue with this code snippet is that the `aria-controls` and `aria-selected` attributes are not allowed for an `li` element with a `role` of \"link\". \n\nThe correct version of the code snippet would be:\n\n<li role=\"button\" aria-controls=\"mmid-cpf-overview\" aria-selected=\"false\">",
-  "li_role=\"button\"": "The issue with the code snippet is that the `aria-controls` and `aria-selected` attributes are not allowed for the `role` of \"button\". \n\nThe correct version of the code snippet would be:\n\n<`li` `role`=\"button\" `tabindex`=\"0\"> with `aria-controls` and `aria-selected` attributes removed."
+  "li_role=\"button\"": "The issue with the code snippet is that the `aria-controls` and `aria-selected` attributes are not allowed for the `role` of \"button\". \n\nThe correct version of the code snippet would be:\n\n<`li` `role`=\"button\" `tabindex`=\"0\"> with `aria-controls` and `aria-selected` attributes removed.",
+  "p_aria-level_b": "The issue with this code snippet is that the `aria-level` attribute is not allowed for the `<p>` element's role. The `aria-level` attribute is only allowed for heading elements (`<h1>` - `<h6>`). \n\nThe correct version of the code snippet would be: `<p><b aria-level=\"2\"></b></p>`"
 }

results/aria-allowed-role.json

@@ -106,5 +106,6 @@
   "label_role=\"heading\"": "The issue with the code snippet is that the `role` attribute value of \"heading\" is not appropriate for a `label` element. The correct `role` attribute value for a `label` element is \"label\". The correct version of the code snippet is: <`label` `aria-label`=\"...\" `role`=\"label\"></label>",
   "li_role=\"link\"": "The issue with this code snippet is that the `role` attribute is set to \"link\" but it is being used on an `<li>` element which is not a valid role for this element. The correct role for an `<li>` element is \"listitem\". \n\nThe correct version of the code snippet is: `<li aria-controls=\"mmid-cpf-overview\" aria-selected=\"false\" role=\"listitem\">`",
   "aside_role=\"contentinfo\"": "The issue with the code snippet is that the value of the role attribute is inappropriate for the element type. The `<aside>` element is typically used for content that is tangentially related to the main content of the page, and should not be used as a container for contentinfo. \n\nThe correct version of the code snippet would be: `<footer role=\"contentinfo\">` This uses the `<footer>` element, which is semantically appropriate for contentinfo, and includes the correct value for the role attribute.",
-  "button_role=\"alert\"": "The issue with the code snippet is that the `role` attribute is set to \"alert\" which is not appropriate for a button element. The correct role for a button element is \"button\". The correct version of the code snippet is: <`button` `aria-atomic`=\"true\" `aria-label`=\"...\" `onclick`=\"CookieInformation.declineAllCategories()\" `role`=\"button\" `style`=\"display: flex;\" `tabindex`=\"0\"></button>"
+  "button_role=\"alert\"": "The issue with the code snippet is that the `role` attribute is set to \"alert\" which is not appropriate for a button element. The correct role for a button element is \"button\". The correct version of the code snippet is: <`button` `aria-atomic`=\"true\" `aria-label`=\"...\" `onclick`=\"CookieInformation.declineAllCategories()\" `role`=\"button\" `style`=\"display: flex;\" `tabindex`=\"0\"></button>",
+  "img_role=\"graphics-symbol\"": "The issue with the code snippet is that the role attribute value is inappropriate. The value \"graphics-symbol\" is not a valid or appropriate value for the role attribute. The correct value for this element would be \"img\" or \"presentation\". \n\nCorrected code snippet: <`img` `alt`=\"Instagram icon\" `aria-label`=\"...\" `role`=\"img\" `src`=\"...\">"
 }

results/scrollable-region-focusable.json

@@ -28,5 +28,6 @@
   "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.",
-  "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."
+  "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.",
+  "pre_strong": "The issue with the code snippet is that it does not contain any scrollable content that can be accessed by keyboard users. It only contains an empty strong element wrapped in a pre element. \n\nA corrected version of the code snippet with scrollable content that can be accessed by keyboard users could be:\n\n<pre>\n  <div role=\"region\" aria-label=\"Scrollable Content\" tabindex=\"0\">\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel malesuada vestibulum, nisl libero bibendum velit, at consequat nibh arcu a lorem. Aliquam vel lectus ut dolor aliquet bibendum. </p>\n    <p>Phasellus in pulvinar odio. Maecenas euismod, mauris vel pharetra lacinia, ipsum nisi efficitur nibh, a vulputate velit eros vel sapien. Sed sed ligula malesuada, interdum augue at, vestibulum enim. </p>\n    <p>Etiam euismod risus et est commodo, eu ultrices velit ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent vitae tristique odio. </p>\n  </div>\n</pre>\n\nIn this corrected version, a div element with role=\"region\" and aria-label=\"Scrollable Content\" is used to contain the scrollable content. The tabindex=\"0\" attribute is used to make the div element focusable with the keyboard. Inside the div element, there are three paragraphs of lorem ipsum text. This allows keyboard users to access the scrollable content by using arrow keys or other keyboard commands."
 }

results/select-name.json

@@ -15,5 +15,6 @@
   "select_name_type": "The issue with this code snippet is that it is missing the `aria-label` or `aria-labelledby` attribute, which provides an accessible name for the select element. \n\nThe correct version of the code snippet should include one of these attributes, like so:\n<`select` `name`=\"...\" `type`=\"select\" `aria-label`=\"Accessible Name\">",
   "select_tabindex": "The issue with this code snippet is that it is missing the `aria-label` or `aria-labelledby` attribute which provides an accessible name for the select element. This can make it difficult for users with disabilities who rely on screen readers or other assistive technologies to understand the purpose of the select element.\n\nThe correct version of the code snippet would be:\n\n<select tabindex=\"0\" aria-label=\"Select an option\">\n  <option value=\"option1\">Option 1</option>\n  <option value=\"option2\">Option 2</option>\n  <option value=\"option3\">Option 3</option>\n</select>\n\nNote that the `aria-label` attribute has been added with a descriptive label for the select element. Alternatively, the `aria-labelledby` attribute could be used to reference an element on the page that provides a label for the select element.",
   "select_onclick": "The issue with this code snippet is that the select element does not have an accessible name, which means that users with disabilities who rely on screen readers or other assistive technologies may not be able to understand the purpose of the element. \n\nTo fix this issue, the select element should be given a descriptive and meaningful label using the \"aria-label\" or \"aria-labelledby\" attribute. For example:\n\n<select onclick=\"DP_jQuery_1711439840045.datepicker._clickMonthYear('#birthdate');\" aria-label=\"Select birthdate\">\n    ...\n</select>",
-  "select_language_name": "The issue with the code snippet is that the `name` attribute is not properly defined, which can lead to accessibility issues for users who rely on screen readers or other assistive technologies. \n\nThe correct version of the code snippet should include a descriptive and accessible name for the select element, like this: \n\n<`select` `language`=\"javascript\" `name`=\"language-select\" `aria-label`=\"Select a language\">"
+  "select_language_name": "The issue with the code snippet is that the `name` attribute is not properly defined, which can lead to accessibility issues for users who rely on screen readers or other assistive technologies. \n\nThe correct version of the code snippet should include a descriptive and accessible name for the select element, like this: \n\n<`select` `language`=\"javascript\" `name`=\"language-select\" `aria-label`=\"Select a language\">",
+  "select_aria-disabled": "The issue with this code snippet is that it does not have an accessible name. This means that users with disabilities who rely on screen readers or other assistive technologies may not be able to understand the purpose of the select element.\n\nTo fix this issue, the code snippet should be updated with an accessible name using the `aria-label` or `aria-labelledby` attribute. For example:\n\n<select aria-disabled=\"false\" aria-label=\"Select an option\">\n  <option value=\"option1\">Option 1</option>\n  <option value=\"option2\">Option 2</option>\n  <option value=\"option3\">Option 3</option>\n</select> \n\nIn this updated code snippet, the `aria-label` attribute provides an accessible name for the select element, which will help users with disabilities understand its purpose."
 }

results/svg-img-alt.json

@@ -3,5 +3,6 @@
   "svg_role": "Issue: The <svg> element has a role of \"img\" but does not have an accessible text.\n\nCorrected code snippet: <svg role=\"img\" aria-label=\"Description of the image\">",
   "svg_aria-labelledby_role_xlink": "The issue with this code snippet is that it contains an <svg> element with an aria-labelledby attribute but the accessible text is not provided. This can make the content inaccessible to users who rely on screen readers.\n\nThe correct version of the code snippet should include an aria-labelledby attribute with a corresponding ID that references a text element containing the accessible text. For example:\n\n<`svg` `aria-labelledby`=\"myLabel\" `role`=\"img\" `xlink`=\"http://www.w3.org/1999/xlink\">\n  <`desc` id=\"myLabel\">Accessible text goes here</`desc`>\n  <!-- SVG graphics go here -->\n</`svg`>",
   "svg_role_use_href": "The issue with this code snippet is that the <svg> element with the role of \"img\" does not have an accessible text. This means that users with visual impairments who rely on screen readers will not be able to understand the purpose of the image. \n\nTo fix this issue, the code snippet should be updated to include an accessible text using the aria-label attribute. The corrected code snippet is:\n\n<svg role=\"img\" aria-label=\"Avatar icon\">\n  <use href=\"#st-icon-avatar\"></use>\n</svg>",
-  "svg_aria-label_role_style": "The issue with this code snippet is that it only includes an aria-label attribute for accessibility, but it does not provide any accessible text for the img, graphics-document or graphics-symbol-role elements. This means that users who rely on assistive technology to access the content may not be able to understand the meaning of these elements.\n\nThe correct version of the code snippet should include an accessible text description for each img, graphics-document or graphics-symbol-role element, using the aria-labelledby or aria-describedby attribute. For example:\n\n<`svg` `role`=\"img\" `style`=\"font-family: Roboto, Arial, sans-serif; font-size: 12px;\">\n  <`image` `xlink:href`=\"image.png\" `alt`=\"Description of the image for accessibility\" />\n  <`desc` `id`=\"img-desc\">Description of the image for accessibility</`desc`>\n</`svg`>\n\nIn this updated code snippet, the `image` element includes an `alt` attribute with a description of the image for accessibility. The `desc` element provides an additional accessible text description for the image, using the `id` attribute to link it to the `image` element using the `aria-describedby` attribute. This ensures that users who rely on assistive technology can access the content and understand its meaning."
+  "svg_aria-label_role_style": "The issue with this code snippet is that it only includes an aria-label attribute for accessibility, but it does not provide any accessible text for the img, graphics-document or graphics-symbol-role elements. This means that users who rely on assistive technology to access the content may not be able to understand the meaning of these elements.\n\nThe correct version of the code snippet should include an accessible text description for each img, graphics-document or graphics-symbol-role element, using the aria-labelledby or aria-describedby attribute. For example:\n\n<`svg` `role`=\"img\" `style`=\"font-family: Roboto, Arial, sans-serif; font-size: 12px;\">\n  <`image` `xlink:href`=\"image.png\" `alt`=\"Description of the image for accessibility\" />\n  <`desc` `id`=\"img-desc\">Description of the image for accessibility</`desc`>\n</`svg`>\n\nIn this updated code snippet, the `image` element includes an `alt` attribute with a description of the image for accessibility. The `desc` element provides an additional accessible text description for the image, using the `id` attribute to link it to the `image` element using the `aria-describedby` attribute. This ensures that users who rely on assistive technology can access the content and understand its meaning.",
+  "svg_ariahidden_role": "The issue with the code snippet is that it does not have an accessible text for the <svg> element. This can make it difficult for visually impaired users to understand the content. \n\nThe correct version of the code snippet should include an accessible text using the `aria-label` attribute. For example: \n\n<svg aria-hidden=\"true\" role=\"img\" aria-label=\"Description of the image\">"
 }