Update ARIA role attribute in the log stream (elastic#189553)

Updates ARIA role attribute in the log stream so screen readers announce column headers while navigating through the individual cells. - Headers have a role of `columnheader` - Cells have a role of `cell` Tested with VoiceOver on Safari, macOS Sonoma. Closes elastic/observability-accessibility#24 ### Before <img width="1717" alt="Screenshot 2024-07-30 at 19 03 40" src="https://github.com/user-attachments/assets/d5fdb3b8-64a1-4116-9307-abd7bc0c76b0"> ### After <img width="1637" alt="Screenshot 2024-07-30 at 19 01 29" src="https://github.com/user-attachments/assets/13bda67c-21ec-4bbb-a7cd-9117200e948b"> Co-authored-by: Elastic Machine <[email protected]>
darnautov · Aug 1, 2024 · e691d22 · e691d22
1 parent 176a221
commit e691d22
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/...ability_solution/logs_shared/public/components/logging/log_text_stream/column_headers.tsx b/...ability_solution/logs_shared/public/components/logging/log_text_stream/column_headers.tsx
@@ -108,14 +108,12 @@ export const LogColumnHeader: FC<
     'data-test-subj'?: string;
   }>
 > = ({ children, columnWidth, 'data-test-subj': dataTestSubj }) => (
-  <LogColumnHeaderWrapper data-test-subj={dataTestSubj} {...columnWidth}>
+  <LogColumnHeaderWrapper data-test-subj={dataTestSubj} {...columnWidth} role="columnheader">
     <LogColumnHeaderContent>{children}</LogColumnHeaderContent>
   </LogColumnHeaderWrapper>
 );
 
-const LogColumnHeaderWrapper = euiStyled(LogEntryColumn).attrs((props) => ({
-  role: props.role ?? 'columnheader',
-}))`
+const LogColumnHeaderWrapper = euiStyled(LogEntryColumn)`
   align-items: center;
   display: flex;
   flex-direction: row;

diff --git a/...ility_solution/logs_shared/public/components/logging/log_text_stream/log_entry_column.tsx b/...ility_solution/logs_shared/public/components/logging/log_text_stream/log_entry_column.tsx
@@ -30,8 +30,8 @@ export interface LogEntryColumnProps {
   shrinkWeight: number;
 }
 
-export const LogEntryColumn = euiStyled.div.attrs(() => ({
-  role: 'cell',
+export const LogEntryColumn = euiStyled.div.attrs((props) => ({
+  role: props.role ?? 'cell',
 }))<LogEntryColumnProps>`
   align-items: stretch;
   display: flex;