Safari Technology Preview 239: Enhanced Accessibility and CSS Improvements
By
<h2>Introduction</h2>
<p>Apple has released the latest iteration of its experimental browser, <strong>Safari Technology Preview 239</strong>, now available for download on macOS Tahoe and macOS Sequoia. If you already have a previous version installed, you can update it through <em>System Settings</em> under <em>General → Software Update</em>. This release incorporates WebKit changes spanning from revision 307619 to 308417, bringing a host of accessibility fixes, CSS enhancements, and other refinements.</p><figure style="margin:20px 0"><img src="https://webkit.org/wp-content/themes/webkit/images/preview-card.jpg" alt="Safari Technology Preview 239: Enhanced Accessibility and CSS Improvements" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px">Source: webkit.org</figcaption></figure>
<h2 id="accessibility">Accessibility Upgrades</h2>
<p>The accessibility team has addressed several issues to improve the experience for users relying on assistive technologies like <strong>VoiceOver</strong>.</p>
<h3>VoiceOver and SVG Elements</h3>
<p>An earlier bug caused SVG <code><use></code> elements referencing <code><symbol></code> elements inside an <code><img></code> to be incorrectly labeled as unnamed images in VoiceOver’s Images web rotor. This has been fixed, ensuring that such elements are now properly categorized.</p>
<h3>ARIA-Owned Rows in Grids and Tables</h3>
<p>VoiceOver previously failed to access <code>aria-owned</code> rows and their cells within grids and tables. The resolution ensures that these dynamically associated rows are now fully navigable.</p>
<h3>Focusable Splitter Elements</h3>
<p>When navigating between form controls, VoiceOver could not locate focusable splitter elements. This has been corrected, allowing users to move through splitters using standard form control navigation.</p>
<h3>Label Geometry for <code>aria-labelledby</code></h3>
<p>An issue where controls using <code>aria-labelledby</code> did not respect the native label’s bounding box when both the control and its ARIA label had no visible bounding box has been resolved. This ensures that clickable areas and focus indicators align with visual expectations.</p>
<h2 id="css">CSS Enhancements</h2>
<p>Several new features and bug fixes have been introduced to improve styling consistency and layout behavior.</p>
<h3>New Pseudo-Class: <code>:open</code></h3>
<p>Support for the <code>:open</code> pseudo-class has been added for <code><input></code> elements. This pseudo-class applies when a picker (like a date or color picker) is open, enabling developers to style the input element accordingly.</p>
<h3>Table Border and Layout Fixes</h3>
<p>Several table-related issues have been fixed:</p>
<ul>
<li>Fixed an issue where tables with collapsed borders incorrectly calculated the first row width, causing excess border width to spill into the table’s margin area.</li>
<li>Fixed an issue where <code>inset box-shadow</code> was incorrectly positioned on table cells with collapsed borders.</li>
<li>Fixed an issue where <code>display: grid</code> subgrids inside <code>grid-lanes</code> containers incorrectly contributed their item intrinsic sizes to the parent’s track sizing algorithm.</li>
</ul>
<h3>Baseline and Height Fixes</h3>
<p>Additional CSS fixes include:</p>
<ul>
<li>Corrected the baseline calculation for inline-block elements: when <code>overflow</code> is not visible, the baseline is now correctly set to the bottom margin edge.</li>
<li>Fixed an issue where replaced elements (like images) did not correctly apply <code>min-height</code> and <code>min-width</code> constraints in certain configurations.</li>
<li>Fixed an issue where children with percentage heights inside absolutely positioned elements using intrinsic height values (<code>fit-content</code>, <code>min-content</code>, <code>max-content</code>) incorrectly resolved against the containing block’s height instead of being treated as <code>auto</code>.</li>
</ul>
<h2 id="editing">Editing Improvements</h2>
<p>Two key editing bugs have been resolved, enhancing content manipulation:</p>
<ul>
<li><strong>FormatBlock command:</strong> <code>execCommand('FormatBlock')</code> no longer strips inline styles from replaced block elements. This prevents loss of text formatting when pasting content.</li>
<li><strong>Text-indent flickering:</strong> The <code>text-indent</code> property no longer flickers or gets ignored on <code>contenteditable</code> elements during typing, ensuring a smoother editing experience.</li>
</ul>
<h2 id="forms">Forms Fixes</h2>
<p>A single but important form behavior was corrected:</p>
<ul>
<li>Fixed an issue where a <code>readonly</code> date <code><input></code> could still be edited via keyboard using the date picker. Now, while the date picker might appear, the value cannot be changed programmatically or via input.</li>
</ul>
<h2 id="mathml">MathML Updates</h2>
<p>Two issues in MathML rendering have been addressed for more reliable mathematical notation:</p>
<ul>
<li>Dynamic changes to <code><mo></code> element attributes now trigger a relayout, ensuring that modifications to operator spacing or other properties are reflected immediately.</li>
<li>Fixed positioning of the <code><mpresc></code> element, which is used for presentation of mathematical expressions.</li>
</ul>
<h2>Conclusion</h2>
<p>Safari Technology Preview 239 continues Apple’s commitment to refining the web platform. With a focus on accessibility, robust CSS handling, and editing reliability, this release provides developers and users with a more stable and inclusive browsing experience. Download the latest version today to test these improvements and prepare for future Safari updates.</p>
Tags: