run_set stringclasses 1
value | model stringclasses 3
values | route stringclasses 3
values | skill stringclasses 11
values | question_id stringclasses 9
values | with_skill bool 2
classes | epoch int64 1 3 | question stringclasses 65
values | criteria stringclasses 66
values | answer stringlengths 40 6.72k | passed bool 2
classes | grader_detail stringlengths 31 212 | checks stringclasses 65
values | error stringclasses 1
value |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B01 | true | 1 | Write a Twig template for a main navigation region. There is only one nav on the page. | A <nav> element without role='navigation'. Since there is only one nav, aria-label is also optional. Uses {{ attributes }} for Drupal's Attribute object pattern. | Here's an example Twig template for a main navigation region:
```twig
{#
/**
* @file
* Theme override for the main navigation.
*
* Available variables:
* - nav_items: An array of navigation menu items. Each item contains:
* - url: The URL of the menu item.
* - title: The title of the menu item.
* - is_ac... | true | must_contain_any: found: ['<nav'] | [{"kind": "must_contain_any", "values": ["<nav", "{{ attributes }}"]}, {"kind": "must_not_contain", "values": ["role=\"navigation\">\n", "<nav role=\"navigation\"", "<nav role='navigation'"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B01 | true | 2 | Write a Twig template for a main navigation region. There is only one nav on the page. | A <nav> element without role='navigation'. Since there is only one nav, aria-label is also optional. Uses {{ attributes }} for Drupal's Attribute object pattern. | Here's an example Twig template for a main navigation region, following the best practices outlined in the `drupal-a11y-dom` guidance:
```twig
{# main-navigation.html.twig #}
<nav aria-label="{{ 'Main'|t }}">
<ul>
{% for item in items %}
<li{{ item.in_active_trail ? ' aria-current="page"' : '' }}>
... | true | must_contain_any: found: ['<nav'] | [{"kind": "must_contain_any", "values": ["<nav", "{{ attributes }}"]}, {"kind": "must_not_contain", "values": ["role=\"navigation\">\n", "<nav role=\"navigation\"", "<nav role='navigation'"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B01 | true | 3 | Write a Twig template for a main navigation region. There is only one nav on the page. | A <nav> element without role='navigation'. Since there is only one nav, aria-label is also optional. Uses {{ attributes }} for Drupal's Attribute object pattern. | Here's an example Twig template for a main navigation region in Drupal:
```twig
{#
# Renders the main navigation region.
#
# Available variables:
# - menu_items: An array of menu items to be rendered.
#}
<nav aria-label="{{ 'Main navigation'|t }}">
<ul>
{% for item in menu_items %}
<li>
<a hr... | true | must_contain_any: found: ['<nav'] | [{"kind": "must_contain_any", "values": ["<nav", "{{ attributes }}"]}, {"kind": "must_not_contain", "values": ["role=\"navigation\">\n", "<nav role=\"navigation\"", "<nav role='navigation'"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B01 | false | 1 | Write a Twig template for a main navigation region. There is only one nav on the page. | A <nav> element without role='navigation'. Since there is only one nav, aria-label is also optional. Uses {{ attributes }} for Drupal's Attribute object pattern. | Here's an example Twig template for a main navigation region:
```twig
<nav class="main-navigation">
<div class="container">
<div class="logo">
<a href="{{ path('home') }}">
<img src="{{ asset('images/logo.svg') }}" alt="{{ site_name }}">
</a>
</div>
<ul class="nav-menu">
{% for ... | true | must_contain_any: found: ['<nav'] | [{"kind": "must_contain_any", "values": ["<nav", "{{ attributes }}"]}, {"kind": "must_not_contain", "values": ["role=\"navigation\">\n", "<nav role=\"navigation\"", "<nav role='navigation'"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B01 | false | 2 | Write a Twig template for a main navigation region. There is only one nav on the page. | A <nav> element without role='navigation'. Since there is only one nav, aria-label is also optional. Uses {{ attributes }} for Drupal's Attribute object pattern. | Here's a Twig template for a main navigation region:
```twig
{% if main_navigation is defined and main_navigation is not empty %}
<nav class="main-navigation">
<div class="container">
<ul class="main-navigation__list">
{% for item in main_navigation %}
<li class="main-navigation__item">
... | true | must_contain_any: found: ['<nav'] | [{"kind": "must_contain_any", "values": ["<nav", "{{ attributes }}"]}, {"kind": "must_not_contain", "values": ["role=\"navigation\">\n", "<nav role=\"navigation\"", "<nav role='navigation'"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B01 | false | 3 | Write a Twig template for a main navigation region. There is only one nav on the page. | A <nav> element without role='navigation'. Since there is only one nav, aria-label is also optional. Uses {{ attributes }} for Drupal's Attribute object pattern. | Here's an example of a Twig template for a main navigation region:
```twig
<nav class="main-nav">
<ul>
{% for item in nav_items %}
<li class="{{ item.active ? 'active' }}">
<a href="{{ item.url }}">{{ item.label }}</a>
</li>
{% endfor %}
</ul>
</nav>
```
In this example, the main navig... | true | must_contain_any: found: ['<nav'] | [{"kind": "must_contain_any", "values": ["<nav", "{{ attributes }}"]}, {"kind": "must_not_contain", "values": ["role=\"navigation\">\n", "<nav role=\"navigation\"", "<nav role='navigation'"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B02 | true | 1 | I need to hide a skip-link visually but keep it available to screen readers. What class should I use in a Drupal theme? | Use .visually-hidden from Drupal core. Do not redefine it locally or use display:none. | To hide a skip link visually but keep it available to screen readers in a Drupal theme, you should use the `visually-hidden` class.
The `visually-hidden` class is provided by Drupal core and is the recommended way to hide content from sighted users while keeping it accessible to screen readers.
Here's an example of h... | true | must_contain_any: found: ['visually-hidden'] | [{"kind": "must_contain_any", "values": ["visually-hidden"]}, {"kind": "must_not_contain", "values": ["display: none;", "display:none;", "visibility: hidden;"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B02 | true | 2 | I need to hide a skip-link visually but keep it available to screen readers. What class should I use in a Drupal theme? | Use .visually-hidden from Drupal core. Do not redefine it locally or use display:none. | To hide a skip link visually but keep it available to screen readers in a Drupal theme, you should use the `.visually-hidden` class.
The `.visually-hidden` class is provided by Drupal core and is the correct way to hide content from sighted users while keeping it accessible to screen readers. This is the appropriate u... | true | must_contain_any: found: ['visually-hidden'] | [{"kind": "must_contain_any", "values": ["visually-hidden"]}, {"kind": "must_not_contain", "values": ["display: none;", "display:none;", "visibility: hidden;"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B02 | true | 3 | I need to hide a skip-link visually but keep it available to screen readers. What class should I use in a Drupal theme? | Use .visually-hidden from Drupal core. Do not redefine it locally or use display:none. | To hide a skip link visually while keeping it available to screen readers, you should use the `.visually-hidden` class provided by Drupal core.
The `.visually-hidden` class is part of Drupal's "hide-content-properly" utilities, and it hides the element from sighted users while keeping it accessible to screen readers.
... | true | must_contain_any: found: ['visually-hidden'] | [{"kind": "must_contain_any", "values": ["visually-hidden"]}, {"kind": "must_not_contain", "values": ["display: none;", "display:none;", "visibility: hidden;"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B02 | false | 1 | I need to hide a skip-link visually but keep it available to screen readers. What class should I use in a Drupal theme? | Use .visually-hidden from Drupal core. Do not redefine it locally or use display:none. | In Drupal, you can use the `visually-hidden` class to hide a skip-link visually while keeping it available to screen readers. This class is part of the Drupal base theme and is a recommended way to achieve this functionality.
Here's an example of how you can use the `visually-hidden` class in your Drupal theme:
```ht... | true | must_contain_any: found: ['visually-hidden'] | [{"kind": "must_contain_any", "values": ["visually-hidden"]}, {"kind": "must_not_contain", "values": ["display: none;", "display:none;", "visibility: hidden;"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B02 | false | 2 | I need to hide a skip-link visually but keep it available to screen readers. What class should I use in a Drupal theme? | Use .visually-hidden from Drupal core. Do not redefine it locally or use display:none. | To hide a skip-link visually while keeping it available to screen readers in a Drupal theme, you can use the `visually-hidden` class.
The `visually-hidden` class is a CSS class that is commonly used to hide content from sighted users, but it remains accessible to screen readers. This is a best practice for making your... | true | must_contain_any: found: ['visually-hidden'] | [{"kind": "must_contain_any", "values": ["visually-hidden"]}, {"kind": "must_not_contain", "values": ["display: none;", "display:none;", "visibility: hidden;"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B02 | false | 3 | I need to hide a skip-link visually but keep it available to screen readers. What class should I use in a Drupal theme? | Use .visually-hidden from Drupal core. Do not redefine it locally or use display:none. | In Drupal, you can use the `visually-hidden` class to hide a skip-link visually while keeping it available to screen readers. This class is provided by the Drupal core CSS and is commonly used for accessibility purposes.
Here's an example of how you can use the `visually-hidden` class in your Drupal theme:
```html
<a... | true | must_contain_any: found: ['visually-hidden'] | [{"kind": "must_contain_any", "values": ["visually-hidden"]}, {"kind": "must_not_contain", "values": ["display: none;", "display:none;", "visibility: hidden;"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B03 | true | 1 | Write CSS for a 16×16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8. | CSS that expands the hit area to at least 24×24 CSS pixels using min-width/min-height and padding, without enlarging the visible icon. | Here's the CSS for a 16x16 icon-only toolbar button that meets the WCAG 2.2 SC 2.5.8 target size requirement:
```css
.toolbar__icon-button {
/* The icon is 16×16, but the button hit area is 24×24. */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
pa... | true | must_contain_any: found: ['24px', 'min-width', 'min-height'] | [{"kind": "must_contain_any", "values": ["24px", "min-width", "min-height"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B03 | true | 2 | Write CSS for a 16×16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8. | CSS that expands the hit area to at least 24×24 CSS pixels using min-width/min-height and padding, without enlarging the visible icon. | Here's the CSS for a 16x16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8 Target Size (Minimum):
```css
.toolbar__icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 10px;
border: none;
background-color: transparent;
color: inhe... | false | must_contain_any: missing all of: ['24px', 'min-width', 'min-height'] | [{"kind": "must_contain_any", "values": ["24px", "min-width", "min-height"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B03 | true | 3 | Write CSS for a 16×16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8. | CSS that expands the hit area to at least 24×24 CSS pixels using min-width/min-height and padding, without enlarging the visible icon. | Here's the CSS for a 16×16 icon-only toolbar button that meets the WCAG 2.2 SC 2.5.8 target size requirement:
```css
.toolbar__icon-button {
/* The icon is 16×16, but the button hit area is 24×24. */
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 4... | true | must_contain_any: found: ['24px'] | [{"kind": "must_contain_any", "values": ["24px", "min-width", "min-height"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B03 | false | 1 | Write CSS for a 16×16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8. | CSS that expands the hit area to at least 24×24 CSS pixels using min-width/min-height and padding, without enlarging the visible icon. | To create a 16x16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8, you can use the following CSS:
```css
.toolbar-button {
width: 16px;
height: 16px;
display: inline-block;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
padding: 4px;
text-align: center... | false | must_contain_any: missing all of: ['24px', 'min-width', 'min-height'] | [{"kind": "must_contain_any", "values": ["24px", "min-width", "min-height"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B03 | false | 2 | Write CSS for a 16×16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8. | CSS that expands the hit area to at least 24×24 CSS pixels using min-width/min-height and padding, without enlarging the visible icon. | To create a 16×16 icon-only toolbar button that meets the WCAG 2.2 SC 2.5.8 (Target Size) requirements, you can use the following CSS:
```css
/* Toolbar Button */
.toolbar-button {
width: 48px; /* 16px icon + 16px padding */
height: 48px; /* 16px icon + 16px padding */
padding: 16px; /* 16px padding around the i... | false | must_contain_any: missing all of: ['24px', 'min-width', 'min-height'] | [{"kind": "must_contain_any", "values": ["24px", "min-width", "min-height"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B03 | false | 3 | Write CSS for a 16×16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8. | CSS that expands the hit area to at least 24×24 CSS pixels using min-width/min-height and padding, without enlarging the visible icon. | To create a 16x16 icon-only toolbar button that meets WCAG 2.2 SC 2.5.8 (Target Size), you can use the following CSS:
```css
.toolbar-button {
width: 48px; /* 16px icon + 16px padding on each side */
height: 48px; /* 16px icon + 16px padding on each side */
display: inline-block;
background-color: #f1f1f1;
b... | false | must_contain_any: missing all of: ['24px', 'min-width', 'min-height'] | [{"kind": "must_contain_any", "values": ["24px", "min-width", "min-height"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B04 | true | 1 | Write CSS for a component that has animations, ensuring it respects user motion preferences. | CSS that gates transitions/animations inside @media (prefers-reduced-motion: no-preference) or removes/shortens them inside (prefers-reduced-motion: reduce). | Here's an example of CSS for a component that includes animations, respecting the user's motion preferences:
```css
/* Default styles */
.animated-component {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.animated-component.is-visible {
opacity: 1;
transform... | true | must_contain_any: found: ['prefers-reduced-motion'] | [{"kind": "must_contain_any", "values": ["prefers-reduced-motion"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B04 | true | 2 | Write CSS for a component that has animations, ensuring it respects user motion preferences. | CSS that gates transitions/animations inside @media (prefers-reduced-motion: no-preference) or removes/shortens them inside (prefers-reduced-motion: reduce). | Here's an example of how you can write CSS for a component that has animations, while respecting the user's motion preferences:
```css
/* Default styles */
.my-component {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.my-component.is-visible {
opacity: 1;
tr... | true | must_contain_any: found: ['prefers-reduced-motion'] | [{"kind": "must_contain_any", "values": ["prefers-reduced-motion"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B04 | true | 3 | Write CSS for a component that has animations, ensuring it respects user motion preferences. | CSS that gates transitions/animations inside @media (prefers-reduced-motion: no-preference) or removes/shortens them inside (prefers-reduced-motion: reduce). | Sure, here's an example of how you can write CSS for a component that has animations, while respecting user motion preferences:
```css
/* Default styles */
.animated-component {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s, transform 0.5s;
}
.animated-component.visible {
opacity: 1;
tra... | true | must_contain_any: found: ['prefers-reduced-motion'] | [{"kind": "must_contain_any", "values": ["prefers-reduced-motion"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B04 | false | 1 | Write CSS for a component that has animations, ensuring it respects user motion preferences. | CSS that gates transitions/animations inside @media (prefers-reduced-motion: no-preference) or removes/shortens them inside (prefers-reduced-motion: reduce). | Sure, here's an example of CSS for a component that has animations and respects user motion preferences:
```css
/* Base styles */
.my-component {
width: 200px;
height: 200px;
background-color: #007bff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-... | true | must_contain_any: found: ['prefers-reduced-motion'] | [{"kind": "must_contain_any", "values": ["prefers-reduced-motion"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B04 | false | 2 | Write CSS for a component that has animations, ensuring it respects user motion preferences. | CSS that gates transitions/animations inside @media (prefers-reduced-motion: no-preference) or removes/shortens them inside (prefers-reduced-motion: reduce). | Sure, here's an example of CSS for a component that has animations and respects user motion preferences:
```css
/* Component styles */
.my-component {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: cent... | true | must_contain_any: found: ['prefers-reduced-motion'] | [{"kind": "must_contain_any", "values": ["prefers-reduced-motion"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B04 | false | 3 | Write CSS for a component that has animations, ensuring it respects user motion preferences. | CSS that gates transitions/animations inside @media (prefers-reduced-motion: no-preference) or removes/shortens them inside (prefers-reduced-motion: reduce). | To respect user motion preferences when creating animations in CSS, you can use the `prefers-reduced-motion` media query. This query allows you to detect if the user has enabled the "Reduce motion" accessibility setting on their device, and adjust your animations accordingly.
Here's an example of a CSS component with ... | true | must_contain_any: found: ['prefers-reduced-motion'] | [{"kind": "must_contain_any", "values": ["prefers-reduced-motion"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B05 | true | 1 | Write CSS for a theme that needs to support both light and dark modes, with a text colour and background colour token. | CSS custom properties defined on :root with light defaults, and a prefers-color-scheme: dark block that overrides the tokens. Components reference the tokens, not raw hex values. | Here's an example CSS code that supports both light and dark modes with text color and background color tokens:
```css
:root {
/* Light mode colors */
--color-text: #1a1a1a;
--color-background: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
/* Dark mode colors */
--color-text: #e8e8e8;
-... | true | must_contain_any: found: ['prefers-color-scheme', 'var(--'] | [{"kind": "must_contain_any", "values": ["prefers-color-scheme", "var(--"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B05 | true | 2 | Write CSS for a theme that needs to support both light and dark modes, with a text colour and background colour token. | CSS custom properties defined on :root with light defaults, and a prefers-color-scheme: dark block that overrides the tokens. Components reference the tokens, not raw hex values. | Here's an example CSS for a theme that supports both light and dark modes, with custom property tokens for the text color and background color:
```css
:root {
/* Light mode colors */
--color-text: #1a1a1a;
--color-background: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
/* Dark mode colors */
... | true | must_contain_any: found: ['prefers-color-scheme', 'var(--'] | [{"kind": "must_contain_any", "values": ["prefers-color-scheme", "var(--"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B05 | true | 3 | Write CSS for a theme that needs to support both light and dark modes, with a text colour and background colour token. | CSS custom properties defined on :root with light defaults, and a prefers-color-scheme: dark block that overrides the tokens. Components reference the tokens, not raw hex values. | Here's an example CSS code that supports both light and dark modes with text and background color tokens:
```css
:root {
--color-text: #1a1a1a;
--color-background: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #e8e8e8;
--color-background: #1a1a1a;
}
}
body {
color: var(--co... | true | must_contain_any: found: ['prefers-color-scheme', 'var(--'] | [{"kind": "must_contain_any", "values": ["prefers-color-scheme", "var(--"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B05 | false | 1 | Write CSS for a theme that needs to support both light and dark modes, with a text colour and background colour token. | CSS custom properties defined on :root with light defaults, and a prefers-color-scheme: dark block that overrides the tokens. Components reference the tokens, not raw hex values. | To create a theme that supports both light and dark modes, you can use CSS variables (also known as CSS custom properties) to define the text color and background color tokens. Here's an example:
```css
/* Default (light) theme */
:root {
--text-color: #333333;
--bg-color: #ffffff;
}
/* Dark theme */
.dark-mode {... | true | must_contain_any: found: ['prefers-color-scheme', 'var(--'] | [{"kind": "must_contain_any", "values": ["prefers-color-scheme", "var(--"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B05 | false | 2 | Write CSS for a theme that needs to support both light and dark modes, with a text colour and background colour token. | CSS custom properties defined on :root with light defaults, and a prefers-color-scheme: dark block that overrides the tokens. Components reference the tokens, not raw hex values. | Here's an example of how you can write CSS for a theme that supports both light and dark modes, with text color and background color tokens:
```css
:root {
/* Light mode */
--color-text-light: #333;
--color-background-light: #fff;
/* Dark mode */
--color-text-dark: #fff;
--color-background-dark: #333;
}
... | true | must_contain_any: found: ['prefers-color-scheme', 'var(--'] | [{"kind": "must_contain_any", "values": ["prefers-color-scheme", "var(--"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B05 | false | 3 | Write CSS for a theme that needs to support both light and dark modes, with a text colour and background colour token. | CSS custom properties defined on :root with light defaults, and a prefers-color-scheme: dark block that overrides the tokens. Components reference the tokens, not raw hex values. | To create a CSS theme that supports both light and dark modes, you can use CSS variables to define the color tokens and then use the `prefers-color-scheme` media query to apply the appropriate styles based on the user's preferred color scheme.
Here's an example:
```css
:root {
/* Light mode colors */
--color-text... | true | must_contain_any: found: ['prefers-color-scheme', 'var(--'] | [{"kind": "must_contain_any", "values": ["prefers-color-scheme", "var(--"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B06 | true | 1 | Write a Twig snippet for an icon button that shows a cart SVG icon next to the text 'View cart'. The icon is decorative. | A button element with the SVG marked aria-hidden="true" and focusable="false", and visible text 'View cart' adjacent to the icon. | Here's the Twig snippet for an icon button with a decorative cart SVG icon next to the text "View cart":
```twig
<button type="button">
<svg aria-hidden="true" focusable="false">
<use href="#icon-cart"/>
</svg>
{{ 'View cart'|t }}
</button>
```
Explanation:
1. The button has a `type="button"` attribute to ... | true | must_contain_any: found: ['aria-hidden="true"', 'focusable="false"'] | [{"kind": "must_contain_any", "values": ["aria-hidden=\"true\"", "focusable=\"false\""]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B06 | true | 2 | Write a Twig snippet for an icon button that shows a cart SVG icon next to the text 'View cart'. The icon is decorative. | A button element with the SVG marked aria-hidden="true" and focusable="false", and visible text 'View cart' adjacent to the icon. | Here's a Twig snippet for an icon button with a decorative cart SVG icon and the text 'View cart':
```twig
<button type="button">
<svg aria-hidden="true" focusable="false">
<use href="#icon-cart"></use>
</svg>
{{ 'View cart'|t }}
</button>
```
Explanation:
1. The `<button>` element is used for the interact... | true | must_contain_any: found: ['aria-hidden="true"', 'focusable="false"'] | [{"kind": "must_contain_any", "values": ["aria-hidden=\"true\"", "focusable=\"false\""]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B06 | true | 3 | Write a Twig snippet for an icon button that shows a cart SVG icon next to the text 'View cart'. The icon is decorative. | A button element with the SVG marked aria-hidden="true" and focusable="false", and visible text 'View cart' adjacent to the icon. | Here's a Twig snippet for an icon button with a decorative cart SVG icon next to the text "View cart":
```twig
<button type="button">
<svg aria-hidden="true" focusable="false">
<use href="#icon-cart"/>
</svg>
{{ 'View cart'|t }}
</button>
```
Explanation:
1. The `<button>` element is used for the interacti... | true | must_contain_any: found: ['aria-hidden="true"', 'focusable="false"'] | [{"kind": "must_contain_any", "values": ["aria-hidden=\"true\"", "focusable=\"false\""]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B06 | false | 1 | Write a Twig snippet for an icon button that shows a cart SVG icon next to the text 'View cart'. The icon is decorative. | A button element with the SVG marked aria-hidden="true" and focusable="false", and visible text 'View cart' adjacent to the icon. | Here's a Twig snippet for an icon button that shows a cart SVG icon next to the text 'View cart':
```twig
<a href="{{ path('cart_page') }}" class="btn btn-primary d-flex align-items-center">
<svg class="icon me-2" aria-hidden="true">
<use xlink:href="#icon-cart"></use>
</svg>
View cart
</a>
```
In this snip... | true | must_contain_any: found: ['aria-hidden="true"'] | [{"kind": "must_contain_any", "values": ["aria-hidden=\"true\"", "focusable=\"false\""]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B06 | false | 2 | Write a Twig snippet for an icon button that shows a cart SVG icon next to the text 'View cart'. The icon is decorative. | A button element with the SVG marked aria-hidden="true" and focusable="false", and visible text 'View cart' adjacent to the icon. | Here's a Twig snippet for an icon button that shows a cart SVG icon next to the text 'View cart':
```html
<a href="{{ path('cart_page') }}" class="btn btn-primary d-flex align-items-center">
<svg class="me-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"... | true | must_contain_any: found: ['aria-hidden="true"'] | [{"kind": "must_contain_any", "values": ["aria-hidden=\"true\"", "focusable=\"false\""]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dom | B06 | false | 3 | Write a Twig snippet for an icon button that shows a cart SVG icon next to the text 'View cart'. The icon is decorative. | A button element with the SVG marked aria-hidden="true" and focusable="false", and visible text 'View cart' adjacent to the icon. | Here's a Twig snippet for an icon button with a cart SVG icon and the text 'View cart':
```twig
<button class="icon-button">
<svg class="icon" aria-hidden="true" role="img">
<use xlink:href="#icon-cart"></use>
</svg>
<span>View cart</span>
</button>
```
In this example:
- The button has a class of `icon-bu... | true | must_contain_any: found: ['aria-hidden="true"'] | [{"kind": "must_contain_any", "values": ["aria-hidden=\"true\"", "focusable=\"false\""]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B01 | true | 1 | Write a Drupal.behaviors JavaScript snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with data-cart-add. | A Drupal.behaviors block that calls Drupal.announce() with the polite message. Does not add a hand-rolled aria-live region to the DOM. | Here's an example of a Drupal.behaviors JavaScript snippet that announces "Item added to your cart." to screen readers when a user clicks a button with the `data-cart-add` attribute:
```javascript
((Drupal, once) => {
Drupal.behaviors.cartUpdate = {
attach(context) {
once('cart-update', '[data-cart-add]', ... | true | must_contain_any: found: ['Drupal.announce', 'once('] | [{"kind": "must_contain_any", "values": ["Drupal.announce", "once("]}, {"kind": "must_not_contain", "values": ["aria-live=\"", "aria-live='", "createElement(", "insertAdjacentHTML("]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B01 | true | 2 | Write a Drupal.behaviors JavaScript snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with data-cart-add. | A Drupal.behaviors block that calls Drupal.announce() with the polite message. Does not add a hand-rolled aria-live region to the DOM. | Here's an example Drupal.behaviors snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with `data-cart-add` attribute:
```javascript
((Drupal, once) => {
Drupal.behaviors.cartUpdate = {
attach(context) {
once('cart-update', '[data-cart-add]', context).forEach((el... | true | must_contain_any: found: ['Drupal.announce', 'once('] | [{"kind": "must_contain_any", "values": ["Drupal.announce", "once("]}, {"kind": "must_not_contain", "values": ["aria-live=\"", "aria-live='", "createElement(", "insertAdjacentHTML("]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B01 | true | 3 | Write a Drupal.behaviors JavaScript snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with data-cart-add. | A Drupal.behaviors block that calls Drupal.announce() with the polite message. Does not add a hand-rolled aria-live region to the DOM. | Sure, here's an example of a Drupal.behaviors JavaScript snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with `data-cart-add`:
```javascript
((Drupal, once) => {
Drupal.behaviors.cartUpdate = {
attach(context) {
once('cart-update', '[data-cart-add]', context)... | true | must_contain_any: found: ['Drupal.announce', 'once('] | [{"kind": "must_contain_any", "values": ["Drupal.announce", "once("]}, {"kind": "must_not_contain", "values": ["aria-live=\"", "aria-live='", "createElement(", "insertAdjacentHTML("]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B01 | false | 1 | Write a Drupal.behaviors JavaScript snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with data-cart-add. | A Drupal.behaviors block that calls Drupal.announce() with the polite message. Does not add a hand-rolled aria-live region to the DOM. | Here's an example of a Drupal.behaviors JavaScript snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with `data-cart-add` attribute:
```javascript
(function ($, Drupal) {
'use strict';
Drupal.behaviors.cartAddAnnouncement = {
attach: function (context, settings) {... | true | must_contain_any: found: ['Drupal.announce', 'once('] | [{"kind": "must_contain_any", "values": ["Drupal.announce", "once("]}, {"kind": "must_not_contain", "values": ["aria-live=\"", "aria-live='", "createElement(", "insertAdjacentHTML("]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B01 | false | 2 | Write a Drupal.behaviors JavaScript snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with data-cart-add. | A Drupal.behaviors block that calls Drupal.announce() with the polite message. Does not add a hand-rolled aria-live region to the DOM. | Sure, here's an example of a Drupal.behaviors snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with the `data-cart-add` attribute:
```javascript
(function ($, Drupal) {
'use strict';
Drupal.behaviors.addToCart = {
attach: function (context, settings) {
$('b... | true | must_contain_any: found: ['Drupal.announce', 'once('] | [{"kind": "must_contain_any", "values": ["Drupal.announce", "once("]}, {"kind": "must_not_contain", "values": ["aria-live=\"", "aria-live='", "createElement(", "insertAdjacentHTML("]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B01 | false | 3 | Write a Drupal.behaviors JavaScript snippet that announces 'Item added to your cart.' to screen readers when a user clicks a button with data-cart-add. | A Drupal.behaviors block that calls Drupal.announce() with the polite message. Does not add a hand-rolled aria-live region to the DOM. | Here's a Drupal.behaviors JavaScript snippet that will announce "Item added to your cart." to screen readers when a user clicks a button with the data-cart-add attribute:
```javascript
(function ($, Drupal) {
Drupal.behaviors.cartAddAnnouncment = {
attach: function (context, settings) {
$('button[data-cart... | true | must_contain_any: found: ['Drupal.announce', 'once('] | [{"kind": "must_contain_any", "values": ["Drupal.announce", "once("]}, {"kind": "must_not_contain", "values": ["aria-live=\"", "aria-live='", "createElement(", "insertAdjacentHTML("]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B02 | true | 1 | After a Drupal AJAX command replaces a 'Load more' button with new content, how should I return keyboard focus to the rebuilt trigger? | Use FocusCommand from \Drupal\Core\Ajax\FocusCommand in the AJAX response to move focus after the command queue settles. Do not use element.focus() in a JS callback. | After an AJAX command replaces a "Load more" button with new content, you should use the `FocusCommand` to return focus to the rebuilt trigger.
The `FocusCommand` is part of the Drupal AJAX API and ensures that focus is properly managed after the AJAX response has been processed. This helps keep keyboard navigation fl... | false | must_contain_any: missing all of: ['FocusFirstCommand'] | [{"kind": "must_contain_any", "values": ["FocusFirstCommand"]}, {"kind": "must_not_contain", "values": ["}).focus()", "].focus()", "el.focus()", "button.focus()"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B02 | true | 2 | After a Drupal AJAX command replaces a 'Load more' button with new content, how should I return keyboard focus to the rebuilt trigger? | Use FocusCommand from \Drupal\Core\Ajax\FocusCommand in the AJAX response to move focus after the command queue settles. Do not use element.focus() in a JS callback. | After an AJAX command replaces a "Load more" button with new content, you should use the `FocusCommand` to return focus to the rebuilt trigger element.
Here's an example of how to do this in Drupal:
```php
use Drupal\Core\Ajax\FocusCommand;
use Drupal\Core\Ajax\AjaxResponse;
function my_module_load_more_callback(arr... | false | must_contain_any: missing all of: ['FocusFirstCommand'] | [{"kind": "must_contain_any", "values": ["FocusFirstCommand"]}, {"kind": "must_not_contain", "values": ["}).focus()", "].focus()", "el.focus()", "button.focus()"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B02 | true | 3 | After a Drupal AJAX command replaces a 'Load more' button with new content, how should I return keyboard focus to the rebuilt trigger? | Use FocusCommand from \Drupal\Core\Ajax\FocusCommand in the AJAX response to move focus after the command queue settles. Do not use element.focus() in a JS callback. | After an AJAX command replaces a "Load more" button with new content, you should use the `FocusCommand` to return focus to the rebuilt trigger.
Here's an example of how to do this in PHP:
```php
use Drupal\Core\Ajax\FocusCommand;
use Drupal\Core\Ajax\AjaxResponse;
public function loadMore(Request $request) {
// Fe... | false | must_contain_any: missing all of: ['FocusFirstCommand'] | [{"kind": "must_contain_any", "values": ["FocusFirstCommand"]}, {"kind": "must_not_contain", "values": ["}).focus()", "].focus()", "el.focus()", "button.focus()"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B02 | false | 1 | After a Drupal AJAX command replaces a 'Load more' button with new content, how should I return keyboard focus to the rebuilt trigger? | Use FocusCommand from \Drupal\Core\Ajax\FocusCommand in the AJAX response to move focus after the command queue settles. Do not use element.focus() in a JS callback. | To return the keyboard focus to the rebuilt "Load more" button after an AJAX command replaces it with new content, you can use the `Drupal.announce()` function provided by Drupal. This function allows you to send an accessibility-friendly announcement to screen readers, which can then shift the focus to the newly-added... | false | must_contain_any: missing all of: ['FocusFirstCommand'] | [{"kind": "must_contain_any", "values": ["FocusFirstCommand"]}, {"kind": "must_not_contain", "values": ["}).focus()", "].focus()", "el.focus()", "button.focus()"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B02 | false | 2 | After a Drupal AJAX command replaces a 'Load more' button with new content, how should I return keyboard focus to the rebuilt trigger? | Use FocusCommand from \Drupal\Core\Ajax\FocusCommand in the AJAX response to move focus after the command queue settles. Do not use element.focus() in a JS callback. | When a Drupal AJAX command replaces a 'Load more' button with new content, you can return keyboard focus to the rebuilt trigger by using the `Drupal.announce()` function, which is part of the Drupal accessibility API.
Here's an example of how you can achieve this:
1. In your AJAX callback function, after you've repla... | false | must_contain_any: missing all of: ['FocusFirstCommand'] | [{"kind": "must_contain_any", "values": ["FocusFirstCommand"]}, {"kind": "must_not_contain", "values": ["}).focus()", "].focus()", "el.focus()", "button.focus()"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B02 | false | 3 | After a Drupal AJAX command replaces a 'Load more' button with new content, how should I return keyboard focus to the rebuilt trigger? | Use FocusCommand from \Drupal\Core\Ajax\FocusCommand in the AJAX response to move focus after the command queue settles. Do not use element.focus() in a JS callback. | When a Drupal AJAX command replaces a "Load more" button with new content, you can use the `focusFirstElement()` function from the `Drupal.behaviors.AJAX` object to return the keyboard focus to the rebuilt trigger.
Here's an example of how you can do this:
1. In your Drupal module or theme, create a custom AJAX callb... | false | must_contain_any: missing all of: ['FocusFirstCommand'] | [{"kind": "must_contain_any", "values": ["FocusFirstCommand"]}, {"kind": "must_not_contain", "values": ["}).focus()", "].focus()", "el.focus()", "button.focus()"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B03 | true | 1 | Write a Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test using @axe-core/playwright with the wcag22aa tag. Includes at least one keyboard-flow assertion beyond the Axe scan. | Here's an example of a Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations:
```javascript
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('Cart page has no detectable WCAG 2.2 AA violations', async ({ page }) => {
// Naviga... | true | must_contain_any: found: ['@axe-core/playwright', 'wcag22aa'] | [{"kind": "must_contain_any", "values": ["@axe-core/playwright", "wcag22aa", "getByRole"]}, {"kind": "must_not_contain", "values": ["NightwatchTestBase", "extends NightwatchTest", "browser.assert"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B03 | true | 2 | Write a Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test using @axe-core/playwright with the wcag22aa tag. Includes at least one keyboard-flow assertion beyond the Axe scan. | Here's a sample Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations:
```javascript
// tests/playwright/a11y/cart.spec.js
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('cart page has no detectable WCAG 2.2 AA violations', as... | true | must_contain_any: found: ['@axe-core/playwright', 'wcag22aa', 'getByRole'] | [{"kind": "must_contain_any", "values": ["@axe-core/playwright", "wcag22aa", "getByRole"]}, {"kind": "must_not_contain", "values": ["NightwatchTestBase", "extends NightwatchTest", "browser.assert"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B03 | true | 3 | Write a Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test using @axe-core/playwright with the wcag22aa tag. Includes at least one keyboard-flow assertion beyond the Axe scan. | Sure, here's an example Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations:
```javascript
// tests/playwright/a11y/cart.spec.js
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('cart page has no detectable WCAG 2.2 AA violati... | true | must_contain_any: found: ['@axe-core/playwright', 'wcag22aa', 'getByRole'] | [{"kind": "must_contain_any", "values": ["@axe-core/playwright", "wcag22aa", "getByRole"]}, {"kind": "must_not_contain", "values": ["NightwatchTestBase", "extends NightwatchTest", "browser.assert"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B03 | false | 1 | Write a Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test using @axe-core/playwright with the wcag22aa tag. Includes at least one keyboard-flow assertion beyond the Axe scan. | Here's an example of a Playwright accessibility test that checks for WCAG 2.2 AA violations on a Drupal cart page:
```javascript
const { test } = require('@playwright/test');
const { AxeBuilder } = require('@axe-core/playwright');
test('Cart page accessibility test', async ({ page }) => {
// Navigate to the cart pa... | true | must_contain_any: found: ['@axe-core/playwright', 'wcag22aa'] | [{"kind": "must_contain_any", "values": ["@axe-core/playwright", "wcag22aa", "getByRole"]}, {"kind": "must_not_contain", "values": ["NightwatchTestBase", "extends NightwatchTest", "browser.assert"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B03 | false | 2 | Write a Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test using @axe-core/playwright with the wcag22aa tag. Includes at least one keyboard-flow assertion beyond the Axe scan. | Here's an example Playwright test that checks for WCAG 2.2 AA violations on a Drupal cart page:
```javascript
const { test, expect } = require('@playwright/test');
const { WCAG22AA } = require('axe-core');
test('Cart page WCAG 2.2 AA compliance', async ({ page }) => {
// Navigate to the cart page
await page.goto(... | true | must_contain_any: found: ['wcag22aa'] | [{"kind": "must_contain_any", "values": ["@axe-core/playwright", "wcag22aa", "getByRole"]}, {"kind": "must_not_contain", "values": ["NightwatchTestBase", "extends NightwatchTest", "browser.assert"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B03 | false | 3 | Write a Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test using @axe-core/playwright with the wcag22aa tag. Includes at least one keyboard-flow assertion beyond the Axe scan. | Sure, here's an example of a Playwright accessibility test for a Drupal cart page that checks for WCAG 2.2 AA violations:
```javascript
const { chromium } = require('playwright');
const { axe, configurationFile } = require('@axe-core/playwright');
(async () => {
const browser = await chromium.launch();
const page... | true | must_contain_any: found: ['@axe-core/playwright'] | [{"kind": "must_contain_any", "values": ["@axe-core/playwright", "wcag22aa", "getByRole"]}, {"kind": "must_not_contain", "values": ["NightwatchTestBase", "extends NightwatchTest", "browser.assert"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B04 | true | 1 | Write a new Playwright test file for a Drupal page at /node/1 that checks for WCAG 2.2 AA accessibility violations in both light and dark colour modes. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test loop over ['light', 'dark'] that calls page.emulateMedia({ colorScheme }) before running the Axe scan in each mode. | Here is a new Playwright test file that checks for WCAG 2.2 AA accessibility violations on the `/node/1` page in both light and dark colour modes:
```javascript
// tests/playwright/a11y/node-1.spec.js
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
for (const colorSchem... | true | must_contain_any: found: ['emulateMedia', 'colorScheme'] | [{"kind": "must_contain_any", "values": ["emulateMedia", "colorScheme"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B04 | true | 2 | Write a new Playwright test file for a Drupal page at /node/1 that checks for WCAG 2.2 AA accessibility violations in both light and dark colour modes. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test loop over ['light', 'dark'] that calls page.emulateMedia({ colorScheme }) before running the Axe scan in each mode. | Here's a new Playwright test file that checks for WCAG 2.2 AA accessibility violations on the `/node/1` page in both light and dark colour modes:
```javascript
// tests/playwright/a11y/node-1.spec.js
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
for (const colorScheme... | true | must_contain_any: found: ['emulateMedia', 'colorScheme'] | [{"kind": "must_contain_any", "values": ["emulateMedia", "colorScheme"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B04 | true | 3 | Write a new Playwright test file for a Drupal page at /node/1 that checks for WCAG 2.2 AA accessibility violations in both light and dark colour modes. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test loop over ['light', 'dark'] that calls page.emulateMedia({ colorScheme }) before running the Axe scan in each mode. | Here's a new Playwright test file that checks for WCAG 2.2 AA accessibility violations on the Drupal page at `/node/1`, in both light and dark colour modes:
```javascript
// tests/playwright/a11y/node-1.spec.js
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
for (const ... | true | must_contain_any: found: ['emulateMedia', 'colorScheme'] | [{"kind": "must_contain_any", "values": ["emulateMedia", "colorScheme"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B04 | false | 1 | Write a new Playwright test file for a Drupal page at /node/1 that checks for WCAG 2.2 AA accessibility violations in both light and dark colour modes. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test loop over ['light', 'dark'] that calls page.emulateMedia({ colorScheme }) before running the Axe scan in each mode. | Here's a new Playwright test file for a Drupal page at `/node/1` that checks for WCAG 2.2 AA accessibility violations in both light and dark color modes:
```javascript
const { test, expect } = require('@playwright/test');
const { axe, configureAxe } = require('axe-playwright');
test.describe('Drupal Page Accessibilit... | false | must_contain_any: missing all of: ['emulateMedia', 'colorScheme'] | [{"kind": "must_contain_any", "values": ["emulateMedia", "colorScheme"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B04 | false | 2 | Write a new Playwright test file for a Drupal page at /node/1 that checks for WCAG 2.2 AA accessibility violations in both light and dark colour modes. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test loop over ['light', 'dark'] that calls page.emulateMedia({ colorScheme }) before running the Axe scan in each mode. | Here's a new Playwright test file that checks for WCAG 2.2 AA accessibility violations on the Drupal page at `/node/1` in both light and dark color modes:
```javascript
const { chromium } = require('playwright');
const { runAccessibilityChecks } = require('playwright-accessibility');
describe('Drupal Page Accessibili... | true | must_contain_any: found: ['emulateMedia'] | [{"kind": "must_contain_any", "values": ["emulateMedia", "colorScheme"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B04 | false | 3 | Write a new Playwright test file for a Drupal page at /node/1 that checks for WCAG 2.2 AA accessibility violations in both light and dark colour modes. Do not read or modify any existing files — generate the test code directly in your response. | A Playwright test loop over ['light', 'dark'] that calls page.emulateMedia({ colorScheme }) before running the Axe scan in each mode. | Here's a new Playwright test file that checks for WCAG 2.2 AA accessibility violations in both light and dark color modes for a Drupal page at `/node/1`:
```javascript
const { test } = require('@playwright/test');
const { getAccessibilityViolations } = require('accessibility-checker');
test('Accessibility Checks for ... | false | must_contain_any: missing all of: ['emulateMedia', 'colorScheme'] | [{"kind": "must_contain_any", "values": ["emulateMedia", "colorScheme"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B05 | true | 1 | How should I add an accessibility test for a Drupal render array inside a PHPUnit Kernel test? | Guidance to use AxeRenderArrayTrait with assertAxeClean(), noting that this trait is proposed in issue #3338664 and may not yet be committed to core. Check the issue for the current status before using the snippet. | To add an accessibility test for a Drupal render array inside a PHPUnit Kernel test, you can use the `AxeRenderArrayTrait` from the `drupal/tests-axe` module. Here's an example:
```php
namespace Drupal\Tests\my_module\Kernel;
use Drupal\KernelTests\KernelTestBase;
use Drupal\Tests\axe\Traits\AxeRenderArrayTrait;
use ... | true | must_contain_any: found: ['AxeRenderArrayTrait', 'assertAxeClean', 'wcag22aa'] | [{"kind": "must_contain_any", "values": ["3338664", "AxeRenderArrayTrait", "assertAxeClean", "wcag22aa"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B05 | true | 2 | How should I add an accessibility test for a Drupal render array inside a PHPUnit Kernel test? | Guidance to use AxeRenderArrayTrait with assertAxeClean(), noting that this trait is proposed in issue #3338664 and may not yet be committed to core. Check the issue for the current status before using the snippet. | To add an accessibility test for a Drupal render array inside a PHPUnit Kernel test, you can use the `AxeRenderArrayTrait` proposed in Drupal core issue #3338664. Here's an example:
```php
namespace Drupal\Tests\my_module\Kernel;
use Drupal\KernelTests\KernelTestBase;
use Drupal\Tests\axe\Traits\AxeRenderArrayTrait;
... | true | must_contain_any: found: ['3338664', 'AxeRenderArrayTrait', 'assertAxeClean', 'wcag22aa'] | [{"kind": "must_contain_any", "values": ["3338664", "AxeRenderArrayTrait", "assertAxeClean", "wcag22aa"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B05 | true | 3 | How should I add an accessibility test for a Drupal render array inside a PHPUnit Kernel test? | Guidance to use AxeRenderArrayTrait with assertAxeClean(), noting that this trait is proposed in issue #3338664 and may not yet be committed to core. Check the issue for the current status before using the snippet. | To add an accessibility test for a Drupal render array inside a PHPUnit Kernel test, you can use the `AxeRenderArrayTrait` proposed in Drupal core issue #3338664. Here's an example:
```php
namespace Drupal\Tests\my_module\Kernel;
use Drupal\KernelTests\KernelTestBase;
use Drupal\Tests\axe\Traits\AxeRenderArrayTrait;
... | true | must_contain_any: found: ['3338664', 'AxeRenderArrayTrait', 'assertAxeClean', 'wcag22aa'] | [{"kind": "must_contain_any", "values": ["3338664", "AxeRenderArrayTrait", "assertAxeClean", "wcag22aa"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B05 | false | 1 | How should I add an accessibility test for a Drupal render array inside a PHPUnit Kernel test? | Guidance to use AxeRenderArrayTrait with assertAxeClean(), noting that this trait is proposed in issue #3338664 and may not yet be committed to core. Check the issue for the current status before using the snippet. | To add an accessibility test for a Drupal render array inside a PHPUnit Kernel test, you can use the `WebAssert` class provided by Drupal. The `WebAssert` class provides various methods to assert the accessibility of the rendered HTML.
Here's an example of how you can add an accessibility test for a Drupal render arra... | false | must_contain_any: missing all of: ['3338664', 'AxeRenderArrayTrait', 'assertAxeClean', 'wcag22aa'] | [{"kind": "must_contain_any", "values": ["3338664", "AxeRenderArrayTrait", "assertAxeClean", "wcag22aa"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B05 | false | 2 | How should I add an accessibility test for a Drupal render array inside a PHPUnit Kernel test? | Guidance to use AxeRenderArrayTrait with assertAxeClean(), noting that this trait is proposed in issue #3338664 and may not yet be committed to core. Check the issue for the current status before using the snippet. | To add an accessibility test for a Drupal render array inside a PHPUnit Kernel test, you can follow these steps:
1. **Install Accessibility Testing Library**: First, you need to install an accessibility testing library that can be used in your PHPUnit Kernel test. One popular library is `drupal/drupal-accessibility-te... | false | must_contain_any: missing all of: ['3338664', 'AxeRenderArrayTrait', 'assertAxeClean', 'wcag22aa'] | [{"kind": "must_contain_any", "values": ["3338664", "AxeRenderArrayTrait", "assertAxeClean", "wcag22aa"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-dynamic | B05 | false | 3 | How should I add an accessibility test for a Drupal render array inside a PHPUnit Kernel test? | Guidance to use AxeRenderArrayTrait with assertAxeClean(), noting that this trait is proposed in issue #3338664 and may not yet be committed to core. Check the issue for the current status before using the snippet. | To add an accessibility test for a Drupal render array inside a PHPUnit Kernel test, you can use the Drupal Accessibility Test module (drupal/accessibility_test) and the Drupal Accessibility Assertion (drupal/accessibility_assertion) module.
Here's an example of how you can set up the test:
1. First, make sure you ha... | false | must_contain_any: missing all of: ['3338664', 'AxeRenderArrayTrait', 'assertAxeClean', 'wcag22aa'] | [{"kind": "must_contain_any", "values": ["3338664", "AxeRenderArrayTrait", "assertAxeClean", "wcag22aa"]}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B01 | true | 1 | Generate a Drupal Form API text field for a user's email address. The field should be required and include a description explaining that the email will only be used for order receipts. | A render array using #type => 'email' with #title, #description, and #required TRUE. No hand-rolled aria-label or aria-describedby. | Here's an example of a Drupal Form API text field for a user's email address, with the required and description properties set:
```php
$form['email'] = [
'#type' => 'email',
'#title' => $this->t('Your email address'),
'#description' => $this->t('We will only use this to send order receipts.'),
'#required' => T... | true | must_contain_any: found: ['#title', '#description', '#required']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#title", "#description", "#required"]}, {"kind": "must_not_contain", "values": ["'aria-label' =>", "'aria-describedby' =>", "\"aria-label\" =>", "\"aria-describedby\" =>"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B01 | true | 2 | Generate a Drupal Form API text field for a user's email address. The field should be required and include a description explaining that the email will only be used for order receipts. | A render array using #type => 'email' with #title, #description, and #required TRUE. No hand-rolled aria-label or aria-describedby. | Here's an example of a Drupal Form API text field for a user's email address, with the required and description properties set:
```php
$form['email'] = [
'#type' => 'email',
'#title' => $this->t('Your email address'),
'#description' => $this->t('We will only use this to send order receipts.'),
'#required' => T... | true | must_contain_any: found: ['#title', '#description', '#required']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#title", "#description", "#required"]}, {"kind": "must_not_contain", "values": ["'aria-label' =>", "'aria-describedby' =>", "\"aria-label\" =>", "\"aria-describedby\" =>"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B01 | true | 3 | Generate a Drupal Form API text field for a user's email address. The field should be required and include a description explaining that the email will only be used for order receipts. | A render array using #type => 'email' with #title, #description, and #required TRUE. No hand-rolled aria-label or aria-describedby. | Here's an example of a Drupal Form API text field for a user's email address, with the required and description properties set:
```php
$form['email'] = [
'#type' => 'email',
'#title' => $this->t('Your email address'),
'#description' => $this->t('We will only use this to send order receipts.'),
'#required' => T... | true | must_contain_any: found: ['#title', '#description', '#required']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#title", "#description", "#required"]}, {"kind": "must_not_contain", "values": ["'aria-label' =>", "'aria-describedby' =>", "\"aria-label\" =>", "\"aria-describedby\" =>"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B01 | false | 1 | Generate a Drupal Form API text field for a user's email address. The field should be required and include a description explaining that the email will only be used for order receipts. | A render array using #type => 'email' with #title, #description, and #required TRUE. No hand-rolled aria-label or aria-describedby. | Here's an example of a Drupal Form API text field for a user's email address that is required and includes a description:
```php
$form['email'] = array(
'#type' => 'email',
'#title' => t('Email'),
'#description' => t('This email will only be used for order receipts.'),
'#required' => TRUE,
'#default_value' =... | true | must_contain_any: found: ['#title', '#description', '#required']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#title", "#description", "#required"]}, {"kind": "must_not_contain", "values": ["'aria-label' =>", "'aria-describedby' =>", "\"aria-label\" =>", "\"aria-describedby\" =>"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B01 | false | 2 | Generate a Drupal Form API text field for a user's email address. The field should be required and include a description explaining that the email will only be used for order receipts. | A render array using #type => 'email' with #title, #description, and #required TRUE. No hand-rolled aria-label or aria-describedby. | Here's an example of how you can create a Drupal Form API text field for a user's email address, with the field being required and including a description explaining that the email will only be used for order receipts:
```php
$form['email'] = array(
'#type' => 'email',
'#title' => t('Email Address'),
'#descripti... | true | must_contain_any: found: ['#title', '#description', '#required']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#title", "#description", "#required"]}, {"kind": "must_not_contain", "values": ["'aria-label' =>", "'aria-describedby' =>", "\"aria-label\" =>", "\"aria-describedby\" =>"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B01 | false | 3 | Generate a Drupal Form API text field for a user's email address. The field should be required and include a description explaining that the email will only be used for order receipts. | A render array using #type => 'email' with #title, #description, and #required TRUE. No hand-rolled aria-label or aria-describedby. | To create a Drupal Form API text field for a user's email address that is required and includes a description explaining that the email will only be used for order receipts, you can use the following code:
```php
$form['email'] = array(
'#type' => 'email',
'#title' => t('Email Address'),
'#description' => t('You... | true | must_contain_any: found: ['#title', '#description', '#required']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#title", "#description", "#required"]}, {"kind": "must_not_contain", "values": ["'aria-label' =>", "'aria-describedby' =>", "\"aria-label\" =>", "\"aria-describedby\" =>"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B02 | true | 1 | Generate a Drupal form with a group of shipping speed radio buttons (Standard 5-7 days, Express 2 days). The group should have a visible label. | A render array using #type => 'fieldset' or 'details' as the container, with a nested #type => 'radios' element. Not a bare radios element without a group container. | Here's an example of a Drupal form with a group of shipping speed radio buttons:
```php
$form['shipping'] = [
'#type' => 'fieldset',
'#title' => $this->t('Shipping speed'),
'speed' => [
'#type' => 'radios',
'#title' => $this->t('Choose a shipping speed'),
'#options' => [
'standard' => $this->t(... | true | must_contain_any: found: ['fieldset', "'radios'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["fieldset", "details", "'radios'"]}, {"kind": "must_not_contain", "values": ["'#prefix' => '<div", "#type' => 'div'", "'#markup' => '<div"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B02 | true | 2 | Generate a Drupal form with a group of shipping speed radio buttons (Standard 5-7 days, Express 2 days). The group should have a visible label. | A render array using #type => 'fieldset' or 'details' as the container, with a nested #type => 'radios' element. Not a bare radios element without a group container. | Here's an example of how you can generate a Drupal form with a group of shipping speed radio buttons, with a visible label for the group:
```php
$form['shipping_speed'] = [
'#type' => 'fieldset',
'#title' => $this->t('Shipping speed'),
'speed' => [
'#type' => 'radios',
'#title' => $this->t('Choose a ship... | true | must_contain_any: found: ['fieldset', "'radios'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["fieldset", "details", "'radios'"]}, {"kind": "must_not_contain", "values": ["'#prefix' => '<div", "#type' => 'div'", "'#markup' => '<div"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B02 | true | 3 | Generate a Drupal form with a group of shipping speed radio buttons (Standard 5-7 days, Express 2 days). The group should have a visible label. | A render array using #type => 'fieldset' or 'details' as the container, with a nested #type => 'radios' element. Not a bare radios element without a group container. | Here's an example of a Drupal form with a group of shipping speed radio buttons, with a visible label for the group:
```php
$form['shipping'] = [
'#type' => 'fieldset',
'#title' => $this->t('Shipping speed'),
'speed' => [
'#type' => 'radios',
'#title' => $this->t('Choose a shipping speed'),
'#options... | true | must_contain_any: found: ['fieldset', "'radios'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["fieldset", "details", "'radios'"]}, {"kind": "must_not_contain", "values": ["'#prefix' => '<div", "#type' => 'div'", "'#markup' => '<div"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B02 | false | 1 | Generate a Drupal form with a group of shipping speed radio buttons (Standard 5-7 days, Express 2 days). The group should have a visible label. | A render array using #type => 'fieldset' or 'details' as the container, with a nested #type => 'radios' element. Not a bare radios element without a group container. | Here's an example of a Drupal form with a group of shipping speed radio buttons and a visible label:
```php
// Create the form function
function my_module_shipping_form($form, &$form_state) {
$form = array();
// Add the shipping speed radio buttons group
$form['shipping_speed'] = array(
'#type' => 'radios',... | true | must_contain_any: found: ["'radios'"]; php_lint: 2 block(s) OK | [{"kind": "must_contain_any", "values": ["fieldset", "details", "'radios'"]}, {"kind": "must_not_contain", "values": ["'#prefix' => '<div", "#type' => 'div'", "'#markup' => '<div"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B02 | false | 2 | Generate a Drupal form with a group of shipping speed radio buttons (Standard 5-7 days, Express 2 days). The group should have a visible label. | A render array using #type => 'fieldset' or 'details' as the container, with a nested #type => 'radios' element. Not a bare radios element without a group container. | Here's an example of a Drupal form with a group of shipping speed radio buttons and a visible label:
```php
function my_module_form($form, &$form_state) {
$form = array();
$form['shipping_speed'] = array(
'#type' => 'fieldset',
'#title' => t('Shipping Speed'),
'#weight' => 10,
);
$form['shipping_... | true | must_contain_any: found: ['fieldset', "'radios'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["fieldset", "details", "'radios'"]}, {"kind": "must_not_contain", "values": ["'#prefix' => '<div", "#type' => 'div'", "'#markup' => '<div"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B02 | false | 3 | Generate a Drupal form with a group of shipping speed radio buttons (Standard 5-7 days, Express 2 days). The group should have a visible label. | A render array using #type => 'fieldset' or 'details' as the container, with a nested #type => 'radios' element. Not a bare radios element without a group container. | To generate a Drupal form with a group of shipping speed radio buttons, you can use the `#type` property in the form array. Here's an example:
```php
/**
* Implements hook_form().
*/
function mymodule_form($form, &$form_state) {
$form = array();
$form['shipping_speed'] = array(
'#type' => 'fieldset',
'#... | true | must_contain_any: found: ['fieldset', "'radios'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["fieldset", "details", "'radios'"]}, {"kind": "must_not_contain", "values": ["'#prefix' => '<div", "#type' => 'div'", "'#markup' => '<div"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B03 | true | 1 | Generate a render array for a 'Go to cart' call-to-action link styled as a button. | A render array using #type => 'link' with #url from Url::fromRoute and #attributes for the button class. Not a #markup string containing an <a> tag. | Sure, here's a sample Drupal render array for a "Go to cart" call-to-action link styled as a button:
```php
$build['cta'] = [
'#type' => 'link',
'#title' => $this->t('Go to cart'),
'#url' => Url::fromRoute('commerce_cart.page'),
'#attributes' => [
'class' => ['button'],
],
];
```
Explanation:
1. `'#typ... | true | must_contain_any: found: ["'link'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#type.*link", "'link'"]}, {"kind": "must_not_contain", "values": ["#markup.*<a", "'#markup' => '<a"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B03 | true | 2 | Generate a render array for a 'Go to cart' call-to-action link styled as a button. | A render array using #type => 'link' with #url from Url::fromRoute and #attributes for the button class. Not a #markup string containing an <a> tag. | Here's an example of a render array for a 'Go to cart' call-to-action link styled as a button:
```php
$build['cta'] = [
'#type' => 'link',
'#title' => $this->t('Go to cart'),
'#url' => Url::fromRoute('commerce_cart.page'),
'#attributes' => [
'class' => ['button'],
],
];
```
Let's break down the key elem... | true | must_contain_any: found: ["'link'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#type.*link", "'link'"]}, {"kind": "must_not_contain", "values": ["#markup.*<a", "'#markup' => '<a"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B03 | true | 3 | Generate a render array for a 'Go to cart' call-to-action link styled as a button. | A render array using #type => 'link' with #url from Url::fromRoute and #attributes for the button class. Not a #markup string containing an <a> tag. | Here's an example of a render array for a "Go to cart" call-to-action link styled as a button:
```php
$build['cta'] = [
'#type' => 'link',
'#title' => $this->t('Go to cart'),
'#url' => Url::fromRoute('commerce_cart.page'),
'#attributes' => [
'class' => ['button'],
],
];
```
Explanation:
1. `'#type' => ... | true | must_contain_any: found: ["'link'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#type.*link", "'link'"]}, {"kind": "must_not_contain", "values": ["#markup.*<a", "'#markup' => '<a"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B03 | false | 1 | Generate a render array for a 'Go to cart' call-to-action link styled as a button. | A render array using #type => 'link' with #url from Url::fromRoute and #attributes for the button class. Not a #markup string containing an <a> tag. | Sure, here's an example of a render array for a 'Go to cart' call-to-action link styled as a button:
```php
$render_array = [
'#type' => 'link',
'#title' => t('Go to cart'),
'#url' => Url::fromRoute('cart.page'),
'#attributes' => [
'class' => [
'btn',
'btn-primary',
],
],
];
```
In this ... | true | must_contain_any: found: ["'link'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#type.*link", "'link'"]}, {"kind": "must_not_contain", "values": ["#markup.*<a", "'#markup' => '<a"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B03 | false | 2 | Generate a render array for a 'Go to cart' call-to-action link styled as a button. | A render array using #type => 'link' with #url from Url::fromRoute and #attributes for the button class. Not a #markup string containing an <a> tag. | Here's an example of a render array for a 'Go to Cart' call-to-action link styled as a button:
```php
$render_array = [
'#type' => 'link',
'#title' => t('Go to Cart'),
'#url' => Url::fromRoute('cart.page'),
'#attributes' => [
'class' => [
'btn',
'btn-primary',
],
],
];
```
Explanation:
... | true | must_contain_any: found: ["'link'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#type.*link", "'link'"]}, {"kind": "must_not_contain", "values": ["#markup.*<a", "'#markup' => '<a"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B03 | false | 3 | Generate a render array for a 'Go to cart' call-to-action link styled as a button. | A render array using #type => 'link' with #url from Url::fromRoute and #attributes for the button class. Not a #markup string containing an <a> tag. | Here's an example of a render array for a 'Go to Cart' call-to-action link styled as a button:
```php
$render_array = [
'#type' => 'link',
'#title' => t('Go to Cart'),
'#url' => Url::fromRoute('entity.commerce_cart.collection'),
'#attributes' => [
'class' => [
'button',
'button--primary',
]... | true | must_contain_any: found: ["'link'"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#type.*link", "'link'"]}, {"kind": "must_not_contain", "values": ["#markup.*<a", "'#markup' => '<a"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B04 | true | 1 | Generate a render array for a hero image of volunteers planting trees, and a separate purely decorative swirl SVG. | Two image render elements using #theme => 'image'. The hero image has a descriptive #alt string via $this->t(). The decorative image has #alt => ''. | Here is an example of a render array for a hero image and a decorative swirl SVG image:
```php
$build = [
'hero' => [
'#theme' => 'image',
'#uri' => 'public://campaign/banner.jpg',
'#alt' => $this->t('Volunteers planting trees on the riverbank.'),
],
'decoration' => [
'#theme' => 'image',
'#u... | true | must_contain_any: found: ["#alt => ''"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#alt => ''", "#alt => \"\""]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B04 | true | 2 | Generate a render array for a hero image of volunteers planting trees, and a separate purely decorative swirl SVG. | Two image render elements using #theme => 'image'. The hero image has a descriptive #alt string via $this->t(). The decorative image has #alt => ''. | Here's a sample render array that follows the accessibility guidance for a hero image and a decorative SVG image:
```php
$build = [
'hero' => [
'#theme' => 'image',
'#uri' => 'public://campaign/banner.jpg',
'#alt' => $this->t('Volunteers planting trees on the riverbank.'),
],
'decoration' => [
'#... | false | must_contain_any: missing all of: ["#alt => ''", '#alt => ""']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#alt => ''", "#alt => \"\""]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B04 | true | 3 | Generate a render array for a hero image of volunteers planting trees, and a separate purely decorative swirl SVG. | Two image render elements using #theme => 'image'. The hero image has a descriptive #alt string via $this->t(). The decorative image has #alt => ''. | Here's an example of how you could generate the render array for the hero image and the decorative swirl SVG:
```php
$build = [
'hero' => [
'#theme' => 'image',
'#uri' => 'public://campaign/banner.jpg',
'#alt' => $this->t('Volunteers planting trees on the riverbank.'),
],
'decoration' => [
'#them... | false | must_contain_any: missing all of: ["#alt => ''", '#alt => ""']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#alt => ''", "#alt => \"\""]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B04 | false | 1 | Generate a render array for a hero image of volunteers planting trees, and a separate purely decorative swirl SVG. | Two image render elements using #theme => 'image'. The hero image has a descriptive #alt string via $this->t(). The decorative image has #alt => ''. | Certainly! Here's an example of a render array for a hero image of volunteers planting trees and a separate decorative swirl SVG.
1. Hero Image of Volunteers Planting Trees:
```json
{
"type": "hero",
"content": {
"image": {
"src": "volunteers-planting-trees.jpg",
"alt": "Volunteers planting trees"... | false | must_contain_any: missing all of: ["#alt => ''", '#alt => ""']; php_lint: no PHP blocks | [{"kind": "must_contain_any", "values": ["#alt => ''", "#alt => \"\""]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B04 | false | 2 | Generate a render array for a hero image of volunteers planting trees, and a separate purely decorative swirl SVG. | Two image render elements using #theme => 'image'. The hero image has a descriptive #alt string via $this->t(). The decorative image has #alt => ''. | Sure, here's an example of a render array for a hero image of volunteers planting trees, and a separate purely decorative swirl SVG:
Hero Image Render Array:
```javascript
const heroImageRenderArray = [
{
type: 'image',
src: 'volunteers-planting-trees.jpg',
alt: 'Volunteers planting trees',
position... | false | must_contain_any: missing all of: ["#alt => ''", '#alt => ""']; php_lint: no PHP blocks | [{"kind": "must_contain_any", "values": ["#alt => ''", "#alt => \"\""]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B04 | false | 3 | Generate a render array for a hero image of volunteers planting trees, and a separate purely decorative swirl SVG. | Two image render elements using #theme => 'image'. The hero image has a descriptive #alt string via $this->t(). The decorative image has #alt => ''. | Sure, here's the render array for the hero image and the decorative swirl SVG:
**Hero Image Render Array:**
```javascript
const heroImageRenderArray = [
{
component: 'div',
props: {
className: 'hero-image-container',
},
children: [
{
component: 'img',
props: {
s... | false | must_contain_any: missing all of: ["#alt => ''", '#alt => ""']; php_lint: no PHP blocks | [{"kind": "must_contain_any", "values": ["#alt => ''", "#alt => \"\""]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B05 | true | 1 | Generate a Drupal render array for a table of open orders with columns: Order, Placed, Status. The table should handle the empty state. | A render array using #type => 'table' with #caption, #header, #rows, and #empty. Not a raw HTML table in #markup. | Here's an example of how you can generate a Drupal render array for a table of open orders with the specified columns and handling for the empty state:
```php
$build['orders'] = [
'#type' => 'table',
'#caption' => $this->t('Open orders for @user', ['@user' => $account->getDisplayName()]),
'#header' => [
$thi... | true | must_contain_any: found: ["'table'", '#caption', '#empty']; php_lint: 2 block(s) OK | [{"kind": "must_contain_any", "values": ["'table'", "#caption", "#empty"]}, {"kind": "must_not_contain", "values": ["#markup.*<table", "'#markup' => '<table"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B05 | true | 2 | Generate a Drupal render array for a table of open orders with columns: Order, Placed, Status. The table should handle the empty state. | A render array using #type => 'table' with #caption, #header, #rows, and #empty. Not a raw HTML table in #markup. | Here's an example of a Drupal render array for a table of open orders with the specified columns, including handling for the empty state:
```php
$build['orders'] = [
'#type' => 'table',
'#caption' => $this->t('Open orders for @user', ['@user' => $account->getDisplayName()]),
'#header' => [
$this->t('Order'),... | true | must_contain_any: found: ["'table'", '#caption', '#empty']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["'table'", "#caption", "#empty"]}, {"kind": "must_not_contain", "values": ["#markup.*<table", "'#markup' => '<table"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B05 | true | 3 | Generate a Drupal render array for a table of open orders with columns: Order, Placed, Status. The table should handle the empty state. | A render array using #type => 'table' with #caption, #header, #rows, and #empty. Not a raw HTML table in #markup. | Here's an example of a Drupal render array for a table of open orders with the requested columns and handling for the empty state:
```php
$build['orders'] = [
'#type' => 'table',
'#caption' => $this->t('Open orders for @user', ['@user' => $account->getDisplayName()]),
'#header' => [
$this->t('Order'),
$t... | true | must_contain_any: found: ["'table'", '#caption', '#empty']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["'table'", "#caption", "#empty"]}, {"kind": "must_not_contain", "values": ["#markup.*<table", "'#markup' => '<table"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B05 | false | 1 | Generate a Drupal render array for a table of open orders with columns: Order, Placed, Status. The table should handle the empty state. | A render array using #type => 'table' with #caption, #header, #rows, and #empty. Not a raw HTML table in #markup. | Here's an example of a Drupal render array for a table of open orders with the specified columns:
```php
$build = [
'#theme' => 'table',
'#header' => [
t('Order'),
t('Placed'),
t('Status'),
],
'#rows' => [],
'#empty' => [
'#markup' => t('No open orders found.'),
],
];
// Fetch the open ord... | true | must_contain_any: found: ["'table'", '#empty']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["'table'", "#caption", "#empty"]}, {"kind": "must_not_contain", "values": ["#markup.*<table", "'#markup' => '<table"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B05 | false | 2 | Generate a Drupal render array for a table of open orders with columns: Order, Placed, Status. The table should handle the empty state. | A render array using #type => 'table' with #caption, #header, #rows, and #empty. Not a raw HTML table in #markup. | Here's an example of a Drupal render array for a table of open orders with columns: Order, Placed, Status, and handling the empty state:
```php
$render_array = [
'#type' => 'table',
'#header' => [
t('Order'),
t('Placed'),
t('Status'),
],
'#rows' => [],
'#empty' => t('No open orders found.'),
];
... | true | must_contain_any: found: ["'table'", '#empty']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["'table'", "#caption", "#empty"]}, {"kind": "must_not_contain", "values": ["#markup.*<table", "'#markup' => '<table"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B05 | false | 3 | Generate a Drupal render array for a table of open orders with columns: Order, Placed, Status. The table should handle the empty state. | A render array using #type => 'table' with #caption, #header, #rows, and #empty. Not a raw HTML table in #markup. | Here's an example of a Drupal render array for a table of open orders with the specified columns:
```php
$rows = [
[
'order' => '123456',
'placed' => '2023-04-15 10:30 AM',
'status' => 'Pending',
],
[
'order' => '987654',
'placed' => '2023-04-14 03:45 PM',
'status' => 'Shipped',
],
//... | true | must_contain_any: found: ["'table'", '#empty']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["'table'", "#caption", "#empty"]}, {"kind": "must_not_contain", "values": ["#markup.*<table", "'#markup' => '<table"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B06 | true | 1 | A form has an 'internal_id' hidden field that should only be visible to administrators. Show how to hide it from non-admin users using the Drupal Form API accessibility-safe approach. | Uses #access => FALSE with a permission check (e.g. currentUser()->hasPermission()). Does NOT use CSS display:none or inline style to hide the element. | To hide the `'internal_id'` form field from non-admin users in an accessibility-safe way, you can use the `#access` property in the Drupal Form API. Here's an example:
```php
public function buildForm(array $form, FormStateInterface $form_state) {
$form['internal_id'] = [
'#type' => 'hidden',
'#value' => $th... | false | must_contain_any: found: ['#access']; php_lint: block 1: Errors parsing Standard input code | [{"kind": "must_contain_any", "values": ["#access"]}, {"kind": "must_not_contain", "values": ["'style' =>", "style=\"display", "style='display"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B06 | true | 2 | A form has an 'internal_id' hidden field that should only be visible to administrators. Show how to hide it from non-admin users using the Drupal Form API accessibility-safe approach. | Uses #access => FALSE with a permission check (e.g. currentUser()->hasPermission()). Does NOT use CSS display:none or inline style to hide the element. | To hide the 'internal_id' hidden field from non-admin users using the Drupal Form API accessibility-safe approach, you can follow these steps:
```php
$form['internal_id'] = [
'#type' => 'hidden',
'#value' => $entity->id(),
'#access' => $this->currentUser()->hasPermission('administer content'),
];
```
Here's ... | true | must_contain_any: found: ['#access']; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#access"]}, {"kind": "must_not_contain", "values": ["'style' =>", "style=\"display", "style='display"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B06 | true | 3 | A form has an 'internal_id' hidden field that should only be visible to administrators. Show how to hide it from non-admin users using the Drupal Form API accessibility-safe approach. | Uses #access => FALSE with a permission check (e.g. currentUser()->hasPermission()). Does NOT use CSS display:none or inline style to hide the element. | To hide the "internal_id" hidden field from non-admin users in an accessibility-safe way, you can use the `#access` property in the Drupal Form API. Here's an example:
```php
$form['internal_id'] = [
'#type' => 'hidden',
'#value' => $entity->id(),
'#access' => $this->currentUser()->hasPermission('administer c... | false | must_contain_any: found: ['#access']; must_not_contain: unwanted: ["'style' =>"]; php_lint: 1 block(s) OK | [{"kind": "must_contain_any", "values": ["#access"]}, {"kind": "must_not_contain", "values": ["'style' =>", "style=\"display", "style='display"]}, {"kind": "php_lint"}] | |
final | Claude 3 Haiku | amazee.ai gateway, Inspect provider | drupal-accessibility/drupal-a11y-fapi | B06 | false | 1 | A form has an 'internal_id' hidden field that should only be visible to administrators. Show how to hide it from non-admin users using the Drupal Form API accessibility-safe approach. | Uses #access => FALSE with a permission check (e.g. currentUser()->hasPermission()). Does NOT use CSS display:none or inline style to hide the element. | To hide the 'internal_id' field from non-admin users using the Drupal Form API accessibility-safe approach, you can follow these steps:
1. In your form definition, add the 'internal_id' field as a hidden field:
```php
$form['internal_id'] = [
'#type' => 'hidden',
'#default_value' => $entity->internal_id,
];
```
... | false | must_contain_any: missing all of: ['#access']; php_lint: 2 block(s) OK | [{"kind": "must_contain_any", "values": ["#access"]}, {"kind": "must_not_contain", "values": ["'style' =>", "style=\"display", "style='display"]}, {"kind": "php_lint"}] |
Subsets and Splits
No community queries yet
The top public SQL queries from the community will appear here once available.