@atlaskit/ads-mcp 0.6.4 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/index.js +15 -7
- package/dist/cjs/instructions.js +1 -1
- package/dist/cjs/tools/analyze-a11y/index.js +4 -4
- package/dist/cjs/tools/get-a11y-guidelines/guidelines.js +133 -0
- package/dist/cjs/tools/get-a11y-guidelines/index.js +13 -142
- package/dist/cjs/tools/get-all-icons/index.js +5 -4
- package/dist/cjs/tools/get-all-tokens/index.js +1 -1
- package/dist/cjs/tools/get-components/components.js +3549 -1493
- package/dist/cjs/tools/get-components/index.js +6 -13
- package/dist/cjs/tools/get-components/types.js +1 -0
- package/dist/cjs/tools/plan/index.js +7 -7
- package/dist/cjs/tools/search-components/index.js +8 -8
- package/dist/cjs/tools/search-icons/index.js +4 -4
- package/dist/cjs/tools/search-tokens/index.js +4 -4
- package/dist/cjs/tools/suggest-a11y-fixes/index.js +1 -1
- package/dist/es2019/index.js +18 -10
- package/dist/es2019/instructions.js +5 -5
- package/dist/es2019/tools/analyze-a11y/index.js +4 -47
- package/dist/es2019/tools/get-a11y-guidelines/guidelines.js +241 -0
- package/dist/es2019/tools/get-a11y-guidelines/index.js +8 -271
- package/dist/es2019/tools/get-all-icons/index.js +5 -17
- package/dist/es2019/tools/get-all-tokens/index.js +1 -8
- package/dist/es2019/tools/get-components/components.js +3550 -2397
- package/dist/es2019/tools/get-components/index.js +6 -15
- package/dist/es2019/tools/get-components/types.js +0 -0
- package/dist/es2019/tools/plan/index.js +28 -24
- package/dist/es2019/tools/search-components/index.js +8 -25
- package/dist/es2019/tools/search-icons/index.js +9 -26
- package/dist/es2019/tools/search-tokens/index.js +7 -20
- package/dist/es2019/tools/suggest-a11y-fixes/index.js +1 -13
- package/dist/esm/index.js +18 -10
- package/dist/esm/instructions.js +1 -1
- package/dist/esm/tools/analyze-a11y/index.js +4 -4
- package/dist/esm/tools/get-a11y-guidelines/guidelines.js +127 -0
- package/dist/esm/tools/get-a11y-guidelines/index.js +10 -139
- package/dist/esm/tools/get-all-icons/index.js +5 -4
- package/dist/esm/tools/get-all-tokens/index.js +1 -1
- package/dist/esm/tools/get-components/components.js +3549 -1493
- package/dist/esm/tools/get-components/index.js +6 -13
- package/dist/esm/tools/get-components/types.js +0 -0
- package/dist/esm/tools/plan/index.js +7 -7
- package/dist/esm/tools/search-components/index.js +8 -8
- package/dist/esm/tools/search-icons/index.js +4 -4
- package/dist/esm/tools/search-tokens/index.js +4 -4
- package/dist/esm/tools/suggest-a11y-fixes/index.js +1 -1
- package/dist/types/instructions.d.ts +1 -1
- package/dist/types/tools/get-a11y-guidelines/guidelines.d.ts +102 -0
- package/dist/types/tools/get-a11y-guidelines/index.d.ts +1 -2
- package/dist/types/tools/get-components/components.d.ts +9 -20
- package/dist/types/tools/get-components/types.d.ts +20 -0
- package/dist/types/tools/plan/index.d.ts +9 -9
- package/dist/types-ts4.5/instructions.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-a11y-guidelines/guidelines.d.ts +102 -0
- package/dist/types-ts4.5/tools/get-a11y-guidelines/index.d.ts +1 -2
- package/dist/types-ts4.5/tools/get-components/components.d.ts +9 -20
- package/dist/types-ts4.5/tools/get-components/types.d.ts +20 -0
- package/dist/types-ts4.5/tools/plan/index.d.ts +9 -9
- package/index.js +7 -11
- package/package.json +4 -3
- package/dist/cjs/schema.js +0 -11
- package/dist/es2019/schema.js +0 -13
- package/dist/esm/schema.js +0 -4
- package/dist/types/schema.d.ts +0 -9
- package/dist/types-ts4.5/schema.d.ts +0 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/ads-mcp
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`b51ba8af7cc1a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b51ba8af7cc1a) -
|
|
8
|
+
Switch ads-mcp to using esbuild-regsiter instead.
|
|
9
|
+
- [`b51ba8af7cc1a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b51ba8af7cc1a) -
|
|
10
|
+
Greatly decrease the resting system prompt token usages by reducing tool descriptions.
|
|
11
|
+
|
|
12
|
+
## 0.6.5
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`e3fc2f35e8191`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3fc2f35e8191) - -
|
|
17
|
+
Implemented a codegen that generates TypeScript code for the components list, which will be used
|
|
18
|
+
by @atlaskit/ads-mcp.
|
|
19
|
+
|
|
3
20
|
## 0.6.4
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -36,7 +36,13 @@ server.setRequestHandler(_types.ListToolsRequestSchema, /*#__PURE__*/(0, _asyncT
|
|
|
36
36
|
while (1) switch (_context.prev = _context.next) {
|
|
37
37
|
case 0:
|
|
38
38
|
return _context.abrupt("return", {
|
|
39
|
-
tools: [
|
|
39
|
+
tools: [_analyzeA11y.listAnalyzeA11yTool, _analyzeA11y.listAnalyzeLocalhostA11yTool, _getA11yGuidelines.listGetA11yGuidelinesTool, _getAllIcons.listGetAllIconsTool, _getAllTokens.listGetAllTokensTool, _getComponents.listGetComponentsTool, _plan.listPlanTool,
|
|
40
|
+
// NOTE: These are disabled as `ads_plan` should cover everything more performantly.
|
|
41
|
+
// When these are enabled, they result in token usage to describe them, even if never used.
|
|
42
|
+
// listSearchComponentsTool,
|
|
43
|
+
// listSearchIconsTool,
|
|
44
|
+
// listSearchTokensTool,
|
|
45
|
+
_suggestA11yFixes.listSuggestA11yFixesTool]
|
|
40
46
|
});
|
|
41
47
|
case 1:
|
|
42
48
|
case "end":
|
|
@@ -45,16 +51,18 @@ server.setRequestHandler(_types.ListToolsRequestSchema, /*#__PURE__*/(0, _asyncT
|
|
|
45
51
|
}, _callee);
|
|
46
52
|
})));
|
|
47
53
|
var callTools = {
|
|
54
|
+
ads_analyze_a11y: _analyzeA11y.analyzeA11yTool,
|
|
55
|
+
ads_analyze_localhost_a11y: _analyzeA11y.analyzeLocalhostA11yTool,
|
|
56
|
+
ads_get_a11y_guidelines: _getA11yGuidelines.getA11yGuidelinesTool,
|
|
57
|
+
ads_get_all_icons: _getAllIcons.getAllIconsTool,
|
|
48
58
|
ads_get_all_tokens: _getAllTokens.getAllTokensTool,
|
|
49
|
-
ads_search_tokens: _searchTokens.searchTokensTool,
|
|
50
59
|
ads_get_components: _getComponents.getComponentsTool,
|
|
60
|
+
ads_plan: _plan.planTool,
|
|
61
|
+
// NOTE: These should not actually be called as they're not in the `list_tools` endpoint.
|
|
62
|
+
// But there might be a reason to keep them around for backwards-compatibility.
|
|
51
63
|
ads_search_components: _searchComponents.searchComponentsTool,
|
|
52
|
-
ads_get_all_icons: _getAllIcons.getAllIconsTool,
|
|
53
64
|
ads_search_icons: _searchIcons.searchIconsTool,
|
|
54
|
-
|
|
55
|
-
ads_analyze_a11y: _analyzeA11y.analyzeA11yTool,
|
|
56
|
-
ads_analyze_localhost_a11y: _analyzeA11y.analyzeLocalhostA11yTool,
|
|
57
|
-
ads_get_a11y_guidelines: _getA11yGuidelines.getA11yGuidelinesTool,
|
|
65
|
+
ads_search_tokens: _searchTokens.searchTokensTool,
|
|
58
66
|
ads_suggest_a11y_fixes: _suggestA11yFixes.suggestA11yFixesTool
|
|
59
67
|
};
|
|
60
68
|
|
package/dist/cjs/instructions.js
CHANGED
|
@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.instructions = void 0;
|
|
7
|
-
var instructions = exports.instructions = "\nYou are an expert in the Atlassian Design System (
|
|
7
|
+
var instructions = exports.instructions = "\nYou are an expert in the Atlassian Design System (ADS).\nYou can search for tokens, icons, and components and return guidance on how to build user interfaces.\nYou have special accessibility knowledge and can ensure interfaces built with ADS components are accessible to all users.\nYou can analyze code for accessibility violations, provide specific fix suggestions, and offer guidance on accessibility best practices.\nThese tools will support you, but for deep research, you may also want to to fetch https://atlassian.design/llms.txt, https://atlassian.design/llms-a11y.txt, or https://atlassian.design/ directly.\n";
|
|
@@ -24,7 +24,7 @@ var inputSchema = _zod.z.object({
|
|
|
24
24
|
});
|
|
25
25
|
var listAnalyzeA11yTool = exports.listAnalyzeA11yTool = {
|
|
26
26
|
name: 'ads_analyze_a11y',
|
|
27
|
-
description:
|
|
27
|
+
description: 'Analyze React component code for accessibility violations using axe-core and generate ADS-specific suggestions.',
|
|
28
28
|
annotations: {
|
|
29
29
|
title: 'Analyze Accessibility',
|
|
30
30
|
readOnlyHint: true,
|
|
@@ -35,14 +35,14 @@ var listAnalyzeA11yTool = exports.listAnalyzeA11yTool = {
|
|
|
35
35
|
inputSchema: (0, _zodToJsonSchema.zodToJsonSchema)(inputSchema)
|
|
36
36
|
};
|
|
37
37
|
var urlInputSchema = _zod.z.object({
|
|
38
|
-
url: _zod.z.string().describe('The URL to analyze for accessibility (e.g. http://localhost:9000)'),
|
|
38
|
+
url: _zod.z.string().describe('The URL to analyze for accessibility (e.g. `http://localhost:9000`)'),
|
|
39
39
|
componentName: _zod.z.string().optional().describe('Name of the component being analyzed'),
|
|
40
40
|
context: _zod.z.string().optional().describe('Additional context about the component usage'),
|
|
41
|
-
selector: _zod.z.string().optional().describe('CSS selector to target a specific element for analysis (e.g.
|
|
41
|
+
selector: _zod.z.string().optional().describe('CSS selector to target a specific element for analysis (e.g. `#my-form` or `[data-role="button"]`)')
|
|
42
42
|
});
|
|
43
43
|
var listAnalyzeLocalhostA11yTool = exports.listAnalyzeLocalhostA11yTool = {
|
|
44
44
|
name: 'ads_analyze_localhost_a11y',
|
|
45
|
-
description: "Analyze a live web page
|
|
45
|
+
description: "Analyze a live web page for accessibility violations using axe-core and generate ADS-specific suggestions.",
|
|
46
46
|
annotations: {
|
|
47
47
|
title: 'Analyze Localhost Accessibility',
|
|
48
48
|
readOnlyHint: true,
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.accessibilityGuidelines = void 0;
|
|
7
|
+
// Comprehensive accessibility guidelines based on llms-a11y.txt
|
|
8
|
+
var accessibilityGuidelines = exports.accessibilityGuidelines = {
|
|
9
|
+
buttons: {
|
|
10
|
+
title: 'Button and Interactive Element Accessibility',
|
|
11
|
+
description: 'Guidelines for making buttons and interactive elements accessible',
|
|
12
|
+
guidelines: ['Always provide accessible labels for buttons', 'Use Button component for standard interactions', 'Use Focusable component for custom interactive elements', 'Avoid disabled buttons with tooltips', 'Ensure focus indicators are visible', 'Support keyboard navigation (Enter, Space)', 'Use descriptive labels that explain the action'],
|
|
13
|
+
codeExamples: [{
|
|
14
|
+
title: 'Accessible Button with Icon',
|
|
15
|
+
code: "import { Button } from '@atlaskit/button';\nimport { VisuallyHidden } from '@atlaskit/visually-hidden';\n\n<Button aria-label=\"Close dialog\" onClick={handleClose}>\n <CloseIcon />\n</Button>"
|
|
16
|
+
}, {
|
|
17
|
+
title: 'Custom Interactive Element',
|
|
18
|
+
code: "import { Focusable } from '@atlaskit/primitives/compiled';\n\n<Focusable as=\"div\" onClick={handleClick} onKeyDown={handleKeyDown}>\n Interactive content\n</Focusable>"
|
|
19
|
+
}],
|
|
20
|
+
bestPractices: ['Never disable buttons without providing alternatives', 'Use VisuallyHidden for screen reader text', 'Test with keyboard navigation only', 'Ensure focus indicators meet contrast requirements']
|
|
21
|
+
},
|
|
22
|
+
forms: {
|
|
23
|
+
title: 'Form and Input Accessibility',
|
|
24
|
+
description: 'Guidelines for making forms and inputs accessible',
|
|
25
|
+
guidelines: ['Use TextField component for consistent labeling', 'Associate labels with inputs using id and htmlFor', 'Provide clear error messages with aria-describedby', 'Use MessageWrapper for form validation announcements', 'Use aria-required for required fields', 'Group related form elements with fieldset and legend'],
|
|
26
|
+
codeExamples: [{
|
|
27
|
+
title: 'Accessible Text Field',
|
|
28
|
+
code: "import { TextField } from '@atlaskit/textfield';\n\n<TextField\n label=\"Email address\"\n isRequired\n aria-describedby=\"email-help\"\n id=\"email-input\"\n/>\n<div id=\"email-help\">Enter your work email address</div>"
|
|
29
|
+
}, {
|
|
30
|
+
title: 'Form Validation with Error Messages',
|
|
31
|
+
code: "import { TextField } from '@atlaskit/textfield';\n\n<TextField\n label=\"Password\"\n isInvalid\n aria-invalid=\"true\"\n aria-describedby=\"password-error\"\n/>\n<div id=\"password-error\" role=\"alert\">\n Password must be at least 8 characters long\n</div>"
|
|
32
|
+
}],
|
|
33
|
+
bestPractices: ['Never rely on placeholder text for critical information', 'Provide helpful error messages and descriptions', 'Use proper form validation with aria-invalid', 'Test form completion with screen readers']
|
|
34
|
+
},
|
|
35
|
+
images: {
|
|
36
|
+
title: 'Image and Media Accessibility',
|
|
37
|
+
description: 'Guidelines for making images and media accessible',
|
|
38
|
+
guidelines: ['Use Image component with proper alt text', 'Keep alt text under 125 characters', 'Leave alt="" for decorative images', 'Describe the purpose, not just the content', 'Don\'t start with "Image of..." or "Picture of..."', 'Provide detailed descriptions for complex images'],
|
|
39
|
+
codeExamples: [{
|
|
40
|
+
title: 'Decorative Image',
|
|
41
|
+
code: "import { Image } from '@atlaskit/image';\n\n<Image src=\"decorative.jpg\" alt=\"\" />"
|
|
42
|
+
}, {
|
|
43
|
+
title: 'Informative Image',
|
|
44
|
+
code: "import { Image } from '@atlaskit/image';\n\n<Image\n src=\"chart.png\"\n alt=\"Bar chart showing Q4 sales increased 25% over Q3\"\n/>"
|
|
45
|
+
}, {
|
|
46
|
+
title: 'Complex Image with Description',
|
|
47
|
+
code: "import { Image } from '@atlaskit/image';\n\n<Image\n src=\"complex-diagram.png\"\n alt=\"\"\n aria-describedby=\"diagram-description\"\n/>\n<div id=\"diagram-description\">\n Detailed description of the diagram content...\n</div>"
|
|
48
|
+
}],
|
|
49
|
+
bestPractices: ['For important information, use text instead of images', 'Avoid images of text', 'Provide alternative formats for complex visual content', 'Test with screen readers to ensure proper announcement']
|
|
50
|
+
},
|
|
51
|
+
colors: {
|
|
52
|
+
title: 'Color and Contrast Accessibility',
|
|
53
|
+
description: 'Guidelines for using colors accessibly',
|
|
54
|
+
guidelines: ['Use design tokens for consistent contrast ratios', 'Never rely on color alone for information', 'Use color.text tokens for proper contrast', 'Test with high contrast mode', 'Ensure 4.5:1 contrast ratio for normal text', 'Ensure 3:1 contrast ratio for large text'],
|
|
55
|
+
codeExamples: [{
|
|
56
|
+
title: 'Using Design Tokens for Colors',
|
|
57
|
+
code: "import { token } from '@atlaskit/tokens';\n\nconst styles = css({\n color: token('color.text'),\n backgroundColor: token('color.background.neutral'),\n});"
|
|
58
|
+
}, {
|
|
59
|
+
title: 'Text Component with Color',
|
|
60
|
+
code: "import { Text } from '@atlaskit/primitives/compiled';\n\n<Text color=\"color.text.danger\">Error message</Text>\n<Text color=\"color.text.success\">Success message</Text>"
|
|
61
|
+
}],
|
|
62
|
+
bestPractices: ['Use color.text tokens for primary text', 'Use color.text.subtle sparingly for secondary text', 'Avoid color.text.disabled for critical information', 'Test with different color vision types']
|
|
63
|
+
},
|
|
64
|
+
focus: {
|
|
65
|
+
title: 'Focus Management',
|
|
66
|
+
description: 'Guidelines for proper focus management',
|
|
67
|
+
guidelines: ['Ensure logical tab order', 'Provide visible focus indicators', 'Handle focus trapping in modals', 'Return focus when dialogs close', 'Use Focusable component for custom elements', 'Manage focus in dynamic content'],
|
|
68
|
+
codeExamples: [{
|
|
69
|
+
title: 'Focus Management in Modal',
|
|
70
|
+
code: "import { useRef, useEffect } from 'react';\n\nconst modalRef = useRef<HTMLDivElement>(null);\n\nuseEffect(() => {\n if (isOpen && modalRef.current) {\n modalRef.current.focus();\n }\n}, [isOpen]);"
|
|
71
|
+
}, {
|
|
72
|
+
title: 'Custom Focusable Element',
|
|
73
|
+
code: "import { Focusable } from '@atlaskit/primitives/compiled';\n\n<Focusable\n as=\"div\"\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n handleActivate();\n }\n }}\n>\n Custom focusable element\n</Focusable>"
|
|
74
|
+
}],
|
|
75
|
+
bestPractices: ['Test focus order with keyboard navigation', 'Ensure focus indicators are visible in all themes', 'Handle focus restoration when components unmount', 'Use focus trapping for modal dialogs']
|
|
76
|
+
},
|
|
77
|
+
keyboard: {
|
|
78
|
+
title: 'Keyboard Accessibility',
|
|
79
|
+
description: 'Guidelines for keyboard accessibility',
|
|
80
|
+
guidelines: ['Support standard keyboard interactions', 'Use Enter and Space for activation', 'Use Escape for closing/canceling', 'Support arrow keys for navigation', 'Provide keyboard shortcuts for power users', 'Ensure all interactive elements are keyboard accessible'],
|
|
81
|
+
codeExamples: [{
|
|
82
|
+
title: 'Keyboard Event Handling',
|
|
83
|
+
code: "const handleKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n handleActivate();\n break;\n case 'Escape':\n handleClose();\n break;\n case 'Tab':\n // Handle focus management\n break;\n }\n};"
|
|
84
|
+
}],
|
|
85
|
+
bestPractices: ['Test with keyboard navigation only', 'Ensure logical tab order', 'Provide keyboard alternatives for mouse interactions', 'Support both Enter and Space for activation']
|
|
86
|
+
},
|
|
87
|
+
screenReaders: {
|
|
88
|
+
title: 'Screen Reader Support',
|
|
89
|
+
description: 'Guidelines for screen reader accessibility',
|
|
90
|
+
guidelines: ['Use Announcer component for dynamic content', 'Provide skip links for keyboard users', 'Use proper heading hierarchy', 'Use semantic HTML elements', 'Provide live regions for status updates', 'Use VisuallyHidden for screen reader text'],
|
|
91
|
+
codeExamples: [{
|
|
92
|
+
title: 'Screen Reader Announcements',
|
|
93
|
+
code: "import { Announcer } from '@atlaskit/announcer';\n\n<Announcer\n message={`${count} items selected`}\n liveMode=\"polite\"\n shouldAnnounce={true}\n/>"
|
|
94
|
+
}, {
|
|
95
|
+
title: 'Skip Links',
|
|
96
|
+
code: "<a href=\"#main-content\" className=\"skip-link\">\n Skip to main content\n</a>"
|
|
97
|
+
}],
|
|
98
|
+
bestPractices: ['Test with multiple screen readers (NVDA, JAWS, VoiceOver)', 'Use aria-live="polite" for status updates', 'Use aria-live="assertive" for critical alerts', 'Avoid announcing the same message repeatedly']
|
|
99
|
+
},
|
|
100
|
+
aria: {
|
|
101
|
+
title: 'ARIA Usage Guidelines',
|
|
102
|
+
description: 'Guidelines for using ARIA attributes',
|
|
103
|
+
guidelines: ['Use ARIA sparingly - prefer semantic HTML', 'Use proper ARIA roles and states', 'Provide live regions for dynamic content', 'Use landmarks for page structure', 'Ensure ARIA attributes are supported', 'Test ARIA implementations with screen readers'],
|
|
104
|
+
codeExamples: [{
|
|
105
|
+
title: 'Live Region for Status Updates',
|
|
106
|
+
code: "<div aria-live=\"polite\" role=\"status\">\n {statusMessage}\n</div>"
|
|
107
|
+
}, {
|
|
108
|
+
title: 'Landmark Navigation',
|
|
109
|
+
code: "<nav role=\"navigation\" aria-label=\"Main navigation\">\n Navigation content\n</nav>"
|
|
110
|
+
}],
|
|
111
|
+
bestPractices: ['Use semantic HTML elements when possible', 'Test ARIA implementations thoroughly', 'Keep ARIA usage simple and clear', 'Document custom ARIA patterns']
|
|
112
|
+
},
|
|
113
|
+
wcag: {
|
|
114
|
+
title: 'WCAG Compliance',
|
|
115
|
+
description: 'WCAG 2.1 AA compliance guidelines',
|
|
116
|
+
guidelines: ['Ensure information is perceivable', 'Make interface components operable', 'Ensure information is understandable', 'Make content robust and compatible', 'Test with multiple assistive technologies', 'Follow WCAG 2.1 AA success criteria'],
|
|
117
|
+
codeExamples: [{
|
|
118
|
+
title: 'WCAG Compliant Component',
|
|
119
|
+
code: "// Example of a WCAG compliant button\n<Focusable\n as=\"button\"\n aria-label=\"Save changes\"\n onClick={handleSave}\n onKeyDown={handleKeyDown}\n>\n <SaveIcon />\n <VisuallyHidden>Save changes</VisuallyHidden>\n</Focusable>"
|
|
120
|
+
}],
|
|
121
|
+
bestPractices: ['Test with automated accessibility tools', 'Conduct manual accessibility testing', 'Test with users who have disabilities', 'Document accessibility compliance']
|
|
122
|
+
},
|
|
123
|
+
general: {
|
|
124
|
+
title: 'General Accessibility Principles',
|
|
125
|
+
description: 'General accessibility principles and best practices',
|
|
126
|
+
guidelines: ['Design for people, not just compliance', 'Consider accessibility from the start', 'Test with real users and assistive technologies', 'Provide multiple ways to accomplish tasks', 'Use inclusive design principles', 'Test with different abilities and technologies'],
|
|
127
|
+
codeExamples: [{
|
|
128
|
+
title: 'Inclusive Design Example',
|
|
129
|
+
code: "// Component that works for everyone\n<Focusable\n as=\"button\"\n onClick={handleAction}\n aria-label=\"Clear form data\"\n onKeyDown={handleKeyDown}\n>\n <TrashIcon />\n <VisuallyHidden>Clear all form data</VisuallyHidden>\n</Focusable>"
|
|
130
|
+
}],
|
|
131
|
+
bestPractices: ['Start with semantic HTML', 'Add ARIA when necessary', 'Test early and often', 'Involve users with disabilities in testing', 'Keep accessibility in mind throughout development']
|
|
132
|
+
}
|
|
133
|
+
};
|
|
@@ -10,15 +10,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
10
10
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
11
11
|
var _zod = require("zod");
|
|
12
12
|
var _zodToJsonSchema = require("zod-to-json-schema");
|
|
13
|
+
var _guidelines = require("./guidelines");
|
|
13
14
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
15
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
|
+
var topics = Object.keys(_guidelines.accessibilityGuidelines);
|
|
15
17
|
var inputSchema = _zod.z.object({
|
|
16
|
-
topic: _zod.z.
|
|
17
|
-
component: _zod.z.string().optional().describe('Component name to get specific accessibility guidance for')
|
|
18
|
+
topic: _zod.z.string().optional().describe('Select the topic to get the accessibility guidelines for: ' + topics.join(', '))
|
|
18
19
|
});
|
|
19
20
|
var listGetA11yGuidelinesTool = exports.listGetA11yGuidelinesTool = {
|
|
20
21
|
name: 'ads_get_a11y_guidelines',
|
|
21
|
-
description:
|
|
22
|
+
description: 'Get accessibility guidelines and best practices from the Atlassian Design System.',
|
|
22
23
|
annotations: {
|
|
23
24
|
title: 'Get Accessibility Guidelines',
|
|
24
25
|
readOnlyHint: true,
|
|
@@ -28,152 +29,23 @@ var listGetA11yGuidelinesTool = exports.listGetA11yGuidelinesTool = {
|
|
|
28
29
|
},
|
|
29
30
|
inputSchema: (0, _zodToJsonSchema.zodToJsonSchema)(inputSchema)
|
|
30
31
|
};
|
|
31
|
-
|
|
32
|
-
// Comprehensive accessibility guidelines based on llms-a11y.txt
|
|
33
|
-
var accessibilityGuidelines = {
|
|
34
|
-
buttons: {
|
|
35
|
-
title: 'Button and Interactive Element Accessibility',
|
|
36
|
-
description: 'Guidelines for making buttons and interactive elements accessible',
|
|
37
|
-
guidelines: ['Always provide accessible labels for buttons', 'Use Button component for standard interactions', 'Use Focusable component for custom interactive elements', 'Avoid disabled buttons with tooltips', 'Ensure focus indicators are visible', 'Support keyboard navigation (Enter, Space)', 'Use descriptive labels that explain the action'],
|
|
38
|
-
codeExamples: [{
|
|
39
|
-
title: 'Accessible Button with Icon',
|
|
40
|
-
code: "import { Button } from '@atlaskit/button';\nimport { VisuallyHidden } from '@atlaskit/visually-hidden';\n\n<Button aria-label=\"Close dialog\" onClick={handleClose}>\n <CloseIcon />\n</Button>"
|
|
41
|
-
}, {
|
|
42
|
-
title: 'Custom Interactive Element',
|
|
43
|
-
code: "import { Focusable } from '@atlaskit/primitives/compiled';\n\n<Focusable as=\"div\" onClick={handleClick} onKeyDown={handleKeyDown}>\n Interactive content\n</Focusable>"
|
|
44
|
-
}],
|
|
45
|
-
bestPractices: ['Never disable buttons without providing alternatives', 'Use VisuallyHidden for screen reader text', 'Test with keyboard navigation only', 'Ensure focus indicators meet contrast requirements']
|
|
46
|
-
},
|
|
47
|
-
forms: {
|
|
48
|
-
title: 'Form and Input Accessibility',
|
|
49
|
-
description: 'Guidelines for making forms and inputs accessible',
|
|
50
|
-
guidelines: ['Use TextField component for consistent labeling', 'Associate labels with inputs using id and htmlFor', 'Provide clear error messages with aria-describedby', 'Use MessageWrapper for form validation announcements', 'Use aria-required for required fields', 'Group related form elements with fieldset and legend'],
|
|
51
|
-
codeExamples: [{
|
|
52
|
-
title: 'Accessible Text Field',
|
|
53
|
-
code: "import { TextField } from '@atlaskit/textfield';\n\n<TextField\n label=\"Email address\"\n isRequired\n aria-describedby=\"email-help\"\n id=\"email-input\"\n/>\n<div id=\"email-help\">Enter your work email address</div>"
|
|
54
|
-
}, {
|
|
55
|
-
title: 'Form Validation with Error Messages',
|
|
56
|
-
code: "import { TextField } from '@atlaskit/textfield';\n\n<TextField\n label=\"Password\"\n isInvalid\n aria-invalid=\"true\"\n aria-describedby=\"password-error\"\n/>\n<div id=\"password-error\" role=\"alert\">\n Password must be at least 8 characters long\n</div>"
|
|
57
|
-
}],
|
|
58
|
-
bestPractices: ['Never rely on placeholder text for critical information', 'Provide helpful error messages and descriptions', 'Use proper form validation with aria-invalid', 'Test form completion with screen readers']
|
|
59
|
-
},
|
|
60
|
-
images: {
|
|
61
|
-
title: 'Image and Media Accessibility',
|
|
62
|
-
description: 'Guidelines for making images and media accessible',
|
|
63
|
-
guidelines: ['Use Image component with proper alt text', 'Keep alt text under 125 characters', 'Leave alt="" for decorative images', 'Describe the purpose, not just the content', 'Don\'t start with "Image of..." or "Picture of..."', 'Provide detailed descriptions for complex images'],
|
|
64
|
-
codeExamples: [{
|
|
65
|
-
title: 'Decorative Image',
|
|
66
|
-
code: "import { Image } from '@atlaskit/image';\n\n<Image src=\"decorative.jpg\" alt=\"\" />"
|
|
67
|
-
}, {
|
|
68
|
-
title: 'Informative Image',
|
|
69
|
-
code: "import { Image } from '@atlaskit/image';\n\n<Image\n src=\"chart.png\"\n alt=\"Bar chart showing Q4 sales increased 25% over Q3\"\n/>"
|
|
70
|
-
}, {
|
|
71
|
-
title: 'Complex Image with Description',
|
|
72
|
-
code: "import { Image } from '@atlaskit/image';\n\n<Image\n src=\"complex-diagram.png\"\n alt=\"\"\n aria-describedby=\"diagram-description\"\n/>\n<div id=\"diagram-description\">\n Detailed description of the diagram content...\n</div>"
|
|
73
|
-
}],
|
|
74
|
-
bestPractices: ['For important information, use text instead of images', 'Avoid images of text', 'Provide alternative formats for complex visual content', 'Test with screen readers to ensure proper announcement']
|
|
75
|
-
},
|
|
76
|
-
colors: {
|
|
77
|
-
title: 'Color and Contrast Accessibility',
|
|
78
|
-
description: 'Guidelines for using colors accessibly',
|
|
79
|
-
guidelines: ['Use design tokens for consistent contrast ratios', 'Never rely on color alone for information', 'Use color.text tokens for proper contrast', 'Test with high contrast mode', 'Ensure 4.5:1 contrast ratio for normal text', 'Ensure 3:1 contrast ratio for large text'],
|
|
80
|
-
codeExamples: [{
|
|
81
|
-
title: 'Using Design Tokens for Colors',
|
|
82
|
-
code: "import { token } from '@atlaskit/tokens';\n\nconst styles = css({\n color: token('color.text'),\n backgroundColor: token('color.background.neutral'),\n});"
|
|
83
|
-
}, {
|
|
84
|
-
title: 'Text Component with Color',
|
|
85
|
-
code: "import { Text } from '@atlaskit/primitives/compiled';\n\n<Text color=\"color.text.danger\">Error message</Text>\n<Text color=\"color.text.success\">Success message</Text>"
|
|
86
|
-
}],
|
|
87
|
-
bestPractices: ['Use color.text tokens for primary text', 'Use color.text.subtle sparingly for secondary text', 'Avoid color.text.disabled for critical information', 'Test with different color vision types']
|
|
88
|
-
},
|
|
89
|
-
focus: {
|
|
90
|
-
title: 'Focus Management',
|
|
91
|
-
description: 'Guidelines for proper focus management',
|
|
92
|
-
guidelines: ['Ensure logical tab order', 'Provide visible focus indicators', 'Handle focus trapping in modals', 'Return focus when dialogs close', 'Use Focusable component for custom elements', 'Manage focus in dynamic content'],
|
|
93
|
-
codeExamples: [{
|
|
94
|
-
title: 'Focus Management in Modal',
|
|
95
|
-
code: "import { useRef, useEffect } from 'react';\n\nconst modalRef = useRef<HTMLDivElement>(null);\n\nuseEffect(() => {\n if (isOpen && modalRef.current) {\n modalRef.current.focus();\n }\n}, [isOpen]);"
|
|
96
|
-
}, {
|
|
97
|
-
title: 'Custom Focusable Element',
|
|
98
|
-
code: "import { Focusable } from '@atlaskit/primitives/compiled';\n\n<Focusable\n as=\"div\"\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n handleActivate();\n }\n }}\n>\n Custom focusable element\n</Focusable>"
|
|
99
|
-
}],
|
|
100
|
-
bestPractices: ['Test focus order with keyboard navigation', 'Ensure focus indicators are visible in all themes', 'Handle focus restoration when components unmount', 'Use focus trapping for modal dialogs']
|
|
101
|
-
},
|
|
102
|
-
keyboard: {
|
|
103
|
-
title: 'Keyboard Accessibility',
|
|
104
|
-
description: 'Guidelines for keyboard accessibility',
|
|
105
|
-
guidelines: ['Support standard keyboard interactions', 'Use Enter and Space for activation', 'Use Escape for closing/canceling', 'Support arrow keys for navigation', 'Provide keyboard shortcuts for power users', 'Ensure all interactive elements are keyboard accessible'],
|
|
106
|
-
codeExamples: [{
|
|
107
|
-
title: 'Keyboard Event Handling',
|
|
108
|
-
code: "const handleKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n handleActivate();\n break;\n case 'Escape':\n handleClose();\n break;\n case 'Tab':\n // Handle focus management\n break;\n }\n};"
|
|
109
|
-
}],
|
|
110
|
-
bestPractices: ['Test with keyboard navigation only', 'Ensure logical tab order', 'Provide keyboard alternatives for mouse interactions', 'Support both Enter and Space for activation']
|
|
111
|
-
},
|
|
112
|
-
screenReaders: {
|
|
113
|
-
title: 'Screen Reader Support',
|
|
114
|
-
description: 'Guidelines for screen reader accessibility',
|
|
115
|
-
guidelines: ['Use Announcer component for dynamic content', 'Provide skip links for keyboard users', 'Use proper heading hierarchy', 'Use semantic HTML elements', 'Provide live regions for status updates', 'Use VisuallyHidden for screen reader text'],
|
|
116
|
-
codeExamples: [{
|
|
117
|
-
title: 'Screen Reader Announcements',
|
|
118
|
-
code: "import { Announcer } from '@atlaskit/announcer';\n\n<Announcer\n message={`${count} items selected`}\n liveMode=\"polite\"\n shouldAnnounce={true}\n/>"
|
|
119
|
-
}, {
|
|
120
|
-
title: 'Skip Links',
|
|
121
|
-
code: "<a href=\"#main-content\" className=\"skip-link\">\n Skip to main content\n</a>"
|
|
122
|
-
}],
|
|
123
|
-
bestPractices: ['Test with multiple screen readers (NVDA, JAWS, VoiceOver)', 'Use aria-live="polite" for status updates', 'Use aria-live="assertive" for critical alerts', 'Avoid announcing the same message repeatedly']
|
|
124
|
-
},
|
|
125
|
-
aria: {
|
|
126
|
-
title: 'ARIA Usage Guidelines',
|
|
127
|
-
description: 'Guidelines for using ARIA attributes',
|
|
128
|
-
guidelines: ['Use ARIA sparingly - prefer semantic HTML', 'Use proper ARIA roles and states', 'Provide live regions for dynamic content', 'Use landmarks for page structure', 'Ensure ARIA attributes are supported', 'Test ARIA implementations with screen readers'],
|
|
129
|
-
codeExamples: [{
|
|
130
|
-
title: 'Live Region for Status Updates',
|
|
131
|
-
code: "<div aria-live=\"polite\" role=\"status\">\n {statusMessage}\n</div>"
|
|
132
|
-
}, {
|
|
133
|
-
title: 'Landmark Navigation',
|
|
134
|
-
code: "<nav role=\"navigation\" aria-label=\"Main navigation\">\n Navigation content\n</nav>"
|
|
135
|
-
}],
|
|
136
|
-
bestPractices: ['Use semantic HTML elements when possible', 'Test ARIA implementations thoroughly', 'Keep ARIA usage simple and clear', 'Document custom ARIA patterns']
|
|
137
|
-
},
|
|
138
|
-
wcag: {
|
|
139
|
-
title: 'WCAG Compliance',
|
|
140
|
-
description: 'WCAG 2.1 AA compliance guidelines',
|
|
141
|
-
guidelines: ['Ensure information is perceivable', 'Make interface components operable', 'Ensure information is understandable', 'Make content robust and compatible', 'Test with multiple assistive technologies', 'Follow WCAG 2.1 AA success criteria'],
|
|
142
|
-
codeExamples: [{
|
|
143
|
-
title: 'WCAG Compliant Component',
|
|
144
|
-
code: "// Example of a WCAG compliant button\n<Focusable\n as=\"button\"\n aria-label=\"Save changes\"\n onClick={handleSave}\n onKeyDown={handleKeyDown}\n>\n <SaveIcon />\n <VisuallyHidden>Save changes</VisuallyHidden>\n</Focusable>"
|
|
145
|
-
}],
|
|
146
|
-
bestPractices: ['Test with automated accessibility tools', 'Conduct manual accessibility testing', 'Test with users who have disabilities', 'Document accessibility compliance']
|
|
147
|
-
},
|
|
148
|
-
general: {
|
|
149
|
-
title: 'General Accessibility Principles',
|
|
150
|
-
description: 'General accessibility principles and best practices',
|
|
151
|
-
guidelines: ['Design for people, not just compliance', 'Consider accessibility from the start', 'Test with real users and assistive technologies', 'Provide multiple ways to accomplish tasks', 'Use inclusive design principles', 'Test with different abilities and technologies'],
|
|
152
|
-
codeExamples: [{
|
|
153
|
-
title: 'Inclusive Design Example',
|
|
154
|
-
code: "// Component that works for everyone\n<Focusable\n as=\"button\"\n onClick={handleAction}\n aria-label=\"Clear form data\"\n onKeyDown={handleKeyDown}\n>\n <TrashIcon />\n <VisuallyHidden>Clear all form data</VisuallyHidden>\n</Focusable>"
|
|
155
|
-
}],
|
|
156
|
-
bestPractices: ['Start with semantic HTML', 'Add ARIA when necessary', 'Test early and often', 'Involve users with disabilities in testing', 'Keep accessibility in mind throughout development']
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
32
|
var getA11yGuidelinesTool = exports.getA11yGuidelinesTool = /*#__PURE__*/function () {
|
|
160
|
-
var
|
|
161
|
-
var topic,
|
|
33
|
+
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
|
|
34
|
+
var topic, guidelines;
|
|
162
35
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
163
36
|
while (1) switch (_context.prev = _context.next) {
|
|
164
37
|
case 0:
|
|
165
|
-
topic =
|
|
166
|
-
if (!(topic && accessibilityGuidelines[topic])) {
|
|
38
|
+
topic = _ref.topic;
|
|
39
|
+
if (!(topic && _guidelines.accessibilityGuidelines[topic])) {
|
|
167
40
|
_context.next = 4;
|
|
168
41
|
break;
|
|
169
42
|
}
|
|
170
|
-
guidelines = accessibilityGuidelines[topic];
|
|
43
|
+
guidelines = _guidelines.accessibilityGuidelines[topic];
|
|
171
44
|
return _context.abrupt("return", {
|
|
172
45
|
content: [{
|
|
173
46
|
type: 'text',
|
|
174
47
|
text: JSON.stringify(_objectSpread(_objectSpread({
|
|
175
|
-
topic: topic
|
|
176
|
-
component: component
|
|
48
|
+
topic: topic
|
|
177
49
|
}, guidelines), {}, {
|
|
178
50
|
additionalResources: ['https://atlassian.design/llms-a11y.txt - Complete ADS accessibility documentation', 'https://atlassian.design/foundations/accessibility - ADS accessibility foundation', 'https://www.w3.org/WAI/WCAG21/quickref/ - WCAG 2.1 guidelines']
|
|
179
51
|
}), null, 2)
|
|
@@ -184,10 +56,9 @@ var getA11yGuidelinesTool = exports.getA11yGuidelinesTool = /*#__PURE__*/functio
|
|
|
184
56
|
content: [{
|
|
185
57
|
type: 'text',
|
|
186
58
|
text: JSON.stringify({
|
|
187
|
-
availableTopics:
|
|
188
|
-
component: component,
|
|
59
|
+
availableTopics: topics,
|
|
189
60
|
message: 'Specify a topic to get detailed guidelines, or use "general" for overview',
|
|
190
|
-
guidelines: accessibilityGuidelines,
|
|
61
|
+
guidelines: _guidelines.accessibilityGuidelines,
|
|
191
62
|
additionalResources: ['https://atlassian.design/llms-a11y.txt - Complete ADS accessibility documentation', 'https://atlassian.design/foundations/accessibility - ADS accessibility foundation']
|
|
192
63
|
}, null, 2)
|
|
193
64
|
}]
|
|
@@ -199,6 +70,6 @@ var getA11yGuidelinesTool = exports.getA11yGuidelinesTool = /*#__PURE__*/functio
|
|
|
199
70
|
}, _callee);
|
|
200
71
|
}));
|
|
201
72
|
return function getA11yGuidelinesTool(_x) {
|
|
202
|
-
return
|
|
73
|
+
return _ref2.apply(this, arguments);
|
|
203
74
|
};
|
|
204
75
|
}();
|
|
@@ -8,8 +8,9 @@ exports.listGetAllIconsTool = exports.getAllIconsTool = void 0;
|
|
|
8
8
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
9
9
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
+
var _zod = require("zod");
|
|
12
|
+
var _zodToJsonSchema = require("zod-to-json-schema");
|
|
11
13
|
var _metadata = require("@atlaskit/icon/metadata");
|
|
12
|
-
var _schema = require("../../schema");
|
|
13
14
|
var icons = Object.entries(_metadata.coreIconMetadata).map(function (_ref) {
|
|
14
15
|
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
15
16
|
_key = _ref2[0],
|
|
@@ -27,15 +28,15 @@ var icons = Object.entries(_metadata.coreIconMetadata).map(function (_ref) {
|
|
|
27
28
|
});
|
|
28
29
|
var listGetAllIconsTool = exports.listGetAllIconsTool = {
|
|
29
30
|
name: 'ads_get_all_icons',
|
|
30
|
-
description: "
|
|
31
|
+
description: "Fetch all Atlassian Design System icons. Only use when `ads_search_icons` does not return what you're looking for.",
|
|
31
32
|
annotations: {
|
|
32
|
-
title: 'Get ADS icons',
|
|
33
|
+
title: 'Get all ADS icons',
|
|
33
34
|
readOnlyHint: true,
|
|
34
35
|
destructiveHint: false,
|
|
35
36
|
idempotentHint: true,
|
|
36
37
|
openWorldHint: true
|
|
37
38
|
},
|
|
38
|
-
inputSchema:
|
|
39
|
+
inputSchema: (0, _zodToJsonSchema.zodToJsonSchema)(_zod.z.object({}))
|
|
39
40
|
};
|
|
40
41
|
var getAllIconsTool = exports.getAllIconsTool = /*#__PURE__*/function () {
|
|
41
42
|
var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
|
|
@@ -13,7 +13,7 @@ var _tokenMetadata = require("@atlaskit/tokens/token-metadata");
|
|
|
13
13
|
var inputSchema = _zod.z.object({});
|
|
14
14
|
var listGetAllTokensTool = exports.listGetAllTokensTool = {
|
|
15
15
|
name: 'ads_get_all_tokens',
|
|
16
|
-
description: "
|
|
16
|
+
description: "Fetch all Atlassian Design System tokens. Only use when `ads_search_tokens` does not return what you're looking for.",
|
|
17
17
|
annotations: {
|
|
18
18
|
title: 'Get all ADS tokens',
|
|
19
19
|
readOnlyHint: true,
|