check_orientation_lock
Test HTML content to detect forced orientation locks and ensure compliance with web accessibility standards. Identify issues that restrict user flexibility in viewing content.
Instructions
Check if content forces a specific orientation
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes | HTML content to test for orientation lock issues |
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);