{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-20-1-the-accessibility-tree/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 20.1: The accessibility tree\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2024-07-29\",\n  \"type\": [\"announcement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Polypane 20.1 adds a live accessibility tree and emulation for the default font-size, Lets you copy and save SVGs as easily as images, has new features in the Meta panel and the Elements panel as well as many improvements to the performance, syncing features and configuration.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"live-accessibility-tree\"\n  }, `Live accessibility tree`), mdx(\"p\", null, `The accessibility tree is similar to the DOM (it's also called the AOM, Accessibility Object Model), but the rendering engine builds it up for assistive technology like screen readers who take the accessibility tree and use that to present the page to the user.`), mdx(\"p\", null, `Polypane now has a live accessibility tree in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), `. This shows the accessibility information of all the elements, including the role, name, description and properties. This makes it easy to see how your site is structured for screen readers and other assistive technologies.`), mdx(\"p\", null, `The accessibility tree is updated in real time as you interact with the page, so you can see exactly what happens to the tree when you hover over elements, click on them or change their state.`), mdx(\"img\", {\n    src: a11ytree,\n    className: \"imgshadow\",\n    alt: \"Live accessibility tree in Polypane\"\n  }), mdx(\"p\", null, `By default the panel hides all `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `generic`), ` elements without their own accessible name, but if you want more insight into your page structure, or see if there are elements you expected to `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `not`), ` be generic, you can enable them with the \"show generics\" option.`), mdx(\"p\", null, `The number of warnings and suggestions in the accessibility tree is still limited at the moment, but we'll expand on this in future versions. If you have any suggestions for new warnings or other visualisations, please let us know!`), mdx(\"h2\", {\n    \"id\": \"copy-svg-from-context-menu\"\n  }, `Copy SVG from context menu`), mdx(\"p\", null, `Copying SVGs should be as easy as copying images. So now when right clicking an SVG in Polypane you have the options of saving it to disk, or copying it to the clipboard as an SVG image, the source code or as a data URI. This makes it easy to copy SVGs from the web straight into your code editor or design tool.`), mdx(\"video\", {\n    src: copysvg,\n    muted: true,\n    controls: true,\n    preload: \"auto\",\n    loading: \"lazy\",\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '100%'\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"default-font-size-emulation\"\n  }, `Default font-size emulation`), mdx(\"p\", null, `Polypane now has an option to change the default font size of a pane. This is useful when you want to see how your site looks when the user has set a different default font size in their browser. You can find this option in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `emulation settings`), ` of a pane. Thanks Josh for the suggestion!`), mdx(\"img\", {\n    src: defaultfontsize,\n    className: \"imgshadow\",\n    alt: \"Default font size emulation in Polypane\"\n  }), mdx(\"h2\", {\n    \"id\": \"meta-panel-improvements\"\n  }, `Meta panel improvements`), mdx(\"h3\", {\n    \"id\": \"threads-preview\"\n  }, `Threads preview`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `Meta panel`), ` now shows the share preview for Threads.net by Instagram/Facebook/Meta.`), mdx(\"p\", null, `Interestingly the preview is quite different from Facebook.`), mdx(\"img\", {\n    src: threads,\n    className: \"imgshadow\",\n    alt: \"Threads preview of Polypane.app\"\n  }), mdx(\"p\", null, `We're now `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.threads.net/@polypane\"\n  }), `also on Threads`), ` though no guarantees on how active we'll be there.`), mdx(\"h3\", {\n    \"id\": \"aitxt-support\"\n  }, `AI.txt support`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://site.spawning.ai/spawning-ai-txt\"\n  }), `AI.txt`), ` is a proposal that lets you specify, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `robots.txt`), `, how AI tools should interact with your site.`), mdx(\"p\", null, `It remains to be seen whether this will be widely adopted or if `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `robots.txt`), ` will remain the way to block AI crawlers, but now you can inspect the AI.txt file for any site in the Meta panel. If it turns out a bust we'll just remove it again ;)`), mdx(\"h3\", {\n    \"id\": \"show-character-counts\"\n  }, `Show character counts`), mdx(\"p\", null, `For the title and description we now also show a little badge with the character count, so you can see how much space you have left against the recommended limits for SEO and social media. If you go over or under the suggested limits, the badge will turn red.`), mdx(\"img\", {\n    src: charcount,\n    className: \"imgshadow\",\n    alt: \"Character count in Meta panel\"\n  }), mdx(\"h3\", {\n    \"id\": \"additional-attribures-for-preload-links\"\n  }, `Additional attribures for preload links`), mdx(\"p\", null, `Preload links don't just have a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `rel`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `href`), `, but they can also have other attributes like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `as`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `type`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `media`), `. These are now also shown in the Meta panel.`), mdx(\"h2\", {\n    \"id\": \"share-link-with-scroll-position\"\n  }, `Share link with scroll position`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/link/\"\n  }), `Polypane share links`), ` already let you share the panes you have open, and now you can also include the scroll position so that anyone following the URL is automatically scrolled to where you were when you shared the link. Thanks Ben for the suggestion!`), mdx(\"img\", {\n    src: sharescrollpos,\n    className: \"imgshadow\",\n    alt: \"Shared scroll position\"\n  }), mdx(\"h2\", {\n    \"id\": \"preferred-color-notation\"\n  }, `Preferred color notation`), mdx(\"p\", null, `You can now select your preferred color notation between `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `rgb`), ` (default), `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hex`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hsl`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hwb`), `, and Polypane will use that in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/polypane-peek/\"\n  }), `Polypane Peek`), ` tooltip (in all panes and in all `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/portal/\"\n  }), `portals`), `) and the elements panel when copying the text or background color.`), mdx(\"img\", {\n    src: colornotationpeek,\n    className: \"imgshadow\",\n    alt: \"Polypane Peek with hex colors\"\n  }), mdx(\"h2\", {\n    \"id\": \"horizontal-overflow-detection-in-console\"\n  }, `Horizontal overflow detection in console`), mdx(\"p\", null, `Finding out which elements cause `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/horizontal-overflow/\"\n  }), `horizontal overflows`), ` is incredibly easy with Polypane: turn on layout debugging and any overflowing elements will be highlighted in red.`), mdx(\"p\", null, `But even features that have been in Polypane for a long time can still be improved: We now also log the overflowing elements to the console so you can just click them to inspect.`), mdx(\"img\", {\n    src: horizoverflowlog,\n    className: \"imgshadow\",\n    alt: \"A console popup with an overflowing element\"\n  }), mdx(\"p\", null, `This makes it even easier to find and fix elements that are overflowing horizontally!`), mdx(\"h2\", {\n    \"id\": \"custom-devices\"\n  }, `Custom devices`), mdx(\"p\", null, `For a long time it was possible to overwrite the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/device-presets/\"\n  }), `device list`), ` with a list of your own by adding a JSON file to the Polypane configuration folder.`), mdx(\"img\", {\n    src: customdevices,\n    className: \"imgshadow\",\n    alt: \"A custom category at the top of the device list\"\n  }), mdx(\"p\", null, `We've now changed the behavior to make it easier to use `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/device-presets/#custom-device-presets\"\n  }), `Custom device presets`), `: Any custom devices you add are now prepended to the existing list. This makes it easier to add your own devices and still use the built-in ones.`), mdx(\"p\", null, `By adding `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `replaceDefaults: true`), ` to your custom list you can `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/device-presets/#replacing-the-default-presets\"\n  }), `revert back`), ` to the old behavior.`), mdx(\"p\", null, `In a future release we'll include a way to manage custom devices from within Polypane itself.`), mdx(\"h2\", {\n    \"id\": \"elements-panel-improvements\"\n  }, `Elements panel improvements`), mdx(\"h3\", {\n    \"id\": \"pasting-multiple-declarations\"\n  }, `Pasting multiple declarations`), mdx(\"p\", null, `You can now paste one or more declarations into the styles panel in the elements panel and they will be applied in one go. This makes it easier to copy styles from one element to another, or to quickly add a new rule to an existing element.`), mdx(\"video\", {\n    src: paste,\n    muted: true,\n    controls: true,\n    preload: \"auto\",\n    loading: \"lazy\",\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '100%'\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"warnings-about-duplicate-ids\"\n  }, `Warnings about duplicate IDs`), mdx(\"p\", null, `The elements panel now warns you when you have duplicate IDs on a page, both in the attribute overview and in the DOM tree. This can cause issues with CSS and JavaScript, so it's good to know when you have them. Thanks Sara for the suggestion!`), mdx(\"img\", {\n    src: duplicateids,\n    className: \"imgshadow\",\n    alt: \"Warning about a duplicate ID\"\n  }), mdx(\"h3\", {\n    \"id\": \"popovertarget-and-commandfor-linking\"\n  }, mdx(\"code\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"className\": \"language-text\"\n  }), `Popovertarget`), ` and `, mdx(\"code\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"className\": \"language-text\"\n  }), `commandfor`), ` linking`), mdx(\"p\", null, `Like other `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `idref`), ` properties, the elements panel now links `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `popovertarget`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `commandfor`), ` in the DOM tree, or shows a warning when they're not found. This makes it easier to see which elements are linked to a popover or invoker, and to quickly find the popover target when you're working with popovers.`), mdx(\"h3\", {\n    \"id\": \"new-pseudo-elements-and-pseudo-functions\"\n  }, `New pseudo elements and pseudo functions`), mdx(\"p\", null, `The elements panel now supports new pseudo elements and pseudo functions for view transitions, shadow DOM and details-contents. They're now visible and fully editable.`), mdx(\"h3\", {\n    \"id\": \"async-rendering-of-styles\"\n  }, `Async rendering of styles`), mdx(\"p\", null, `The styles panel in the elements panel now renders style declarations asynchronously, which makes it faster to open and interact with especially with complex pages. Thanks Charlie for the suggestion!`), mdx(\"h2\", {\n    \"id\": \"other-improvements\"\n  }, `Other improvements`), mdx(\"h3\", {\n    \"id\": \"dialog-syncing\"\n  }, `Dialog syncing`), mdx(\"p\", null, `When closing a dialog using a form, the dialog will now also close in all other panes. This makes it easier to interact with forms and dialogs in multiple panes. Thanks Fred for the suggestion! In addition to that, we now also sync the closing of dialogs when you hit the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `esc`), ` key.`), mdx(\"h3\", {\n    \"id\": \"json-viewer-improvements\"\n  }, `JSON viewer improvements`), mdx(\"p\", null, `The JSON viewer now has better detection of datetimes, so it's easier to see when a date is a date and not just a string. Turns out a lot of things are happily parsed by `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `new Date()`), ` that aren't actually dates at all! We've switched over to a more robust test.`), mdx(\"h3\", {\n    \"id\": \"fixed-crash-on-apple-silicon\"\n  }, `Fixed crash on Apple Silicon`), mdx(\"p\", null, `We've fixed a crash that was happening on specific Apple Silicon Macs. This was a particularly annoying bug as it doesn't replicate on non-silicon macs and also doesn't create a crash report, but it seems our fix has worked for the people that have been beta testing it. If you're still experiencing crashes on Apple Silicon with 20.1, please let us know!`), mdx(\"img\", {\n    src: networkEmulation,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem 0 2rem 1rem\",\n      \"maxWidth\": \"100%\",\n      \"cssFloat\": \"right\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"new-network-throttling-profile\"\n  }, `New network throttling profile`), mdx(\"p\", null, `Following Chrome and Lighthouse, Polypane now also has a \"Fast 4G\" network profile as a `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/#throttle-network-speed\"\n  }), `thottle speed`), ` to give a better middle between a normal connection and previously \"Fast 3G\", which has also been renamed to \"Slow 4G\".`), mdx(\"h3\", {\n    \"id\": \"performance\"\n  }, `Performance`), mdx(\"p\", null, `We went over a number of systems in Polypane to see if we could remove legacy code or otherwise make things faster. This resulted in a number of performance improvements, including faster pane resizing, faster scroll sync with rulers and guides and faster resizing of the panel.`), mdx(\"h3\", {\n    \"id\": \"chromium-update\"\n  }, `Chromium update`), mdx(\"p\", null, `Polypane now uses Chromium 126.0.6478.183, which includes a number of security fixes and performance improvements.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-201\"\n  }, `Get Polypane 20.1`), mdx(\"p\", null, `Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.`), mdx(\"p\", null, `Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` to download the latest version!`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Try it for free`), `.`), ` No credit card needed.`), mdx(\"h2\", {\n    \"id\": \"polypane-2012-changelog\"\n  }, `Polypane 20.1.2 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Copy Link path option in context menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Outline panel: Landmarks overview now has a 'show potentials' option`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improved`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Link `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `form`), ` attributes in DOM tree`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Accessibility panel: Update accessibility ruleset`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Consistent wording for link, image and SVG copy options in context menu across app`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Update Google Fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: asides are no longer considered landmarks if they have no name`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: performance of focus order overlay`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Chromium to 126.0.6478.185`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Crash in Browse panel that would hide it`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline panel: Hide visual name difference warning when show warnings is off`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline panel: Hide 'show generics' checkbox when not relevant`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Empty option in workspace context menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent workspace scrolling when switching tabs.`)), mdx(\"h2\", {\n    \"id\": \"polypane-2011-changelog\"\n  }, `Polypane 20.1.1 Changelog`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` prevent exceptions from showing as dialog boxes on macOS`)), mdx(\"h2\", {\n    \"id\": \"polypane-201-changelog\"\n  }, `Polypane 20.1 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Live accessibility tree in outline panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Emulation: default font size emulation (Thanks Josh!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Copy SVG from context menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Meta panel: preview for Threads`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Meta panel: support for AI.txt`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Share link can now include the scroll position (Thanks Ben!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Preferred color notation is now a global option`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Horizontal overflow detection now logs overflowing elements in console`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improved`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Custom devices now get added to the device list instead of replacing them`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: support pasting full declarations or entire rulesets into the styles`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: DOM tree will now link popovertarget and commandfor, or show a warning when they're not found`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: warns about duplicate IDs (Thanks Sara!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: supports new pseudo elements and pseudo functions for view transitions, shadow dom and details-contents`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: async rendering of styles for performance (Thanks Charlie!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Better logic of when an element needs an accessible name`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: show how much characters are used by the title and description`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: stricter defaults for LinkedIn share preview (Thanks Manuel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: additional attributes for preload links are now listed`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Command bar: toggle console popups is now available (Thanks Eric!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Emulation: Add a new \"Fast 4G\" network profile`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Improve design of color picker`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Pane resize performance (Thanks Noah!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rulers and Guides scroll sync performance`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` JSON viewer: better detection of datetimes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Allow form submission syncing for dialog forms (Thanks Fred!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Sync dialog closing with `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `Esc`), ` key`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Chromium to 126.0.6478.183`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Crash on specific Apple Silicon Macs.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Hide line style for ellipse and rectangle in screenshot editor`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Remove Metamask and Bitwarden extensions from supported list now that they are manifest v3`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent error when the Polypane window is closed and mac switches appearance (Thanks Charlie!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent suggestions from previous tab from being shown in address bar when switching tabs (Thanks Raz!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Set correct initial color format in color picker in elements panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Horizontal layout clipping of panes didn't work (Thanks Tobi!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: typing \":\" removed part of property`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: prevent scrolling tree when hovering over an idref`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel no longer sometimes opens on its own`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: You couldn't collapse the currently selected element`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: prevent overwriting element content when editing`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: reinstate support for nested media queries with explicit inner styles`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent page styles from being applied to node tooltips`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent devtools and browse panel from being in the wrong position after resizing the browser`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent videos from becoming unmuted when switching panes (Thanks Nuel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Meta panel: Prevent panel from not showing any data when theme color has no value (Thanks Jono!)`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":8,"tableOfContents":{"items":[{"url":"#live-accessibility-tree","title":"Live accessibility tree"},{"url":"#copy-svg-from-context-menu","title":"Copy SVG from context menu"},{"url":"#default-font-size-emulation","title":"Default font-size emulation"},{"url":"#meta-panel-improvements","title":"Meta panel improvements","items":[{"url":"#threads-preview","title":"Threads preview"},{"url":"#aitxt-support","title":"AI.txt support"},{"url":"#show-character-counts","title":"Show character counts"},{"url":"#additional-attribures-for-preload-links","title":"Additional attribures for preload links"}]},{"url":"#share-link-with-scroll-position","title":"Share link with scroll position"},{"url":"#preferred-color-notation","title":"Preferred color notation"},{"url":"#horizontal-overflow-detection-in-console","title":"Horizontal overflow detection in console"},{"url":"#custom-devices","title":"Custom devices"},{"url":"#elements-panel-improvements","title":"Elements panel improvements","items":[{"url":"#pasting-multiple-declarations","title":"Pasting multiple declarations"},{"url":"#warnings-about-duplicate-ids","title":"Warnings about duplicate IDs"},{"url":"#popovertarget-and-commandfor-linking","title":"Popovertarget and commandfor linking"},{"url":"#new-pseudo-elements-and-pseudo-functions","title":"New pseudo elements and pseudo functions"},{"url":"#async-rendering-of-styles","title":"Async rendering of styles"}]},{"url":"#other-improvements","title":"Other improvements","items":[{"url":"#dialog-syncing","title":"Dialog syncing"},{"url":"#json-viewer-improvements","title":"JSON viewer improvements"},{"url":"#fixed-crash-on-apple-silicon","title":"Fixed crash on Apple Silicon"},{"url":"#new-network-throttling-profile","title":"New network throttling profile"},{"url":"#performance","title":"Performance"},{"url":"#chromium-update","title":"Chromium update"}]},{"url":"#get-polypane-201","title":"Get Polypane 20.1"},{"url":"#polypane-2012-changelog","title":"Polypane 20.1.2 Changelog"},{"url":"#polypane-2011-changelog","title":"Polypane 20.1.1 Changelog"},{"url":"#polypane-201-changelog","title":"Polypane 20.1 Changelog"}]},"excerpt":"Polypane 20.1 adds a live accessibility tree and emulation for the default font-size, Lets you copy and save SVGs as easily as images, has new features in the…","frontmatter":{"title":"Polypane 20.1: The accessibility tree","cover":"/img/mail/icon.svg","date":"2024-07-29","updated":null},"fields":{"slug":"/blog/polypane-20-1-the-accessibility-tree/","date":"2024-07-28T22:00:00.000Z","ogFileName":"polypane-20-1-the-accessibility-tree"}}},"pageContext":{"slug":"/blog/polypane-20-1-the-accessibility-tree/"}},"staticQueryHashes":["4164364741","425175329"]}