check_orientation_lock

Instructions

Implementation Reference

• src/index.ts:675-770 (handler)

  The handler function that implements the check_orientation_lock tool. It uses Puppeteer to load the provided HTML, runs Axe accessibility analysis focused on the meta-viewport rule, checks for orientation-specific restrictions in viewport meta tags, and additionally scans CSS for orientation media queries.

  async checkOrientationLock(args: any) {
    const { html } = args;
  
    if (!html) {
      throw new McpError(
        ErrorCode.InvalidParams,
        'Missing required parameter: html'
      );
    }
  
    let browser;
    try {
      browser = await puppeteer.launch({
        headless: true,
        args: ['--no-sandbox', '--disable-setuid-sandbox']
      });
      const page = await browser.newPage();
      
      await page.setContent(html);
      
      // Run the orientation-lock rule (experimental in Axe)
      const axe = new AxePuppeteer(page)
        .options({
          rules: {
            'meta-viewport': { enabled: true }
          }
        });
      
      const result = await axe.analyze();
      
      // Filter for the meta-viewport rule and orientation-related issues
      const orientationIssues = result.violations.filter(v => 
        v.id === 'meta-viewport' && 
        v.nodes.some(n => 
          n.html.includes('user-scalable=no') || 
          n.html.includes('maximum-scale=1.0') ||
          n.html.includes('orientation=portrait') ||
          n.html.includes('orientation=landscape')
        )
      );
      
      // Also look for CSS orientation locks
      // This requires additional checks since Axe doesn't have a specific rule for this
      const hasCssOrientationLock = await page.evaluate(() => {
        const styleSheets = Array.from(document.styleSheets);
        try {
          for (const sheet of styleSheets) {
            const rules = Array.from(sheet.cssRules || []);
            for (const rule of rules) {
              const ruleText = rule.cssText || '';
              if (
                ruleText.includes('@media screen and (orientation:') ||
                ruleText.includes('orientation:')
              ) {
                return true;
              }
            }
          }
        } catch (e) {
          // CORS issues can occur when accessing CSS rules
          console.error('Error checking CSS:', e);
        }
        return false;
      });
      
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify({
              hasOrientationLock: orientationIssues.length > 0 || hasCssOrientationLock,
              viewportIssues: orientationIssues.map(issue => ({
                id: issue.id,
                impact: issue.impact,
                description: issue.description,
                help: issue.help,
                helpUrl: issue.helpUrl,
                affectedNodes: issue.nodes.map(node => ({
                  html: node.html,
                  target: node.target,
                  failureSummary: node.failureSummary
                }))
              })),
              hasCssOrientationLock,
              wcagCriteria: "WCAG 2.1 SC 1.3.4 (Orientation)",
              helpUrl: "https://www.w3.org/WAI/WCAG21/Understanding/orientation.html"
            }, null, 2),
          },
        ],
      };
    } finally {
      if (browser) {
        await browser.close();
      }
    }
  }

• src/index.ts:145-154 (schema)

  Input schema definition for the check_orientation_lock tool, requiring an 'html' string parameter.

  inputSchema: {
    type: 'object',
    properties: {
      html: {
        type: 'string',
        description: 'HTML content to test for orientation lock issues',
      }
    },
    required: ['html'],
  },

• src/index.ts:142-155 (registration)

  Tool registration in the ListToolsRequestSchema response, defining name, description, and input schema.

  {
    name: 'check_orientation_lock',
    description: 'Check if content forces a specific orientation',
    inputSchema: {
      type: 'object',
      properties: {
        html: {
          type: 'string',
          description: 'HTML content to test for orientation lock issues',
        }
      },
      required: ['html'],
    },
  }

• src/index.ts:172-173 (registration)

  Dispatch/registration in the CallToolRequestSchema switch statement that routes calls to the checkOrientationLock handler.

  case 'check_orientation_lock':
    return await this.checkOrientationLock(request.params.arguments);