Add svg-img-alt.json aria-required-attr.json aria-allowed-role.json a…

…ria-allowed-attr.json scrollable-region-focusable.json aria-required-children.json select-name.json aria-required-parent.json aria-roles.json landmark-unique.json autocomplete-valid.json presentation-role-conflict.json

results/aria-allowed-attr.json

@@ -27,5 +27,10 @@
   "a_aria-controls_aria-expanded": "The issue with the code snippet is that the `aria-controls` and `aria-expanded` attributes are not allowed for the `a` element's role. These attributes are only allowed for elements with roles that support them, such as `button` or `combobox`. \n\nThe correct version of the code snippet would be:\n\n<a href=\"#\" role=\"button\" aria-controls=\"gov-banner\" aria-expanded=\"true\">Link Text</a>\n\nIn this version, the `a` element's role has been changed to `button` to support the use of the `aria-controls` and `aria-expanded` attributes. Additionally, a `href` attribute has been added to ensure the link is still functional for users who do not rely on assistive technology.",
   "section_aria-expanded": "The issue with the code snippet is that the `aria-expanded` attribute is not allowed for the `section` element's role. The correct version of the code snippet should be:\n\n<`section` `role`=\"region\" `aria-expanded`=\"false\">",
   "a_role=\"button\"": "The issue with this code snippet is that the `aria-selected` attribute is not allowed for an `a` element with `role=\"button\"`. The `aria-selected` attribute is only allowed for elements with `role=\"option\"`, `role=\"checkbox\"`, `role=\"radio\"`, or `role=\"tab\"`. \n\nThe correct version of the code snippet would be: \n\n<a href=\"...\" role=\"button\" title=\"...\"></a>",
-  "section_aria-expanded_style": "The issue with the code snippet is that the `aria-expanded` attribute is not allowed for the `section` element. According to the WAI-ARIA specification, the `aria-expanded` attribute is only allowed for elements with a role of `button`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, or `treeitem`. \n\nThe correct version of the code snippet would be:\n\n<`section` `role`=\"region\" `aria-label`=\"Section Title\" `style`=\"top: 0px; position: sticky;\"> \n\nNote: The `role` attribute has been added to specify the role of the `section` element as a region, and the `aria-label` attribute has been added to provide a descriptive label for the region."
+  "section_aria-expanded_style": "The issue with the code snippet is that the `aria-expanded` attribute is not allowed for the `section` element. According to the WAI-ARIA specification, the `aria-expanded` attribute is only allowed for elements with a role of `button`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, or `treeitem`. \n\nThe correct version of the code snippet would be:\n\n<`section` `role`=\"region\" `aria-label`=\"Section Title\" `style`=\"top: 0px; position: sticky;\"> \n\nNote: The `role` attribute has been added to specify the role of the `section` element as a region, and the `aria-label` attribute has been added to provide a descriptive label for the region.",
+  "p_aria-level": "The issue with the code snippet is that `aria-level` attribute is not allowed for the `p` element's role. \n\nThe correct version of the code snippet would be: `<h1>Heading level 1</h1>` or `<h2 aria-level=\"1\">Heading level 1</h2>` depending on the context and content of the element.",
+  "span_aria-required": "The issue with the code snippet is that the `aria-required` attribute is not allowed for a `span` element. The `aria-required` attribute is only allowed for form elements such as `input`, `select`, and `textarea`.\n\nThe correct version of the code snippet would be to use a form element that supports the `aria-required` attribute, or to use a different ARIA attribute that is appropriate for the `span` element's role. For example, if the `span` element is being used as a label for an input field, the `aria-labelledby` attribute could be used instead.",
+  "td_role=\"button\"": "The issue with the code snippet is that `aria-selected` attribute is not allowed for the `button` role. The correct version of the code snippet is:\n\n<td aria-label=\"...\" role=\"button\" style=\"width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;\" tabindex=\"-1\"><div></div></td>\n\nNote that `aria-selected` attribute has been removed.",
+  "li_role=\"presentation\"": "The issue with the code snippet is that the `aria-controls`, `aria-hidden`, and `aria-selected` attributes are not allowed for the `role=\"presentation\"` element. These attributes are only allowed for certain roles such as `tab`, `treeitem`, and `tabpanel`. \n\nThe correct version of the code snippet would be:\n\n<li role=\"none presentation\"><button role=\"button\" tabindex=\"0\" type=\"button\"></button></li>\n\nIn this version, the `aria-controls`, `aria-hidden`, and `aria-selected` attributes have been removed and the `role` attribute has been updated to `none presentation`, which allows the element to be treated as a presentation role but without the additional ARIA attributes.",
+  "div_aria-checked": "The issue with this code snippet is that the `aria-checked` attribute is not allowed for the `div` element's role. The `aria-checked` attribute is typically used for checkboxes and radio buttons. \n\nThe correct version of the code snippet would be to either change the `div` element's role to a checkbox or radio button, or to remove the `aria-checked` attribute altogether if it is not necessary for the element's functionality."
 }

results/aria-allowed-role.json

@@ -39,5 +39,8 @@
   "label_role=\"button\"": "The issue with the code snippet is that the `role` attribute is set to \"button\", which is inappropriate for a `label` element. The correct value for the `role` attribute in this case should be \"label\". \n\nCorrected code snippet: <`label` `aria-label`=\"...\" `for`=\"top-nav-input-checkbox\" `role`=\"label\" `tabindex`=\"0\">",
   "li_role=\"article\"": "The issue with the code snippet is that the role attribute is set to \"article\" which is inappropriate for an `li` element. The correct version of the code snippet should have the role attribute set to \"listitem\" which is appropriate for `li` elements. The corrected code snippet is: <`li` `lang`=\"en\" `role`=\"listitem\">",
   "li_role=\"navigation\"": "The issue with the code snippet is that the value of the `role` attribute should be \"menu\" instead of \"navigation\" for a list element (`li`) that represents a menu. The correct version of the code snippet should be: <`li` `role`=\"menu\">",
-  "button_role=\"tooltip\"": "The issue with the code snippet is that the value of the `role` attribute is inappropriate. The `role` attribute is used to define the semantic meaning of an element for assistive technologies and should only be used with appropriate values. In this case, the value \"tooltip\" is not a valid value for the `role` attribute of a button element.\n\nThe correct version of the code snippet should be: `<button aria-describedby=\"tooltip\">`. Here, we are using the `aria-describedby` attribute to associate the button with a tooltip element on the page. This will ensure that assistive technologies can properly convey the purpose of the button to users."
+  "button_role=\"tooltip\"": "The issue with the code snippet is that the value of the `role` attribute is inappropriate. The `role` attribute is used to define the semantic meaning of an element for assistive technologies and should only be used with appropriate values. In this case, the value \"tooltip\" is not a valid value for the `role` attribute of a button element.\n\nThe correct version of the code snippet should be: `<button aria-describedby=\"tooltip\">`. Here, we are using the `aria-describedby` attribute to associate the button with a tooltip element on the page. This will ensure that assistive technologies can properly convey the purpose of the button to users.",
+  "section_role=\"region\"": "The issue with the code snippet is that the value of the role attribute is not appropriate for the element. The \"region\" role should only be used for elements that define a large perceivable section of content, such as a main content area or a sidebar. For a section element, the appropriate role would be \"region\" only if it defines a significant portion of the page content.\n\nThe correct version of the code snippet would be:\n\n<section role=\"region\" aria-label=\"Insert appropriate label here\"> \n\nBy adding an aria-label attribute, the purpose of the section element is made clear to assistive technology users. This ensures that the content is accessible to all users.",
+  "header_role=\"button\"": "The issue with the code snippet is that the `role` attribute has been set to \"button\", which is inappropriate for a `header` element. The correct version of the code snippet should have the `role` attribute set to \"banner\" or \"heading\", depending on the context. For example:\n\n<`header` `aria-controls`=\"content\" `aria-disabled`=\"false\" `aria-expanded`=\"false\" `role`=\"banner\" `tabindex`=\"0\">",
+  "footer_role=\"complementary\"": "The issue with the code snippet is that the value \"complementary\" is not appropriate for the role attribute of a footer element. According to the W3C Accessibility Guidelines, the role attribute of a footer element should be set to \"contentinfo\" to indicate that it contains information about the document such as authorship, copyright, or contact information.\n\nThe correct version of the code snippet should be:\n\n<footer role=\"contentinfo\">"
 }

results/aria-required-attr.json

@@ -5,5 +5,6 @@
   "input_role=\"checkbox\"": "The issue with the code snippet is that the `input` element with `role` \"checkbox\" is missing the required ARIA attribute `aria-checked`. \n\nThe correct version of the code snippet would be:\n\n<input role=\"checkbox\" type=\"button\" aria-checked=\"false\"> \n\nNote: `aria-checked` should be set to \"true\" or \"false\" depending on whether the checkbox is checked or not.",
   "div_role=\"slider\"": "The issue with the code snippet is that it is missing the `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes, which are required for a slider role. \n\nThe corrected version of the code snippet is: \n\n<`div` `aria-orientation`=\"horizontal\" `role`=\"slider\" `tabindex`=\"0\" `aria-valuemin`=\"0\" `aria-valuemax`=\"100\" `aria-valuenow`=\"50\">",
   "input_role=\"radio\"": "The issue with the code snippet is that the `input` element has an ARIA role of \"radio\" but does not have the required ARIA attribute \"aria-checked\" to indicate whether it is selected or not. The correct version of the code snippet should be:\n\n<input role=\"radio\" tabindex=\"0\" type=\"button\" aria-checked=\"false\"> \n\nor\n\n<input role=\"radio\" tabindex=\"0\" type=\"button\" aria-checked=\"true\"> (if the button is initially selected)",
-  "input_role=\"combobox\"": "The issue with the given code snippet is that it has a `role` attribute with the value of \"combobox\" but it is missing the required ARIA attributes for a combobox, such as `aria-autocomplete`, `aria-expanded`, and `aria-controls`. \n\nThe correct version of the code snippet with the required ARIA attributes would be:\n\n<`input` `name`=\"...\" `role`=\"combobox\" `aria-autocomplete`=\"list\" `aria-expanded`=\"false\" `aria-controls`=\"listbox1\" `style`=\"background-color:#3892d3;color:White;\" `tabindex`=\"-1\" `type`=\"text\" `value`=\"...\">\n\nNote: The values for `aria-autocomplete`, `aria-expanded`, and `aria-controls` may vary depending on the specific implementation."
+  "input_role=\"combobox\"": "The issue with the given code snippet is that it has a `role` attribute with the value of \"combobox\" but it is missing the required ARIA attributes for a combobox, such as `aria-autocomplete`, `aria-expanded`, and `aria-controls`. \n\nThe correct version of the code snippet with the required ARIA attributes would be:\n\n<`input` `name`=\"...\" `role`=\"combobox\" `aria-autocomplete`=\"list\" `aria-expanded`=\"false\" `aria-controls`=\"listbox1\" `style`=\"background-color:#3892d3;color:White;\" `tabindex`=\"-1\" `type`=\"text\" `value`=\"...\">\n\nNote: The values for `aria-autocomplete`, `aria-expanded`, and `aria-controls` may vary depending on the specific implementation.",
+  "div_role=\"scrollbar\"": "The issue with the code snippet is that it contains an ARIA role of \"scrollbar\" but does not have all the required ARIA attributes for that role. The correct version of the code snippet should include the following ARIA attributes: aria-valuemin, aria-valuemax, aria-valuenow, and aria-orientation. \n\nCorrected code snippet: \n\n`<div role=\"scrollbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\" aria-orientation=\"horizontal\">`"
 }

results/aria-required-children.json

@@ -9,5 +9,7 @@
   "ul_role=\"menu\"": "The issue in this code snippet is that the `role=\"menu\"` requires its child elements to have the `role=\"menuitem\"`.\n\nHere is the correct version of the code snippet:\n\n```html\n<ul role=\"menu\">\n  <li role=\"menuitem\"><a href=\"...\"></a></li>\n  <li role=\"menuitem\"></li>\n</ul>\n```\n\nIn this corrected snippet, I've added the `role=\"menuitem\"` to each `<li>` element, as required by the parent element with `role=\"menu\"`.",
   "table_role=\"tablist\"": "The issue in the code snippet is that the table element has an ARIA role of \"tablist\", but it does not contain the required child roles for \"tablist\", which are \"tab\" elements.\n\nHere's the corrected version of the code snippet:\n\n```html\n<div role=\"tablist\">\n  <table>\n    <tr>\n      <th role=\"tab\" id=\"tab1\" aria-controls=\"tabpanel1\" aria-selected=\"true\">Tab 1</th>\n      <th role=\"tab\" id=\"tab2\" aria-controls=\"tabpanel2\">Tab 2</th>\n    </tr>\n  </table>\n</div>\n<div role=\"tabpanel\" id=\"tabpanel1\" aria-labelledby=\"tab1\">\n  <!-- Tab panel content for Tab 1 -->\n</div>\n<div role=\"tabpanel\" id=\"tabpanel2\" aria-labelledby=\"tab2\" hidden>\n  <!-- Tab panel content for Tab 2 -->\n</div>\n```\n\nIn this corrected version, I have wrapped the table element with a div that has a role of \"tablist\". Inside the table, I added \"tab\" roles to the table header (th) elements, along with the required ARIA attributes for tabs. Finally, I added two div elements with \"tabpanel\" roles and their respective ARIA attributes to associate them with the corresponding tabs.",
   "div_role=\"table\"": "The issue with the code snippet is that the ARIA role \"table\" requires child roles such as \"row\" and \"cell\" to be properly accessible. The correct version of the code snippet should include these child roles, like so:\n\n<div role=\"table\">\n  <div role=\"row\">\n    <div role=\"cell\">Content</div>\n    <div role=\"cell\">More content</div>\n  </div>\n  <div role=\"row\">\n    <div role=\"cell\">Even more content</div>\n    <div role=\"cell\">Last bit of content</div>\n  </div>\n</div>",
-  "div_role=\"menu\"": "The issue with the code snippet is that the ARIA role \"menu\" requires child roles such as \"menuitem\" or \"menuitemcheckbox\" to ensure accessibility. The correct version of the code snippet should include the appropriate child roles, like this:\n\n<`div` `aria-labelledby`=\"...\" `role`=\"menu\">\n  <`div` `role`=\"menuitem\">Item 1</`div`>\n  <`div` `role`=\"menuitem\">Item 2</`div`>\n  <`div` `role`=\"menuitem\">Item 3</`div`>\n</`div`>"
+  "div_role=\"menu\"": "The issue with the code snippet is that the ARIA role \"menu\" requires child roles such as \"menuitem\" or \"menuitemcheckbox\" to ensure accessibility. The correct version of the code snippet should include the appropriate child roles, like this:\n\n<`div` `aria-labelledby`=\"...\" `role`=\"menu\">\n  <`div` `role`=\"menuitem\">Item 1</`div`>\n  <`div` `role`=\"menuitem\">Item 2</`div`>\n  <`div` `role`=\"menuitem\">Item 3</`div`>\n</`div`>",
+  "tr_role=\"row\"": "Issue: The `tr` element has been given a `role` attribute of \"row\", but it does not contain any child elements with the required ARIA roles.\n\nCorrect code snippet:\n\n<tr role=\"row\">\n  <td role=\"cell\">Cell 1</td>\n  <td role=\"cell\">Cell 2</td>\n  <td role=\"cell\">Cell 3</td>\n</tr>\n\nExplanation: In order to properly define a table row with ARIA, the `tr` element should have a `role` attribute of \"row\" and each child `td` element should have a `role` attribute of \"cell\". This helps screen readers and other assistive technologies to properly identify and navigate the table structure.",
+  "ng-select_role=\"listbox\"": "The issue with the code snippet is that the ARIA role \"listbox\" requires the child role \"option\" to be present. Without the \"option\" role, the listbox will not be properly accessible to users with assistive technology.\n\nThe correct version of the code snippet should include the \"option\" role as follows:\n\n<ng-select aria-label=\"...\" role=\"listbox\" tabindex=\"-1\">\n  <ng-option role=\"option\" value=\"option1\">Option 1</ng-option>\n  <ng-option role=\"option\" value=\"option2\">Option 2</ng-option>\n  <ng-option role=\"option\" value=\"option3\">Option 3</ng-option>\n</ng-select>"
 }

results/aria-required-parent.json

@@ -4,5 +4,6 @@
   "div_role=\"tab\"": "The issue in the code snippet is that the ARIA role \"tab\" should be contained within an element with the role \"tablist\". \n\nHere's the correct version of the code snippet:\n\n```\n<div role=\"tablist\">\n  <div aria-controls=\"pagecontent_0_overlap_0_4463\" role=\"tab\">\n    <!-- Tab content -->\n  </div>\n</div>\n```",
   "a_role=\"menuitemradio\"": "The issue in the given code snippet is that the \"menuitemradio\" role requires a parent element with the \"menu\" or \"menubar\" role. To fix the issue, you can wrap the \"a\" element inside an element with the \"menu\" role. Here is the corrected version of the code snippet:\n\n```\n<div role=\"menu\">\n  <a aria-checked=\"true\" href=\"...\" role=\"menuitemradio\"></a>\n</div>\n```",
   "ytd-mini-guide-entry-renderer_role=\"tab\"": "The issue in the code snippet is that the ARIA role \"tab\" is not contained within its required parent role \"tablist\". To fix this, you need to add a parent element with the role \"tablist\". Here's the correct version of the code snippet:\n\n```\n<div role=\"tablist\">\n  <ytd-mini-guide-entry-renderer aria-label=\"...\" aria-selected=\"true\" role=\"tab\" tabindex=\"0\">\n  </ytd-mini-guide-entry-renderer>\n</div>\n```\n\nIn this corrected version, the \"ytd-mini-guide-entry-renderer\" element with the role \"tab\" is now properly contained within a parent element with the role \"tablist\".",
-  "li_role=\"menuitem\"": "The issue in the given code snippet is that the ARIA role \"menuitem\" should be contained within a parent element with the role \"menu\". \n\nHere's the correct version of the code snippet:\n\n```html\n<ul role=\"menu\">\n  <li role=\"menuitem\"></li>\n</ul>\n```\n\nIn this corrected version, we have added a parent element with the \"menu\" role, which properly contains the \"menuitem\" role."
+  "li_role=\"menuitem\"": "The issue in the given code snippet is that the ARIA role \"menuitem\" should be contained within a parent element with the role \"menu\". \n\nHere's the correct version of the code snippet:\n\n```html\n<ul role=\"menu\">\n  <li role=\"menuitem\"></li>\n</ul>\n```\n\nIn this corrected version, we have added a parent element with the \"menu\" role, which properly contains the \"menuitem\" role.",
+  "sl-tree-item_role=\"treeitem\"": "The issue with this code snippet is that the `treeitem` role should be contained by a `group` or `tree` role. The correct version of the code snippet would be:\n\n<`div` `role`=\"group\">\n  <`sl-tree-item` `aria-disabled`=\"false\" `aria-selected`=\"false\" `role`=\"treeitem\" `tabindex`=\"-1\">\n</div> \n\nBy wrapping the `treeitem` role in a `group` role, it ensures that the ARIA tree structure is properly defined and accessible to assistive technologies."
 }