Caolán McNamara, Author at Collabora Online and Collabora Office https://www.collaboraonline.com/blog/author/cmcnamara/ Secure Document Collaboration, Controlled by You Thu, 26 Mar 2026 13:01:08 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 https://www.collaboraonline.com/wp-content/uploads/2023/06/collabora-symbols-600-150x150.png Caolán McNamara, Author at Collabora Online and Collabora Office https://www.collaboraonline.com/blog/author/cmcnamara/ 32 32 New MetricSpinButton implementation https://www.collaboraonline.com/blog/new-metricspinbutton-implementation/ https://www.collaboraonline.com/blog/new-metricspinbutton-implementation/#respond Thu, 26 Mar 2026 13:01:08 +0000 https://www.collaboraonline.com/?p=56835 A “metric” spinbutton is a spinbutton that has an associated unit: cm/inch, points and percentage are common units used. The previous implementation used the standard spinbuttons and overlaid the unit some distance from the trailing edge so it could be seen and not obscure the value. Putting the unit inside the spinbutton edit area wasn’t […]

The post New MetricSpinButton implementation appeared first on Collabora Online and Collabora Office.

]]>
Picture of Caolán McNamara

Caolán McNamara

A “metric” spinbutton is a spinbutton that has an associated unit: cm/inch, points and percentage are common units used. The previous implementation used the standard spinbuttons and overlaid the unit some distance from the trailing edge so it could be seen and not obscure the value. Putting the unit inside the spinbutton edit area wasn’t possible.
Before
After

With the new implementation (https://github.com/CollaboraOnline/online/pull/15022) which creates its own spinbutton-alike widget, then after much to and fro with design and testing, we now have a spinbutton with similar behavior and similar accessibility properties as the original but where the units can be shown inside the spinbutton in a more natural way.

The post New MetricSpinButton implementation appeared first on Collabora Online and Collabora Office.

]]> https://www.collaboraonline.com/blog/new-metricspinbutton-implementation/feed/ 0 Accordion bits in sidebar https://www.collaboraonline.com/blog/accordion-bits-in-sidebar/ https://www.collaboraonline.com/blog/accordion-bits-in-sidebar/#respond Tue, 10 Mar 2026 09:27:08 +0000 https://www.collaboraonline.com/?p=56485 Among a host of other accessibility enhancements, we have implemented the W3C Accordion Pattern for our expanders, as used in the sidebar and dialogs, where we have a vertical stack of regions each with a heading and associated contents which can be expanded or collapsed. The implemented recommendation is to surround the heading area of the […]

The post Accordion bits in sidebar appeared first on Collabora Online and Collabora Office.

]]>
Picture of Caolán McNamara

Caolán McNamara

Among a host of other accessibility enhancements, we have implemented the W3C Accordion Pattern for our expanders, as used in the sidebar and dialogs, where we have a vertical stack of regions each with a heading and associated contents which can be expanded or collapsed.

The implemented recommendation is to surround the heading area of the region with a classic h HTML tag, clarify the expand/collapse button with aria-expanded of true/false, and associate it with content region that the button controls.

Once the basic case was implemented it it became clear that we had cases of hierarchical expanders, the most extreme seen in the accessibility checker tool with multiple levels of expanders.

The natural fit here is that each additional level of the hierarchy is a higher h level, h2, h3, etc. But nothing is ever simple, the deeper levels of the hierarchy are created on demand and their full contents don’t exist until expanded, at which time they are updated with additional contents.

Attempting implementation revealed a preexisting trap where expanders created two elements with the same id causing the level depth tracking to mis-categorize what level the on-demand created expanders should be assigned, resulting in a confusing mixture of h2 headings as children on h3 parents.

Fixing the latent duplicate id bug resolves the ambiguity and the hierarchical on-demand created case of nested expanders now presents appropriate accessibility information to aid navigation.

Something of a irony that the most troublesome case of improving the accessibility navigation feature was found in a sidebar dedicated to displaying potential accessibility issues in a document structure.

The post Accordion bits in sidebar appeared first on Collabora Online and Collabora Office.

]]> https://www.collaboraonline.com/blog/accordion-bits-in-sidebar/feed/ 0