Safari Technology Preview 237: Accessibility and CSS Enhancements Lead the Way
<p>Apple has released Safari Technology Preview 237, bringing a host of improvements to web developers and users alike. Available for download on macOS Tahoe and macOS Sequoia, this update introduces new features and resolves numerous bugs across accessibility, CSS, DOM, HTML, networking, rendering, and SVG. Existing users can update via System Settings > General > Software Update. Let's dive into the key changes included in this release.</p>
<h2 id="accessibility">Accessibility</h2>
<p>Several important fixes enhance the accessibility of web content, ensuring a more inclusive browsing experience.</p><figure style="margin:20px 0"><img src="https://webkit.org/wp-content/themes/webkit/images/preview-card.jpg" alt="Safari Technology Preview 237: Accessibility and CSS Enhancements Lead the Way" 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>
<h3>Resolved Issues</h3>
<ul>
<li><strong>Slot elements and <code>aria-labelledby</code>:</strong> Fixed slot elements referenced by <code>aria-labelledby</code> to correctly use their assigned slotted content for accessible names while ignoring hidden slotted nodes. This ensures screen readers present the right information.</li>
<li><strong>Consistent labels for <code><meter></code> elements:</strong> The <code><meter></code> element now has consistent accessible labels between <code>aria-label</code> and <code>title</code> attributes, eliminating confusion.</li>
<li><strong>Content in shadow roots with <code>display: contents</code>:</strong> Elements with <code>display: contents</code> and content inside a shadow root are now properly read by assistive technologies when referenced by <code>aria-labelledby</code>.</li>
<li><strong>Checkbox naming via <code><label></code>:</strong> When a checkbox name comes from an associated <code><label></code> element, <code>aria-labelledby</code> now uses the checkbox name instead of its value.</li>
<li><strong>Grid elements in shadow roots and VoiceOver:</strong> Grid elements with child rows inside a shadow root now work correctly with VoiceOver.</li>
<li><strong>Hidden attributes and form controls:</strong> Elements with <code>aria-controls</code> or <code>aria-expanded</code> and the <code>hidden</code> attribute no longer appear in VoiceOver’s Form Control menu.</li>
<li><strong><code>::first-letter</code> text exposure:</strong> The <code>::first-letter</code> pseudo-element’s text is now exposed in the accessibility tree even when no other text accompanies it.</li>
</ul>
<h2 id="css">CSS</h2>
<p>CSS receives a major new pseudo-class selector and several crucial bug fixes.</p>
<h3>New Features</h3>
<ul>
<li><strong><code>:heading</code> pseudo-class selector:</strong> Added support for the <code>:heading</code> pseudo-class selector, allowing developers to style any heading element (<code>h1</code> through <code>h6</code>) with a single rule.</li>
</ul>
<h3>Resolved Issues</h3>
<ul>
<li><strong>CSS <code>@scope</code> and form elements:</strong> Fixed an issue where CSS rules within <code>@scope</code> were not being applied to <code><input></code> and <code><textarea></code> elements.</li>
<li><strong>Dynamic <code>flow-tolerance</code> changes:</strong> Dynamic changes to the <code>flow-tolerance</code> property now trigger a relayout for <code>display: grid-lanes</code>.</li>
</ul>
<h2 id="dom">DOM</h2>
<h3>Resolved Issues</h3>
<ul>
<li><strong><code>offsetX</code> and <code>offsetY</code> for SVG elements:</strong> Fixed coordinate calculation for SVG elements when using <code>offsetX</code> and <code>offsetY</code> — they now use the outermost SVG as the base.</li>
</ul>
<h2 id="html">HTML</h2>
<h3>New Features</h3>
<ul>
<li><strong><code>source</code> attribute on <code>ToggleEvent</code>:</strong> Added support for the <code>source</code> attribute on the <code>ToggleEvent</code> interface, enhancing event handling for toggleable elements.</li>
</ul>
<h2 id="networking">Networking</h2>
<h3>Resolved Issues</h3>
<ul>
<li><strong><code>X-Frame-Options</code> validation:</strong> Fixed the <code>X-Frame-Options</code> header to only strip tab or space characters, not vertical tabs, aligning with standards.</li>
<li><strong>Range request validation:</strong> Range request validation now properly handles HTTP 416 (Requested Range Not Satisfiable) responses.</li>
</ul>
<h2 id="rendering">Rendering</h2>
<h3>Resolved Issues</h3>
<ul>
<li><strong>Table rendering with rowspanned cells:</strong> Fixed table rendering for cells with <code>rowspan</code> to correctly display bottom border color.</li>
<li><strong><code><marquee></code> and table widths:</strong> The deprecated <code><marquee></code> element no longer causes incorrect table width calculations.</li>
<li><strong><code>visibility: collapse</code> on columns:</strong> Table layout now properly handles <code>visibility: collapse</code> on columns.</li>
<li><strong>Intrinsic sizing for replaced elements:</strong> Fixed intrinsic sizing for absolutely positioned replaced elements (e.g., images).</li>
<li><strong>Percentage padding in table cells:</strong> Percentage padding in table cells now resolves against column widths, not the cell’s own width.</li>
<li><strong>Table height distribution:</strong> Height distribution now applies to all <code>tbody</code> sections, not just the first one.</li>
</ul>
<h2 id="svg">SVG</h2>
<h3>New Features</h3>
<ul>
<li><strong><code>color-interpolation</code> for SVG gradients:</strong> Added support for the <code>color-interpolation</code> attribute for SVG gradients, allowing finer control over color rendering in gradients.</li>
</ul>
<p>For the complete list of changes, refer to the WebKit changelog from revision 305774 to 306595. Safari Technology Preview 237 continues Apple’s commitment to improving web standards and developer tools.</p>