docs: use role attribute for since badges in headings

articles/components/auto-grid/index.adoc

@@ -126,7 +126,8 @@ In general, for customizing automatically rendered columns, you can use the `col
 
 
 
-==== [since:dev.hilla:hilla@v2.5]#Custom Columns Order#
+[role="since:dev.hilla:hilla@v2.5"]
+==== Custom Columns Order
 
 By default, custom columns are added after the automatically rendered columns. You can also define the order of appearance for custom columns by using the `visibleColumns` property. Custom columns can be freely placed before, in between, or after other columns. To do this, you'll need to provide the `key` property of the custom column in the `visibleColumns` property.
 
@@ -225,7 +226,8 @@ You can customize the filter behavior by using additional `columnOptions` proper
 ----
 
 
-== [since:dev.hilla:hilla@v2.5]#Refreshing Data#
+[role="since:dev.hilla:hilla@v2.5"]
+== Refreshing Data
 
 Auto Grid supports refreshing the data by providing a reference to a `refresh` function that can be called from the parent component. The `refresh` function can be obtained by providing a reference of the type `React.MutableRefObject<AutoGridRef>` to the Auto Grid. The `AutoGridRef` type provides a `refresh` function that refreshes the data by calling the backend service. The following example shows how to use the `refresh` function to refresh the data in Auto Grid:
 

articles/components/text-field/index.adoc

@@ -170,7 +170,8 @@ include::{root}/src/main/java/com/vaadin/demo/component/textfield/TextFieldValue
 ----
 --
 
-== [since:com.vaadin:vaadin@V25.3]#Input Mode#
+[role="since:com.vaadin:vaadin@V25.3"]
+== Input Mode
 
 The input mode is a hint to the browser about which virtual keyboard to display when the user interacts with the field on a mobile device.
 

articles/flow/advanced/downloads.adoc

@@ -66,7 +66,8 @@ This method is particularly useful for:
 * Generating dynamic content
 * Streaming large files
 
-==== [since:com.vaadin:vaadin@V25.2]#Overriding the File Name#
+[role="since:com.vaadin:vaadin@V25.2"]
+==== Overriding the File Name
 
 By default, the file name of the download comes from the [classname]`DownloadResponse` returned by the callback, and the download URL is a random-looking string. The [methodname]`fromInputStream` overload that takes a `fileNameOverride` parameter lets you define the file name already when the handler is created:
 

articles/flow/binding-data/data-provider.adoc

@@ -563,7 +563,8 @@ gridDataView.removeFilters();
 ----
 
 
-== [since:com.vaadin:vaadin@V25.2]#Hierarchical Data#
+[role="since:com.vaadin:vaadin@V25.2"]
+== Hierarchical Data
 
 Components such as Tree Grid display hierarchical data, where each item can have child items. The [interfacename]`HierarchicalData` interface in the `com.vaadin.flow.data.provider.hierarchy` package represents such data. It defines three methods:
 

articles/flow/component-internals/element-api/calling-javascript.adoc

@@ -165,7 +165,8 @@
 
 
 [[js-function]]
-== [since:com.vaadin:vaadin@V25.2]#Passing JavaScript Functions#
+[role="since:com.vaadin:vaadin@V25.2"]
+== Passing JavaScript Functions
 
 A [classname]`JsFunction` lets you build a reusable JavaScript function on the server and pass it as a parameter to [methodname]`executeJs()` or [methodname]`callJsFunction()`. The function arrives on the client as a real callable function with its captured values pre-bound, so you don't need to concatenate JavaScript fragments to embed server-side values.
 
@@ -242,7 +243,8 @@
 
 
 [[add-js-initializer]]
-== [since:com.vaadin:vaadin@V25.2]#Client-Side Lifecycle With `addJsInitializer`#
+[role="since:com.vaadin:vaadin@V25.2"]
+== Client-Side Lifecycle With `addJsInitializer`
 
 The [methodname]`Element.addJsInitializer()` method registers a JavaScript expression that runs each time a client-side DOM node is created for the element, and whose returned cleanup callback runs when that DOM node is discarded or the returned [classname]`Registration` is removed.
 

articles/flow/i18n/index.adoc

@@ -148,7 +148,8 @@ public class LanguageSwitcher extends Select<Locale> {
 ----
 
 
-=== [since:com.vaadin:vaadin@V25.2]#Binding to the Locale Signal#
+[role="since:com.vaadin:vaadin@V25.2"]
+=== Binding to the Locale Signal
 
 The current locale is also available as a read-only signal through `UI.localeSignal()`. Rather than seeding the field's value and adding a value-change listener, you can two-way bind the switcher to the signal with `bindValue()`, passing `setLocale` as the write callback:
 

articles/flow/routing/navigation.adoc

@@ -187,7 +187,8 @@ anchor.getElement().setAttribute("router-ignore", "");
 
 
 [[observing-navigation-state]]
-== [since:com.vaadin:vaadin@V25.2]#Observing Navigation State#
+[role="since:com.vaadin:vaadin@V25.2"]
+== Observing Navigation State
 
 The [methodname]`UI.routerStateSignal()` method returns a read-only signal that holds the current navigation state of the UI as a [classname]`RouterState`. The signal value is updated whenever a navigation completes, immediately before [interfacename]`AfterNavigationListener` implementations are notified, so reactive consumers and listeners observe the same state.
 

articles/flow/routing/page-titles.adoc

@@ -65,7 +65,8 @@ class BlogPost extends Component
 
 
 [[generating-page-titles]]
-== [since:com.vaadin:vaadin@V25.2]#Generating Page Titles#
+[role="since:com.vaadin:vaadin@V25.2"]
+== Generating Page Titles
 
 A [interfacename]`PageTitleGenerator` resolves the title of a navigation target without requiring an instance of it. While [methodname]`HasDynamicTitle.getPageTitle()` is an instance method and therefore only usable once the view has been created, a generator is resolved purely from the navigation target class and its [classname]`RouteParameters`. This makes it suitable for use cases that need the title of a route that isn't (and shouldn't be) instantiated, such as breadcrumbs, menus, or other navigation aids that render the titles of a whole trail of routes (see <<route-hierarchy#, Route Hierarchy>>).
 

articles/tools/copilot/index.adoc

@@ -327,7 +327,8 @@ Copilot can send information related to your project outside local environment i
 
 It is possible to block all outbound Copilot requests (excluding license checking) for given users by license owner. Please https://pages.vaadin.com/contact[contact Vaadin] for details.
 
-=== [since:com.vaadin:vaadin@V25.1]#EU Data Region Restriction#
+[role="since:com.vaadin:vaadin@V25.1"]
+=== EU Data Region Restriction
 
 Vaadin accounts can be restricted so that all Copilot AI processing stays in the EU region. When the restriction is active for your account, Copilot uses EU-only AI providers, and the affected dropdowns in Settings are locked to the enforced values and show "Restricted for your account". Please https://pages.vaadin.com/contact[contact Vaadin] for details.