URL: https://agentcalendardevone.azurewebsites.net/SMBEntryForm.aspx?trg=testteam&campaign=Microsoft%20Internal%20Test%20Camapign

Screen Reader: NVDA (2021.3)

Repro Steps:

1. Open URL: SMB Scheduler (agentcalendardevone.azurewebsites.net) page in Edge Browser.

7. Observe an issue that Incorrect role 'link' is defined on button controls.

Actual Behavior:

Incorrect role 'link' is defined on button controls present on 'Calendar' popup.

Expected Behavior:

In this case, the expected role is {button}. All components need a proper role attribute, ideally with semantics. In rare cases a role attribute should be added to give full context and information to assistive technology. Learn more by reading about when to use an aria role and the html/aria role mappings.

Expected Result:
All components need an accessible name, ideally using semantic elements and attributes. In rare cases, aria-label or aria-labelled by may be needed to alter the name.

Screenshot attachment:

Actual Result:

While navigating in table, Narrator is not announcing as 'enter table' and it is also not announcing rows and column information. while navigating in table, With arrow keys or table navigation keys or tab key, Narrator is announcing as 'end of line/blank'.

With caps-arrow keys, Narrator is giving row and column information.

Expected 
While navigating in table, Narrator should announce as enter table and it should also give row and column information. And while navigating with arrow keys or table navigation keys or tab key, Narrator should not announce as 'end of line/blank' instead it should give row or column information

1. Open URL: React Charts Library & StockChart - StockChart - KendoReact Docs & Demos (telerik.com in Edge browser.
2. "Kendo React Stock Chart Overview" chart will appear. 
3. Navigate to the second chart present under Example using tab key.
4. Now verify whether the single Pointer options alternative is provided for adjusting the graph points or not.

Test Environment:  

1. Open URL: https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/axes/#toc-displaying-time-series 
2. Kendo React home page will appear.
3. Navigate to the "Displaying Time Series" bar graph using tab key.
4. Navigate using arrow keys through the chart controls.
5. Verify whether the Screen reader is announcing the complete data points information of the "Displaying time Series" bar graph or not. 

Browser: Version 103.0.1264.71 (Official Build) (64-bit)

Prerequisite steps:

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartTitle,
    ChartLegend,
    ChartTooltip,
    ChartValueAxis,
    ChartValueAxisItem
} from '@progress/kendo-react-charts';

import 'hammerjs';


	const valueAxis = [
		{
			name: "",
			format: "{0:n1}",
			font: "10px Roboto",
      
		},
	];


const seriesValues = [
		{
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 1",
			spacing: 1,
      data: [27869.8616],
		},
		{
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 2",
			spacing: 1,
      data: [13277.95],
		},
		{
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 3",
			spacing: 1,
      data: [95164.9968],
		},
		{
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [115579.184],
		},
    {
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [null],
		},
        {
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [616.7145289747288],
		},
	];

const ChartContainer = () => (
  <Chart>
      <ChartTooltip
    shared={true}
    />
 <ChartValueAxis>
    {valueAxis.map((e, idx) => (
      <ChartValueAxisItem
        key={idx}
        name={name}
        labels={{
          visible: e.visible !== undefined ? e.visible : true,
          format: e.format,
          rotation: "auto",
          font: e.font,
        }}
      />
    ))}
  </ChartValueAxis>
    <ChartSeries>
      {seriesValues.map((item, idx) => (
        <ChartSeriesItem
          key={idx}
          type={item.type}
          data={item.data}
          name={item.name}
          spacing={item.spacing}
          labels={{
            font: '10px',
            format: "{0:n2}"
          }}

                />))}
    </ChartSeries>
  </Chart>
);

ReactDOM.render(
  <ChartContainer />,
    document.querySelector('my-app')
);

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
  DateTimePicker,
  DateTimePickerChangeEvent,
} from '@progress/kendo-react-dateinputs';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const [date, setDate] = React.useState(new Date());

  const handleChange = (event: DateTimePickerChangeEvent) => {
    setDate(event.value);
  };

  const handleClick = () => {
    setDate(new Date('invaild!'));
  };

  return (
    <React.Fragment>
      <div className="example-wrapper">
        <p>
          (use Alt+<code>↓</code> to open the date-time selector, <code>←</code>{' '}
          and <code>→</code> to navigate, <code>↑</code> to increment and{' '}
          <code>↓</code> to decrement the value)
        </p>
        <DateTimePicker onChange={handleChange} value={date} />
      </div>
      <Button onClick={handleClick}>
        Click me, then the calendar, to break the DateTimePicker.
      </Button>
      <div>{date?.toString()}</div>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

1. Open the https://answers.microsoft.com/en-us/msoffice/ using valid credentials.
2. open any related article.
3. Navigate to 'Reply' button and invoke it.
4. Navigate to 'ordered list' button and invoke it.
5. Navigate to the edit region and type some ordered list items.
6. Now, Navigate to the ordered list items and listen to Narrator announcement.

Actual Result:

On navigating to ordered list items with arrow keys, Narrator is only announcing first letters of the text and while navigating with 'caps-arrow' keys, Narrator is only announcing position details of the list items.

Note: this issue is not observed with nvda

Nvda version: 2020.2

Expected 
On navigating to ordered list items with 'arrow keys' or using 'caps-arrow' keys, Narrator should announce the whole text of the list item including position details.

User Impact 
Knowing how many items are in a list is extremely useful to assistive technology users as they can know if they should attempt to skip the list, navigate to the end, help them recall placement of certain items, or orient themselves within the list.  

import { ChatMessageBoxProps } from '@progress/kendo-react-conversational-ui'
import { FC } from 'react'

const CustomChatMessageBox: FC<ChatMessageBoxProps> = (props) => {
  return (
		<>
			<input
				type="text"
				name="message"
				className="h-full w-full text-base md:text-sm focus:outline-none"
			/>
			{props.sendButton}
		</>
  )
}

export default CustomChatMessageBox