Skip to content

Commit 3a17fca

Browse files
committed
[Discover][A11y] Add underline to search result highlights (elastic#228086)
Closes elastic#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 63737f2 commit 3a17fca

File tree

4 files changed

+18
-3
lines changed

4 files changed

+18
-3
lines changed

src/core/public/styles/rendering/_base.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,18 @@
7878
--kbnAppHeadersOffset: var(--euiFixedHeadersOffset, 0);
7979
}
8080
}
81+
82+
// 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
83+
.ffArray__highlight {
84+
color: $euiColorMediumShade;
85+
}
86+
87+
// 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
88+
.ffSearch__highlight {
89+
text-decoration: dotted underline;
90+
}
91+
92+
// 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
93+
.ffString__emptyValue {
94+
color: $euiColorDarkShade;
95+
}

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)