Add role format handler (#3165)

* add role format handler

* one line change to rerun checks

Author: angelusmcnally

packages/roosterjs-content-model-dom/lib/formatHandlers/common/roleFormatHandler.ts

@@ -0,0 +1,20 @@
+import type { RoleFormat } from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
+
+/**
+ * @internal
+ */
+export const roleFormatHandler: FormatHandler<RoleFormat> = {
+    parse: (format, element) => {
+        const role = element.getAttribute('role');
+
+        if (role) {
+            format.role = role;
+        }
+    },
+    apply: (format, element) => {
+        if (format.role) {
+            element.setAttribute('role', format.role);
+        }
+    },
+};

packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts

@@ -24,6 +24,7 @@ import { listLevelThreadFormatHandler } from './list/listLevelThreadFormatHandle
 import { listStyleFormatHandler } from './list/listStyleFormatHandler';
 import { marginFormatHandler } from './block/marginFormatHandler';
 import { paddingFormatHandler } from './block/paddingFormatHandler';
+import { roleFormatHandler } from './common/roleFormatHandler';
 import { sizeFormatHandler } from './common/sizeFormatHandler';
 import { strikeFormatHandler } from './segment/strikeFormatHandler';
 import { superOrSubScriptFormatHandler } from './segment/superOrSubScriptFormatHandler';
@@ -79,6 +80,7 @@ const defaultFormatHandlerMap: FormatHandlers = {
     listStyle: listStyleFormatHandler,
     margin: marginFormatHandler,
     padding: paddingFormatHandler,
+    role: roleFormatHandler,
     size: sizeFormatHandler,
     strike: strikeFormatHandler,
     superOrSubScript: superOrSubScriptFormatHandler,
@@ -179,6 +181,7 @@ export const defaultFormatKeysPerCategory: {
         'tableLayout',
         'textColor',
         'direction',
+        'role',
     ],
     tableBorder: ['borderBox', 'tableSpacing'],
     tableCellBorder: ['borderBox'],

packages/roosterjs-content-model-dom/test/formatHandlers/block/displayFormatHandlerTest.ts

@@ -1,7 +1,7 @@
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
-import { DisplayFormat, DomToModelContext, ModelToDomContext } from 'roosterjs-content-model-types';
 import { displayFormatHandler } from '../../../lib/formatHandlers/block/displayFormatHandler';
+import { DisplayFormat, DomToModelContext, ModelToDomContext } from 'roosterjs-content-model-types';
 
 describe('displayFormatHandler.parse', () => {
     let div: HTMLElement;

packages/roosterjs-content-model-dom/test/formatHandlers/common/roleFormatHandlerTest.ts

@@ -0,0 +1,164 @@
+import { DomToModelContext, ModelToDomContext, RoleFormat } from 'roosterjs-content-model-types';
+import { roleFormatHandler } from '../../../lib/formatHandlers/common/roleFormatHandler';
+import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
+import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+
+describe('roleFormatHandler.parse', () => {
+    let div: HTMLElement;
+    let format: RoleFormat;
+    let context: DomToModelContext;
+
+    beforeEach(() => {
+        div = document.createElement('div');
+        format = {};
+        context = createDomToModelContext();
+    });
+
+    it('No role', () => {
+        roleFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({});
+    });
+
+    it('has role', () => {
+        div.setAttribute('role', 'button');
+        roleFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({
+            role: 'button',
+        });
+    });
+
+    it('has role with different value', () => {
+        div.setAttribute('role', 'tabpanel');
+        roleFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({
+            role: 'tabpanel',
+        });
+    });
+
+    it('has empty role', () => {
+        div.setAttribute('role', '');
+        roleFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({});
+    });
+
+    it('table with role="table"', () => {
+        const table = document.createElement('table');
+        table.setAttribute('role', 'table');
+        roleFormatHandler.parse(format, table, context, {});
+        expect(format).toEqual({
+            role: 'table',
+        });
+    });
+
+    it('table with role="grid"', () => {
+        const table = document.createElement('table');
+        table.setAttribute('role', 'grid');
+        roleFormatHandler.parse(format, table, context, {});
+        expect(format).toEqual({
+            role: 'grid',
+        });
+    });
+
+    it('table with role="presentation"', () => {
+        const table = document.createElement('table');
+        table.setAttribute('role', 'presentation');
+        roleFormatHandler.parse(format, table, context, {});
+        expect(format).toEqual({
+            role: 'presentation',
+        });
+    });
+
+    it('table with role="treegrid"', () => {
+        const table = document.createElement('table');
+        table.setAttribute('role', 'treegrid');
+        roleFormatHandler.parse(format, table, context, {});
+        expect(format).toEqual({
+            role: 'treegrid',
+        });
+    });
+});
+
+describe('roleFormatHandler.apply', () => {
+    let div: HTMLElement;
+    let format: RoleFormat;
+    let context: ModelToDomContext;
+
+    beforeEach(() => {
+        div = document.createElement('div');
+        format = {};
+        context = createModelToDomContext();
+    });
+
+    it('No role', () => {
+        roleFormatHandler.apply(format, div, context);
+        expect(div.outerHTML).toBe('<div></div>');
+    });
+
+    it('Has role', () => {
+        format.role = 'button';
+        roleFormatHandler.apply(format, div, context);
+        expect(div.outerHTML).toBe('<div role="button"></div>');
+    });
+
+    it('Has role with different value', () => {
+        format.role = 'tabpanel';
+        roleFormatHandler.apply(format, div, context);
+        expect(div.outerHTML).toBe('<div role="tabpanel"></div>');
+    });
+
+    it('Role applied to different element types', () => {
+        format.role = 'navigation';
+        const nav = document.createElement('nav');
+        roleFormatHandler.apply(format, nav, context);
+        expect(nav.outerHTML).toBe('<nav role="navigation"></nav>');
+    });
+
+    it('Apply role="table" to table element', () => {
+        format.role = 'table';
+        const table = document.createElement('table');
+        roleFormatHandler.apply(format, table, context);
+        expect(table.outerHTML).toBe('<table role="table"></table>');
+    });
+
+    it('Apply role="grid" to table element', () => {
+        format.role = 'grid';
+        const table = document.createElement('table');
+        roleFormatHandler.apply(format, table, context);
+        expect(table.outerHTML).toBe('<table role="grid"></table>');
+    });
+
+    it('Apply role="presentation" to table element', () => {
+        format.role = 'presentation';
+        const table = document.createElement('table');
+        roleFormatHandler.apply(format, table, context);
+        expect(table.outerHTML).toBe('<table role="presentation"></table>');
+    });
+
+    it('Apply role="treegrid" to table element', () => {
+        format.role = 'treegrid';
+        const table = document.createElement('table');
+        roleFormatHandler.apply(format, table, context);
+        expect(table.outerHTML).toBe('<table role="treegrid"></table>');
+    });
+
+    it('Apply role to table cell elements', () => {
+        format.role = 'gridcell';
+        const td = document.createElement('td');
+        roleFormatHandler.apply(format, td, context);
+        expect(td.outerHTML).toBe('<td role="gridcell"></td>');
+    });
+
+    it('Apply role to table header elements', () => {
+        format.role = 'columnheader';
+        const th = document.createElement('th');
+        roleFormatHandler.apply(format, th, context);
+        expect(th.outerHTML).toBe('<th role="columnheader"></th>');
+    });
+
+    it('Apply role to table row elements', () => {
+        format.role = 'row';
+        const tr = document.createElement('tr');
+        roleFormatHandler.apply(format, tr, context);
+        expect(tr.outerHTML).toBe('<tr role="row"></tr>');
+    });
+});

packages/roosterjs-content-model-types/lib/contentModel/format/ContentModelTableFormat.ts

@@ -9,6 +9,7 @@ import type { SpacingFormat } from './formatParts/SpacingFormat';
 import type { TableLayoutFormat } from './formatParts/TableLayoutFormat';
 import type { SizeFormat } from './formatParts/SizeFormat';
 import type { DirectionFormat } from './formatParts/DirectionFormat';
+import type { RoleFormat } from './formatParts/RoleFormat';
 
 /**
  * Format of Table
@@ -23,4 +24,5 @@ export type ContentModelTableFormat = ContentModelBlockFormat &
     MarginFormat &
     DisplayFormat &
     TableLayoutFormat &
-    SizeFormat;
+    SizeFormat &
+    RoleFormat;

packages/roosterjs-content-model-types/lib/contentModel/format/FormatHandlerTypeMap.ts

@@ -22,6 +22,7 @@ import type { ListStyleFormat } from './formatParts/ListStyleFormat';
 import type { ListThreadFormat } from './formatParts/ListThreadFormat';
 import type { MarginFormat } from './formatParts/MarginFormat';
 import type { PaddingFormat } from './formatParts/PaddingFormat';
+import type { RoleFormat } from './formatParts/RoleFormat';
 import type { SizeFormat } from './formatParts/SizeFormat';
 import type { SpacingFormat } from './formatParts/SpacingFormat';
 import type { StrikeFormat } from './formatParts/StrikeFormat';
@@ -165,6 +166,11 @@ export interface FormatHandlerTypeMap {
      */
     padding: PaddingFormat;
 
+    /**
+     * Format for RoleFormat
+     */
+    role: RoleFormat;
+
     /**
      * Format for SizeFormat
      */

packages/roosterjs-content-model-types/lib/contentModel/format/formatParts/RoleFormat.ts

@@ -0,0 +1,9 @@
+/**
+ * Format of Aria role
+ */
+export type RoleFormat = {
+    /**
+     * Role of this element
+     */
+    role?: string;
+};

packages/roosterjs-content-model-types/lib/index.ts

@@ -59,6 +59,7 @@ export { FloatFormat } from './contentModel/format/formatParts/FloatFormat';
 export { EntityInfoFormat } from './contentModel/format/formatParts/EntityInfoFormat';
 export { UndeletableFormat } from './contentModel/format/formatParts/UndeletableFormat';
 export { ImageStateFormat } from './contentModel/format/formatParts/ImageStateFormat';
+export { RoleFormat } from './contentModel/format/formatParts/RoleFormat';
 
 export { DatasetFormat, ReadonlyDatasetFormat } from './contentModel/format/metadata/DatasetFormat';
 export { TableMetadataFormat } from './contentModel/format/metadata/TableMetadataFormat';