@aishware/react-a11y-rules-web 0.1.0

package/dist/rules/roles.js

@@ -0,0 +1,248 @@
+import { INTERACTIVE_ROLES, INTERACTIVE_TAGS, hasAttr, isAriaHidden, isPresentational, staticString, staticValue, } from '@react-a11y/core';
+import { defineRule } from '../util.js';
+/** Interaction handlers that imply the element is meant to be operated. */
+const HANDLER_PROPS = [
+    'onClick', 'onDoubleClick', 'onMouseDown', 'onMouseUp',
+    'onKeyDown', 'onKeyUp', 'onKeyPress', 'onTouchStart', 'onTouchEnd',
+];
+/**
+ * Semantic HTML elements with a non-interactive implicit role. `div`/`span`
+ * are deliberately excluded — they are generic and are the recommended escape
+ * hatch for taking on a role, so flagging them would be noise.
+ */
+const NONINTERACTIVE_TAGS = new Set([
+    'main', 'nav', 'article', 'section', 'aside', 'header', 'footer',
+    'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p',
+    'figure', 'figcaption', 'blockquote',
+    'table', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'caption',
+    'address', 'hr', 'output', 'img', 'fieldset', 'legend',
+]);
+/** ARIA roles that do not expose an interactive widget. */
+const NONINTERACTIVE_ROLES = new Set([
+    'article', 'banner', 'complementary', 'contentinfo', 'definition', 'directory',
+    'document', 'feed', 'figure', 'group', 'heading', 'img', 'list', 'listitem',
+    'main', 'math', 'navigation', 'note', 'region', 'status', 'table', 'term',
+    'time', 'tooltip', 'paragraph',
+]);
+const ALWAYS_FOCUSABLE = new Set(['button', 'select', 'textarea', 'summary', 'iframe', 'embed']);
+function isFocusable(el) {
+    if (staticValue(el, 'disabled') === true)
+        return false;
+    const tabIndex = staticValue(el, 'tabIndex');
+    if (typeof tabIndex === 'number')
+        return tabIndex >= 0;
+    if (typeof tabIndex === 'string' && tabIndex.trim() !== '')
+        return Number(tabIndex) >= 0;
+    if (el.isComponent)
+        return false;
+    if (ALWAYS_FOCUSABLE.has(el.name))
+        return true;
+    if ((el.name === 'a' || el.name === 'area') && hasAttr(el, 'href'))
+        return true;
+    if (el.name === 'input')
+        return staticString(el, 'type') !== 'hidden';
+    if ((el.name === 'audio' || el.name === 'video') && hasAttr(el, 'controls'))
+        return true;
+    return false;
+}
+/** Native HTML elements that are inherently interactive controls. */
+function isInteractiveElement(el) {
+    if (el.isComponent)
+        return false;
+    if (el.name === 'a' || el.name === 'area')
+        return hasAttr(el, 'href');
+    if (el.name === 'input')
+        return staticString(el, 'type') !== 'hidden';
+    if (el.name === 'audio' || el.name === 'video')
+        return hasAttr(el, 'controls');
+    return INTERACTIVE_TAGS.has(el.name);
+}
+function firstHandler(el) {
+    return HANDLER_PROPS.find((h) => hasAttr(el, h));
+}
+/**
+ * An element given an interactive role but unreachable by keyboard: it needs
+ * tabIndex to be focusable, or assistive-technology users cannot operate it.
+ */
+export const interactiveSupportsFocus = defineRule({
+    id: 'interactive-supports-focus',
+    description: 'Elements with an interactive role and a handler must be focusable.',
+    severity: 'serious',
+    wcag: ['2.1.1', '4.1.2'],
+}, (el, ctx) => {
+    if (el.isComponent || el.hasSpread)
+        return;
+    if (isAriaHidden(el) || isPresentational(el))
+        return;
+    const role = staticString(el, 'role')?.trim();
+    if (!role || !INTERACTIVE_ROLES.has(role))
+        return;
+    if (!firstHandler(el))
+        return;
+    if (isFocusable(el) || hasAttr(el, 'tabIndex'))
+        return;
+    ctx.report({
+        el,
+        message: `<${el.name} role="${role}"> handles interaction but is not focusable. Add tabIndex={0} so keyboard users can reach it.`,
+    });
+});
+/**
+ * Event handlers on semantic non-interactive elements (li, main, h2, …) are
+ * unreachable by keyboard and screen reader users. Move the handler to a
+ * <button>/<a>, or give the element an interactive role and focus support.
+ */
+export const noNoninteractiveElementInteractions = defineRule({
+    id: 'no-noninteractive-element-interactions',
+    description: 'Non-interactive elements should not have interaction handlers.',
+    severity: 'serious',
+    wcag: ['2.1.1', '4.1.2'],
+}, (el, ctx) => {
+    if (el.isComponent || el.hasSpread)
+        return;
+    if (isAriaHidden(el))
+        return;
+    const role = staticString(el, 'role')?.trim();
+    if (role && INTERACTIVE_ROLES.has(role))
+        return;
+    if (hasAttr(el, 'tabIndex'))
+        return; // author opted into interactivity
+    const nonInteractive = NONINTERACTIVE_TAGS.has(el.name) || (role !== undefined && NONINTERACTIVE_ROLES.has(role));
+    if (!nonInteractive)
+        return;
+    const handler = firstHandler(el);
+    if (!handler)
+        return;
+    ctx.report({
+        el,
+        message: `<${el.name}> is non-interactive but has ${handler}. Move the action to a <button>/<a>, or add an interactive role with tabIndex and a keyboard handler.`,
+    });
+});
+/**
+ * An interactive element whose role removes its interactive semantics
+ * (e.g. <button role="article">) becomes invisible to assistive technology
+ * as a control.
+ */
+export const noInteractiveElementToNoninteractiveRole = defineRule({
+    id: 'no-interactive-element-to-noninteractive-role',
+    description: 'Interactive elements must not be given a non-interactive role.',
+    severity: 'serious',
+    wcag: ['4.1.2', '1.3.1'],
+}, (el, ctx) => {
+    if (el.isComponent)
+        return;
+    if (!isInteractiveElement(el))
+        return;
+    const role = staticString(el, 'role')?.trim();
+    if (!role || INTERACTIVE_ROLES.has(role))
+        return;
+    if (!(NONINTERACTIVE_ROLES.has(role) || role === 'presentation' || role === 'none'))
+        return;
+    ctx.report({
+        el,
+        message: `<${el.name}> is an interactive control but role="${role}" strips its semantics — screen reader users lose the control.`,
+    });
+});
+/**
+ * A semantic non-interactive element given an interactive role (e.g.
+ * <li role="button">) should be a generic container or a native control —
+ * native elements carry behavior the role alone does not.
+ */
+export const noNoninteractiveElementToInteractiveRole = defineRule({
+    id: 'no-noninteractive-element-to-interactive-role',
+    description: 'Non-interactive elements must not be given an interactive role.',
+    severity: 'serious',
+    wcag: ['4.1.2', '1.3.1'],
+}, (el, ctx) => {
+    if (el.isComponent)
+        return;
+    if (!NONINTERACTIVE_TAGS.has(el.name))
+        return;
+    const role = staticString(el, 'role')?.trim();
+    if (!role || !INTERACTIVE_ROLES.has(role))
+        return;
+    ctx.report({
+        el,
+        message: `<${el.name}> is non-interactive but has interactive role="${role}". Use a native control, or a <div>/<span> with the role plus tabIndex and key handlers.`,
+    });
+});
+/** tabIndex on a non-interactive element adds a tab stop that does nothing. */
+export const noNoninteractiveTabindex = defineRule({
+    id: 'no-noninteractive-tabindex',
+    description: 'tabIndex must not be placed on non-interactive elements.',
+    severity: 'moderate',
+    wcag: ['2.4.3', '4.1.2'],
+}, (el, ctx) => {
+    if (el.isComponent)
+        return;
+    const v = staticValue(el, 'tabIndex');
+    const n = typeof v === 'number' ? v : typeof v === 'string' && v.trim() !== '' ? Number(v) : NaN;
+    if (!Number.isFinite(n) || n < 0)
+        return;
+    const role = staticString(el, 'role')?.trim();
+    if (role && INTERACTIVE_ROLES.has(role))
+        return;
+    if (isInteractiveElement(el))
+        return;
+    const nonInteractive = NONINTERACTIVE_TAGS.has(el.name) || (role !== undefined && NONINTERACTIVE_ROLES.has(role));
+    if (!nonInteractive)
+        return;
+    ctx.report({
+        el,
+        message: `tabIndex={${n}} on non-interactive <${el.name}> creates a tab stop with no interactive purpose. Remove it, or make the element a real control.`,
+    });
+});
+/** Roles that re-implement a native element, with the element to prefer. */
+const ROLE_TO_TAG = {
+    button: '<button>',
+    link: '<a href>',
+    checkbox: '<input type="checkbox">',
+    radio: '<input type="radio">',
+    heading: '<h1>–<h6>',
+    list: '<ul> or <ol>',
+    listitem: '<li>',
+    table: '<table>',
+    row: '<tr>',
+    cell: '<td>',
+    columnheader: '<th scope="col">',
+    rowheader: '<th scope="row">',
+    navigation: '<nav>',
+    main: '<main>',
+    banner: '<header>',
+    contentinfo: '<footer>',
+    complementary: '<aside>',
+    article: '<article>',
+    figure: '<figure>',
+    form: '<form>',
+    textbox: '<input> or <textarea>',
+    img: '<img>',
+    separator: '<hr>',
+    region: '<section>',
+    progressbar: '<progress>',
+    combobox: '<select>',
+};
+/**
+ * A role on a generic <div>/<span> that has a native element equivalent —
+ * prefer the native tag for built-in keyboard handling and semantics.
+ * (Redundant roles on the matching element itself are handled by
+ * no-redundant-roles.)
+ */
+export const preferTagOverRole = defineRule({
+    id: 'prefer-tag-over-role',
+    description: 'Prefer the native element over a role that re-implements it.',
+    severity: 'minor',
+    wcag: ['4.1.2'],
+}, (el, ctx) => {
+    if (el.name !== 'div' && el.name !== 'span')
+        return;
+    const role = staticString(el, 'role')?.trim();
+    if (!role)
+        return;
+    const suggestion = ROLE_TO_TAG[role];
+    if (!suggestion)
+        return;
+    ctx.report({
+        el,
+        message: `role="${role}" re-implements a native element. Prefer ${suggestion} for built-in keyboard support and semantics.`,
+    });
+});

package/dist/rules/structure.d.ts

@@ -0,0 +1,30 @@
+import type { Rule } from '@aishware/react-a11y-core';
+/**
+ * Skipped heading levels (h2 → h4) break screen reader outline navigation.
+ * Files are fragments, so only *relative* skips within a file are flagged —
+ * a component that starts at h3 is fine.
+ */
+export declare const headingOrder: Rule;
+/** <ul>/<ol> may only contain <li>; stray wrappers break list semantics. */
+export declare const listStructure: Rule;
+/** Data tables need header cells for screen reader row/column context. */
+export declare const tableHasHeader: Rule;
+/** Grouped controls (especially radio groups) need a <legend>. */
+export declare const fieldsetHasLegend: Rule;
+/**
+ * <main> must be unique: it is the screen reader's "skip to content" target,
+ * and duplicates make landmark navigation ambiguous.
+ */
+export declare const noDuplicateMain: Rule;
+/**
+ * WCAG 1.3.2: CSS `order` makes visual order diverge from DOM order, which
+ * is what screen readers and the tab sequence follow.
+ */
+export declare const meaningfulOrder: Rule;
+/**
+ * Flags roles placed outside their required parent — but only when the full
+ * ancestor chain in the file is plain DOM, so composition through components
+ * never false-positives.
+ */
+export declare const ariaRequiredContext: Rule;
+//# sourceMappingURL=structure.d.ts.map

package/dist/rules/structure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"structure.d.ts","sourceRoot":"","sources":["../../src/rules/structure.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAe,MAAM,2BAA2B,CAAC;AAYnE;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,IAwB1B,CAAC;AAKF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,MAwBzB,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,cAAc,MA2B1B,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,iBAAiB,MAc7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,IAsB7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,MAkB3B,CAAC;AAwBF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,MAwB/B,CAAC"}

package/dist/rules/structure.js

@@ -0,0 +1,223 @@
+import { inlineStyleNumber, isAriaHidden, isPresentational, staticString, staticValue, walkDescendants, } from '@aishware/react-a11y-core';
+import { defineRule, isDomTag } from '../util.js';
+function headingLevel(el) {
+    const m = /^h([1-6])$/.exec(el.name);
+    if (m && !el.isComponent)
+        return Number(m[1]);
+    if (staticString(el, 'role')?.trim() === 'heading') {
+        const level = staticValue(el, 'aria-level');
+        if (typeof level === 'number')
+            return level;
+    }
+    return undefined;
+}
+/**
+ * Skipped heading levels (h2 → h4) break screen reader outline navigation.
+ * Files are fragments, so only *relative* skips within a file are flagged —
+ * a component that starts at h3 is fine.
+ */
+export const headingOrder = {
+    meta: {
+        id: 'heading-order',
+        description: 'Heading levels must not skip (e.g. h2 followed by h4).',
+        severity: 'moderate',
+        platforms: ['web'],
+        wcag: ['1.3.1', '2.4.6'],
+    },
+    create(ctx) {
+        let last;
+        return {
+            element(el) {
+                const level = headingLevel(el);
+                if (level === undefined)
+                    return;
+                if (last !== undefined && level > last + 1) {
+                    ctx.report({
+                        el,
+                        message: `Heading level skips from h${last} to h${level}. Screen reader users navigating by heading lose the document structure.`,
+                    });
+                }
+                last = level;
+            },
+        };
+    },
+};
+const LIST_CONTAINERS = new Set(['ul', 'ol', 'menu']);
+const LIST_IGNORED_CHILDREN = new Set(['li', 'script', 'template']);
+/** <ul>/<ol> may only contain <li>; stray wrappers break list semantics. */
+export const listStructure = defineRule({
+    id: 'list-structure',
+    description: 'Lists must contain only <li> children, and <li> must sit in a list.',
+    severity: 'moderate',
+    wcag: ['1.3.1'],
+}, (el, ctx) => {
+    if (el.isComponent)
+        return;
+    if (LIST_CONTAINERS.has(el.name) && !isPresentational(el)) {
+        for (const child of el.childElements) {
+            if (child.isComponent || child.hasSpread)
+                continue; // may render <li>
+            if (!LIST_IGNORED_CHILDREN.has(child.name) && !isPresentational(child)) {
+                ctx.report({
+                    el: child,
+                    message: `<${child.name}> is a direct child of <${el.name}> — screen readers expect only <li> there and may misreport list size.`,
+                });
+            }
+        }
+    }
+    if (el.name === 'li' && el.parent && !el.parent.isComponent && !LIST_CONTAINERS.has(el.parent.name)) {
+        ctx.report({ el, message: `<li> is inside <${el.parent.name}> — list items must be direct children of <ul>, <ol> or <menu>.` });
+    }
+});
+/** Data tables need header cells for screen reader row/column context. */
+export const tableHasHeader = defineRule({
+    id: 'table-has-header',
+    description: 'Data tables must have header cells (<th> or role="columnheader"/"rowheader").',
+    severity: 'moderate',
+    wcag: ['1.3.1'],
+}, (el, ctx) => {
+    if (!isDomTag(el, 'table'))
+        return;
+    if (isPresentational(el) || isAriaHidden(el) || el.hasSpread)
+        return;
+    let hasHeader = false;
+    let hasData = false;
+    let unknowable = false;
+    walkDescendants(el, (child) => {
+        if (child.isComponent || child.hasSpread || child.hasExpressionChild)
+            unknowable = true;
+        if (child.name === 'th')
+            hasHeader = true;
+        const role = staticString(child, 'role')?.trim();
+        if (role === 'columnheader' || role === 'rowheader')
+            hasHeader = true;
+        if (child.name === 'td')
+            hasData = true;
+    });
+    if (el.hasExpressionChild)
+        unknowable = true;
+    if (hasHeader || unknowable || !hasData)
+        return;
+    ctx.report({
+        el,
+        message: '<table> has data cells but no header cells — screen readers cannot announce row/column context. Add <th scope="col"> / <th scope="row">.',
+    });
+});
+/** Grouped controls (especially radio groups) need a <legend>. */
+export const fieldsetHasLegend = defineRule({
+    id: 'fieldset-has-legend',
+    description: '<fieldset> must contain a <legend> naming the group.',
+    severity: 'moderate',
+    wcag: ['1.3.1', '3.3.2'],
+}, (el, ctx) => {
+    if (!isDomTag(el, 'fieldset'))
+        return;
+    if (el.hasSpread || el.hasExpressionChild)
+        return;
+    const hasLegend = el.childElements.some((c) => c.name === 'legend' || c.isComponent);
+    if (hasLegend)
+        return;
+    ctx.report({ el, message: '<fieldset> has no <legend> — screen readers announce the controls without their group name.' });
+});
+/**
+ * <main> must be unique: it is the screen reader's "skip to content" target,
+ * and duplicates make landmark navigation ambiguous.
+ */
+export const noDuplicateMain = {
+    meta: {
+        id: 'no-duplicate-main',
+        description: 'A page must have only one <main> landmark.',
+        severity: 'moderate',
+        platforms: ['web'],
+        wcag: ['1.3.1', '2.4.1'],
+        partial: true,
+    },
+    create(ctx) {
+        let seen = false;
+        return {
+            element(el) {
+                const isMain = (!el.isComponent && el.name === 'main') || staticString(el, 'role')?.trim() === 'main';
+                if (!isMain)
+                    return;
+                if (seen) {
+                    ctx.report({ el, message: 'Multiple <main> landmarks — screen reader users cannot tell which one is the page content.' });
+                }
+                seen = true;
+            },
+        };
+    },
+};
+/**
+ * WCAG 1.3.2: CSS `order` makes visual order diverge from DOM order, which
+ * is what screen readers and the tab sequence follow.
+ */
+export const meaningfulOrder = defineRule({
+    id: 'meaningful-order',
+    description: 'Avoid CSS order — it desynchronizes visual order from reading/tab order.',
+    severity: 'minor',
+    wcag: ['1.3.2', '2.4.3'],
+    partial: true,
+}, (el, ctx) => {
+    if (el.isComponent)
+        return;
+    const order = inlineStyleNumber(el, 'order');
+    if (order !== undefined && order !== 0) {
+        ctx.report({
+            el,
+            message: `Inline style order: ${order} reorders content visually while screen readers and Tab follow DOM order — verify the reading sequence still makes sense.`,
+        });
+    }
+});
+/** Roles that are only valid inside a specific parent role (ARIA 1.2). */
+const REQUIRED_CONTEXT = {
+    menuitem: ['menu', 'menubar'],
+    menuitemcheckbox: ['menu', 'menubar'],
+    menuitemradio: ['menu', 'menubar'],
+    tab: ['tablist'],
+    option: ['listbox'],
+    treeitem: ['tree', 'treeitem', 'group'],
+    listitem: ['list'],
+    row: ['table', 'grid', 'treegrid', 'rowgroup'],
+    gridcell: ['row'],
+    rowheader: ['row'],
+    columnheader: ['row'],
+    cell: ['row'],
+};
+/** Implicit roles of DOM containers, for matching required context. */
+const IMPLICIT_CONTEXT_ROLES = {
+    ul: 'list', ol: 'list', menu: 'list',
+    table: 'table', tr: 'row', tbody: 'rowgroup', thead: 'rowgroup', tfoot: 'rowgroup',
+};
+/**
+ * Flags roles placed outside their required parent — but only when the full
+ * ancestor chain in the file is plain DOM, so composition through components
+ * never false-positives.
+ */
+export const ariaRequiredContext = defineRule({
+    id: 'aria-required-context',
+    description: 'ARIA roles that require a parent role must be inside it.',
+    severity: 'moderate',
+    wcag: ['1.3.1', '4.1.2'],
+}, (el, ctx) => {
+    const role = staticString(el, 'role')?.trim();
+    if (!role)
+        return;
+    const required = REQUIRED_CONTEXT[role];
+    if (!required)
+        return;
+    if (!el.parent)
+        return; // file root — context supplied by the consumer
+    for (let a = el.parent; a; a = a.parent) {
+        if (a.isComponent || a.hasSpread)
+            return; // context may come from the component
+        const ancestorRole = staticString(a, 'role')?.trim() ?? IMPLICIT_CONTEXT_ROLES[a.name];
+        if (ancestorRole && required.includes(ancestorRole))
+            return;
+        if (!a.parent)
+            break;
+    }
+    ctx.report({
+        el,
+        message: `role="${role}" must be inside ${required.map((r) => `role="${r}"`).join(' or ')} — without it, screen readers cannot relate it to its group.`,
+    });
+});

package/dist/util.d.ts

@@ -0,0 +1,4 @@
+import type { ElementNode, Rule, RuleMeta, RuleContext } from '@aishware/react-a11y-core';
+export declare function defineRule(meta: Omit<RuleMeta, 'platforms' | 'helpUrl'>, element: (el: ElementNode, ctx: RuleContext) => void): Rule;
+export declare function isDomTag(el: ElementNode, ...names: string[]): boolean;
+//# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAe,MAAM,2BAA2B,CAAC;AAMvG,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,GAAG,SAAS,CAAC,EAC7C,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,WAAW,KAAK,IAAI,GACnD,IAAI,CAON;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAErE"}

package/dist/util.js

@@ -0,0 +1,14 @@
+import { readOwnPackageMeta } from '@aishware/react-a11y-core';
+const homepage = readOwnPackageMeta(import.meta.url).homepage;
+const HELP_BASE = homepage ? `${homepage}/blob/main/docs/rules/web.md#` : undefined;
+export function defineRule(meta, element) {
+    return {
+        meta: { ...meta, platforms: ['web'], ...(HELP_BASE ? { helpUrl: `${HELP_BASE}${meta.id}` } : {}) },
+        create(ctx) {
+            return { element: (el) => element(el, ctx) };
+        },
+    };
+}
+export function isDomTag(el, ...names) {
+    return !el.isComponent && names.includes(el.name);
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@aishware/react-a11y-rules-web",
+  "version": "0.1.0",
+  "description": "WCAG 2.2 web accessibility rules that complement eslint-plugin-jsx-a11y — the criteria, structure and focus checks it doesn't cover.",
+  "keywords": ["accessibility", "a11y", "wcag", "wcag-2.2", "react", "jsx-a11y", "linter"],
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@aishware/react-a11y-core": "^0.1.0"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/1aishwaryasharma/react-a11y",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/1aishwaryasharma/react-a11y.git",
+    "directory": "packages/rules-web"
+  }
+}