Skip to content

Commit 5c2eab4

Browse files
committed
[Discover][A11y] Add underline to search result highlights (#228086)
Closes #214592 This PR adds `text-decoration: dotted underline` to search result highlights due to accessibility reasons. <img width="1427" height="493" alt="Screenshot 2025-07-15 at 21 08 59" src="https://github.com/user-attachments/assets/c9edb19a-7a59-4aef-b8fe-91f424f62abf" /> <img width="542" height="774" alt="Screenshot 2025-07-15 at 21 07 50" src="https://github.com/user-attachments/assets/e7be0fd1-78d0-46a7-abc4-ec6f4652c7ab" /> Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ... (cherry picked from commit 24e9dc2)
1 parent 9b5406d commit 5c2eab4

File tree

4 files changed

+9
-4
lines changed

4 files changed

+9
-4
lines changed

src/core/packages/application/common/src/global_app_style.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,19 @@ export const renderingOverrides = (euiTheme: UseEuiTheme['euiTheme']) => css`
8989
}
9090
}
9191
92-
// Due to pure HTML and the scope being large, we decided to temporarily apply following 3 style blocks globally.
92+
// Due to pure HTML and the scope being large, we decided to temporarily apply following 4 style blocks globally.
9393
// TODO: refactor within github issue #223571
9494
9595
// Styles applied to the span.ffArray__highlight from FieldFormat class that is used to visually distinguish array delimiters when rendering array values as HTML in Kibana field formatters
9696
.ffArray__highlight {
9797
color: ${euiTheme.colors.mediumShade};
9898
}
9999
100+
// Styles applied to the span.ffSearch__highlight from FieldFormat class that is used to visually distinguish highlighted string values when rendering string values as HTML in Kibana field formatters
101+
.ffSearch__highlight {
102+
text-decoration: dotted underline;
103+
}
104+
100105
// Styles applied to the span.ffString__emptyValue from FieldFormat class that is used to visually distinguish empty string values when rendering string values as HTML in Kibana field formatters
101106
.ffString__emptyValue {
102107
color: ${euiTheme.colors.darkShade};

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/utils/truncate_preserve_highlight_tags.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
function extractTextAndMarkTags(html: string) {
1111
const markTags: string[] = [];
12-
const cleanText = html.replace(/<\/?mark>/g, (match) => {
12+
const cleanText = html.replace(/<\/?mark[^>]*>/g, (match) => {
1313
markTags.push(match);
1414
return '';
1515
});

src/platform/plugins/shared/field_formats/common/converters/string.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,6 @@ describe('String Format', () => {
124124
},
125125
})
126126
)
127-
).toBe('<mark>&lt;img /&gt;</mark>');
127+
).toBe('<mark class="ffSearch__highlight">&lt;img /&gt;</mark>');
128128
});
129129
});

src/platform/plugins/shared/field_formats/common/utils/highlight/html_tags.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99

1010
// These are the html tags that will replace the highlight tags.
1111
export const htmlTags = {
12-
pre: '<mark>',
12+
pre: '<mark class="ffSearch__highlight">',
1313
post: '</mark>',
1414
};

0 commit comments

Comments
 (0)